Question

我希望使用+new Date来计算javascript中的DOM操作时间成本，例如插入240,000个DOM节点

var t1 = +new Date();

var tbody = document.getElementsByTagName("tbody")[0];
for (var i = 0; i < 20000; i++) {
    var tr = document.createElement("tr");
    for (var t = 0; t < 6; t++) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(i + "," + t));
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}

var t2 = +new Date();
console.log(t2 - t1);

当我运行此代码时，日志显示仅约1秒，但实际上花费的时间超过1秒，甚至超过5秒

为什么会这样？如何计算这个正确的成本时间？

Answer 1

您正在测量运行该Javascript片段所需的时间，但是浏览器必须做很多工作才能生成结果。

如果设置超时，可以在完成测量之前让浏览器渲染：

var t1 = new Date();

var tbody = document.getElementsByTagName("tbody")[0];
for (var i = 0; i < 20000; i++) {
    var tr = document.createElement("tr");
    for (var t = 0; t < 6; t++) {
        var td = document.createElement("td");
        td.appendChild(document.createTextNode(i + "," + t));
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}

console.log("Script finished: ", new Date() - t1);
setTimeout(function() {
    console.log("Render complete: ", new Date() - t1);
});

在javascript中混淆DOM操作

1 个答案: