Question

我在测试一些严重更新DOM的代码的性能方面遇到了一些麻烦。

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

＆＃13;

function insertListItem() {
  let ul = document.querySelector('ul')
  let start = new Date()
  
  // heavy dom operations
  for (let i = 0; i < N; i++) {
    let li = document.createElement('li')
    li.textContent = 'item' + i
    ul.appendChild(li)
  }
  
  // log the duration (deferred by 0ms timer)
  setTimeout(() => {
    let t2 = new Date() - start
    console.log(`t2: ${t2} ms`)
  }, 0)
 
  // log the duration instantly
  let t1 = new Date() - start
  console.log(`t1: ${t1} ms`)
}

let N = 100000
let btn = document.querySelector('button')
btn.addEventListener('click', insertListItem)

＆＃13;

<section>
    <button>insert list item</button>
    <ul></ul>
</section>

＆＃13;

t1，t2的控制台输出有巨大差异，这超出了我的预期，除了计时器之外，上面的代码是全部同步。由于事件循环，定时器的回调将被推入回调/事件队列并等待执行，这肯定会导致t1和t2之间的某种程度的延迟，否则他们会＃39 ;应该大致相同。

但是，t1的行为就好像它被称为before the rendering task，t2被称为after the rendering task。原因是什么？如何更改测试以进行正确测量？

DOM操作性能测试

0 个答案: