1

我想用+new Datejavascript 计算 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 秒

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

4

1 回答 1

2

您正确测量了运行该 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);
});
于 2013-06-13T07:51:23.857 回答