Javascript DOM操作性能测试

我在测试一些严重更新DOM的代码的性能时遇到了一些问题

为了举例说明，我创建了一个简单的演示：

函数insertListItem（）{
设ul=document.querySelector（'ul'）
开始=新日期（）
//重dom操作
for（设i=0；i{
让t2=新日期（）-开始
log（`t2:${t2}ms`）
}, 0)
//立即记录持续时间
设t1=新日期（）-开始
log（`t1:${t1}ms`）
}
设N=100000
设btn=document.querySelector（'按钮'）
btn.addEventListener（'click'，insertListItem）

插入列表项

当t1在渲染之前执行时

setTimeout（{}，0）

的行为类似于“渲染后执行”。我想你可以在这里找到更好的解释，那么，对于不同的Ns，你得到了什么值？你的期望是什么？最大的区别是什么？您在哪个浏览器/引擎（版本）中运行此操作？@newpatriks正如您所说，

t1

表现为“渲染前日志”，而

t2

表现为“渲染后日志”。我很困惑web DOM api都是同步api，为什么在渲染任务完成之前可以调用

t1

？@Bergi值如@newpatricks所说。我希望

t1

在渲染任务完成后充当“日志”。我目前使用最新的Chrome浏览器。我的猜测是，它与浏览器运行时有关，而不仅仅与JS线程有关，但我在这里有点迷失了。@Bergi，例如N=100000，t1=200ms，t2=7000ms；我预计t1=t2=7000ms。