javascript-浏览器行为庞大

任何人都可以说一下不同的浏览器如何处理以下内容：

对HTML文档进行图片处理,该文档实质上呈现了具有大量数据的静态应用程序的内容.

<div class="abundant_class">
    <div class="abundant_class">
        <div class="abundant_class"></div>
        <div class="abundant_class"></div>
        ...
    </div>       
    <div class="abundant_class">...</div>
    <div class="abundant_class">...</div>
    ...
</div>

想象一下O(1000)文档中的此类元素.

将点击事件分配给所有这些元素的最快方法是什么？

>< div class =“ abundant_class” onclick =“ javascript：foo()”>
> $(‘.abundant_class’).click(function(foo();));
> $(‘div’).click(function(){if($(this).hasClass(‘abundant_class’)){foo();}
>还有什么？

我特别想知道这些选择会导致多少内存和CPU.

提前致谢.

特雷弗·米尔斯(Trevor Mills)

解决方法:

在这种情况下,请使用.live()或.delegate(),将负载从初始绑定转移到事件冒泡(无论如何都会发生),如下所示：

$('div.abundant_class').live('click', function() {
  foo();
});

如果事件冒泡的元素与选择器匹配,则它将一个事件处理程序绑定到文档,并侦听click事件到bubble up并对其执行操作.

根据评论讨论,这是经过优化的版本：

$(document.body).delegate('div.abundant_class', 'click', function() {
  foo();
});

标签：optimization,cpu-usage,web-applications,javascript,jquery
来源： https://codeday.me/bug/20191105/1997566.html