阻止 DOM 使用 JavaScript 解析

Question

我有个小问题。我在一个HTML页面上有一个table，它是通过JS中的异步调用填充的。有成千上万的元素，显然它们充满了类并且所有这些都是为了使它们更漂亮 :) .

这样做是这样的：

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我能够确定整个过程大约需要100ms的JS执行，这意味着时间是实际上正在排队 DOM 解析。（我说得对吗？）

所以，我想知道是否有任何方法可以执行以下操作：

Dom.stopParsing();

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

如此，有效减少解析时间！

Answer 1

使用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);

阻止 DOM 使用 JavaScript 解析

Blocking DOM Parsing with JavaScript

javascript

browser

dom

domparser