Come posso testare le prestazioni del codice di manipolazione DOM in JS

Voglio testare le prestazioni di alcuni frammenti di codice in JS usando:

function perf() {
  var start = new Date()
  // the snippet codes
  var end = new Date()
  return end - start
}

poi ho scritto un codice di esempio:

HTML:

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

JS:

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)

L'output della console era: t1: 199 ms t2: 7332 ms

Sembra che t2 sia la prestazione che voglio, ma avvolgerli con un timer differito è strano, qual è il modo giusto per farlo? E perché t1 è così veloce?