用JavaScript阻止DOM解析

问题描述：

我有一个小问题。我在HTML页面上有一个表格，它由JS中的异步调用填充。有成千上万的元素，显然他们充满了课堂，所有这些让他们变得可爱:)。用JavaScript阻止DOM解析

这是像这样做：

for(var i = 0; i < elements.length; i++){ 
    var td = document.createElement("td"); 
    td.className = "all the pretty css"; 

    var button = document.createElement("a"); 
    button.className = "btn so pretty wow"; 
    td.appendChild(button); 

    tableTr.appendChild(td); 
}

然而，这需要大量的时间，并通过使用console.time和console.timeEnd我能够确定的是，整个过程大约需要JS执行的100毫秒，这意味着该时间实际上是由DOM解析排队的。（对吗？）

所以，我想知道是否有任何方式做这样的事情：

Dom.stopParsing(); 

mySuperFunction(); 
anotherFunction(); 
thisTimeAsync(
    function(){ 
     Dom.parse(); 
);

因此，有效地减少解析时间！

[运行JS已经停止DOM解析和异步函数允许解析继续（https://jsfiddle.net/Ld81wufg/），所以我想我不知道你“问。 –

@MikeC我刚刚添加了一个简单的演示...我猜测每个tableTr（它存在于dom中，而不仅仅是一个js对象）会启动解析器，因此for的每次迭代都会排队解析器... –

100ms看起来不是很糟糕。此外，我无法解析“被DOM解析排队”的句子。顺便说一下，你有没有考虑过使用文件碎片？ –

答

使用document fragments：

var frag = document.createDocumentFragment(); 

for(var i = 0; i < elements.length; i++){ 
    var td = document.createElement("td"); 
    td.className = "all the pretty css"; 

    var button = document.createElement("a"); 
    button.className = "btn so pretty wow"; 
    td.appendChild(button); 

    frag.appendChild(td); 
} 

tableTr.appendChild(frag);

我在找什么！谢谢 –

什么是性能比较？ –

我还没有做过，我会做，并在这里评论它！ –

用JavaScript阻止DOM解析

相关推荐