javascript - 渲染大量元素

Question

如何使用“停止脚本对话框”呈现它。任何解决方案都可以理解。提前致谢

document.write("<ul>");

for(var i=0;i<1000000;i++){


    document.write("<li>");

    document.write("<div><input value='"+i+"'/></div>");

    document.write("</li>");


}

document.write("</ul>");

Answer 1

首先，我假设这是一个理论讨论，因为任何页面设计都不应该考虑数百万个 DOM 元素。如果曾经认为可能有这么多元素，那么就应该设计出一种不同的设计，即一次显示较小的数据窗口。

要绕过无响应的对话框，您必须将 javascript 进程分成多个部分并分别执行每个部分，同时允许系统在各个部分之间处理其他事件。这通常是通过将工作分成 block 然后在 setTimeout() 上执行每个 block 来完成的。您可以在此处查看几个处理大型数组的示例:

Best way to iterate over an array without blocking the UI .

但是，您在这个测试中遇到了很多问题，因为您还必须停止使用 document.write()，因为一旦您让系统在 setTimeout() 操作之间处理其他事件，您就不能再使用 document.write() 在解析流，因为文档将完成解析。相反，您必须更改为在 DOM 中的适当位置动态插入 DOM 元素。

这是一些代码:

function insertElements(num) {
    var totalCntr = 0;
    var chunkSize = 1000;
    var parent = document.getElementById("container");
    var progress = document.getElementById("progressCntr");

    function doChunk() {
        var chunkCntr = 0;
        var fragment = document.createDocumentFragment();
        while (chunkCntr < chunkSize && totalCntr < num) {
            var li = document.createElement("li");
            li.innerHTML = "<div><input value='" + totalCntr + "'/></div>";
            fragment.appendChild(li);
            ++totalCntr;
            ++chunkCntr;
        }
        parent.appendChild(fragment);
        progress.innerHTML = totalCntr;
        if (totalCntr < num) {
            setTimeout(doChunk, 0);
        }
    }    
    // start the whole thing
    doChunk();
}

insertElements(100000);

工作演示:http://jsfiddle.net/jfriend00/0vw82q5y/

当前设置为 100,000 个元素。如果您想尝试更高的值，欢迎您(受限于您系统的内存限制)。

如果您降低 chunkSize 值，系统将在运行时更响应用户输入。如果增加 chunksize 值，整体端到端时间可能会更快。

如果每个 block 都可以是它自己的 DOM 树，这样它就可以在一个单一的 DOM 操作中插入，那么这里的端到端时间会更快。如果您插入了所有 <li> 元素，那是不可能的。此处使用文档片段试图帮助解决这个问题，但最终，它仍然必须将每个 <li> 单独插入到文档中，这确实会减慢此操作。

注意:将工作分成 block 可能会降低整体端到端性能。我没有尝试优化这段代码的性能，而是想说明这个概念。