Javascript 动态添加元素时刷新html

我有一点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);

---

在构建DOM之后放置所有元素加载

i、 e使用

$(document).ready(function(){
     // induvidual elements loadings
});

$符号表示。要使用jquery，请添加脚本块

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

---

这样，基本结构将完全加载，各个部分可能需要自己的时间。

一次向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);

函数dom（标记、属性）{
变量el，key，child，child；
el=document.createElement（标记）；
用于（输入属性）{
if（attributes.hasOwnProperty（键））{
el[key]=属性[key]；
}
}
对于（i=2，l=arguments.length；i

您的javascript是否放在文件的底部？我们可以看到一些代码吗？听起来您没有将每个元素单独添加到dom中，或者直到某个特定时间才将其隐藏。请发布一些代码或JSFIDLE，以便我们了解您的代码是如何工作的。动态地将元素一次添加到dom中是一个非常糟糕的主意。每次向DOM添加可见元素时，都会强制整个DOM树回流，这会降低性能。批处理您的更改。jQuery从未被使用过，您可能想告诉他您的方法需要jQuery…发布了一些代码。你说得对，这次装载时间缩短了10倍！但当页面加载需要5秒钟，然后一次绘制所有内容时，它看起来仍然很邋遢。有没有一种方法可以先画主要元素（我将在这些元素上绘制图形），然后一次一个地画每个div，而不需要重新绘制整个页面？非常感谢！