javascript - 在动态添加元素时刷新 html

Question

我有一些 javascript 可以动态地将元素添加到我的页面。问题是在任何给定的运行中都有数百个元素要创建，虽然加载单个元素只需要不到一秒钟的时间，但整个页面可能需要 30 秒或更长时间才能完全加载，然后所有内容突然跳到页。我的问题是:如何更新页面，以便我动态创建的元素在创建后立即显示？

       var newDiv = document.createElement('div');

       for (var val in array) {
            var newCanvas = document.createElement('div');
            newCanvas.className = "graph";
            newDiv.appendChild(newCanvas);

            drawGraph(val, newCanvas);  //adds a bunch of elements to newCanvas
            addTitle(val, newCanvas);          //adds another
            addDescription(val, newCanvas);    //adds another
       }

       document.body.appendChild(newDiv);

Answer 1

一次向 DOM 中动态添加数百个元素是非常低效的。每次向 DOM 添加单个可见元素时，都会强制重排整个 DOM 树，然后重新绘制到屏幕。

您应该使用 JavaScript 创建一个 DOM 片段(例如 div 元素)，您可以向其添加新的 DOM 元素。拥有所有新元素后，您可以通过将该片段的子元素转移到实时 DOM 树中包含的 DOM 元素来批量添加它们。

以下是创建具有一组指定属性和可选子元素的 DOM 元素的函数示例。将元素及其子元素分配给变量 myDiv 后，该元素将附加到文档的正文中。

function dom(tag, attributes) {
    var el, key, children, child;
    el = document.createElement(tag);
    for (key in attributes) {
        if (attributes.hasOwnProperty(key)) {
            el[key] = attributes[key];
        }
    }
    for (i = 2, l = arguments.length; i < l; i++) {
        child = arguments[i];
        if (child.nodeType == 1 || child.nodeType == 3) {
            el.appendChild(child);
        }
    }
    return el;
}

var myDiv = dom(
    'div',
    { id: 'myDiv', className: 'container' },
    dom(
        'p',
        { className: 'firstParagraph' },
        document.createTextNode('If you enjoy this movie, '),
        dom(
            'a',
            { href: 'http://www.amazon.com', title: 'Buy this movie at Amazon.com!' },
            document.createTextNode('buy it at Amazon.com')
        ),
        document.createTextNode('!')
    ),
    dom(
        'p',
        {},
        document.createTextNode('The quick brown fox jumps over the lazy dog.')
    )
);

document.body.appendChild(myDiv);