事件委托的性能影响

测试代码#

测试环境为新版 Microsoft Edge，Chrome

const inEl = document.createElement('input')inEl.value = 1000document.body.appendChild(inEl)
const btEl = document.createElement('button')btEl.innerText = '刷新'btEl.onclick = () => {  console.warn('------------reload--------------')  createList(Number(inEl.value), onclick)}document.body.appendChild(btEl)
const eventCount = 500
function onclick(el, elIndex) {  console.time(`[独立事件] 操作${eventCount}次当前DOM`)  for (let i = 0; i < eventCount; i++) {    const count = parseInt(elIndex.innerText)    elIndex.innerText = count + 1  }  console.timeEnd(`[独立事件] 操作${eventCount}次当前DOM`)}
function createList(count = 4000, onclick) {  console.time(`[创建] ${count}元素耗时`)  const elUl = document.createElement('ul')
  elUl.addEventListener(    'click',    (e) => {      console.time('事件触发时间差')      /** @type {HTMLElement} */      const countEl = e.target.lastChild
      console.time(`[委托事件] 操作${eventCount}次当前DOM`)      for (let i = 0; i < eventCount; i++) {        e.target.lastChild.innerText = parseInt(countEl.innerText) + 1      }      console.timeEnd(`[委托事件] 操作${eventCount}次当前DOM`)    },    true  )
  for (let i = 0; i < count; i++) {    const elLi = document.createElement('li')    elLi.innerText = 'list-'    const elCount = document.createElement('span')    elCount.innerText = i    const elCount2 = document.createElement('p')    elCount2.innerText = i    elLi.appendChild(elCount)    elLi.appendChild(elCount2)    if (onclick)      elLi.onclick = () => {        console.timeEnd('事件触发时间差')        onclick(elLi, elCount, i)      }    elUl.appendChild(elLi)  }
  document.body.appendChild(elUl)  console.timeEnd(`[创建] ${count}元素耗时`)}