javascript - 使用 JavaScript 阻止 DOM 解析

Question

我有一个小问题。我在 HTML 页面上有一个表，该表由 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);