Javascript中的事件委派性能

我在Javascript中读到了关于事件委托概念的内容。我们可以将事件绑定到父节点，而不是将事件附加到每个子节点。我试图测量传统和委派场景中的时间。

With Delegation

Traditional

HTML

<ul id="list">
    <li id="1">Item #1</li>
    <li id="2">Item #2</li>
    <li id="3">Item #3</li>
    <li id="4">Item #4</li>
    <li id="5">Item #5</li>
    <li id="6">Item #6</li>
    <li id="7">Item #7</li>        
    <li id="8">Item #8</li>
</ul>

团

document.getElementById('list').addEventListener('click', function(e){
    var T1 = window.performance.now();
    console.log(window.performance.now()-T1);
});

传统

document.getElementById('1').addEventListener('click',function(){
    var T1 = window.performance.now();
    console.log(window.performance.now()-T1);
});
document.getElementById('2').addEventListener('click',function(){
    var T1 = window.performance.now();
    console.log(window.performance.now()-T1);
});

与事件直接绑定到子节点的情况相比，在委托的情况下侦听事件的时间更高。请参阅控制台以获取结果。我认为这是因为事件起泡并到达父节点并且与在子节点上直接捕获它的位置相比需要时间。

我说错了吗？代表团是否滞后？低带宽用户会有不好的用户体验吗？

最佳答案：

0 个答案:

没有答案