为什么DOM点击事件需要这么长时间？

Question

在达到我的代码之前，单击我的按钮需要2秒钟以上的时间（实际按钮处理程序中的代码在10毫秒内运行）。

约束如下：

$('#my-div').find('.my-button').on('click', function(){ ... })

没有其他鼠标事件处理程序绑定到此元素或其父级或子级。

这些按钮很多，页面上约有1000个。我猜想这与它有关，但是我仍然不明白为什么它这么慢。我有什么可以做的吗？

Answer 1

1. 页面上有1000个按钮，对于大多数用户来说，几十个按钮应该绰绰有余。对于大多数用户来说，这是一个可访问性问题。

2. 您的页面约为1.6MB。页面越大，浏览器呈现和操纵它的速度就越慢。大多数程序员认为页面由于JavaScript而变慢，实际上99％的时间该页面变慢的原因是因为浏览器必须呈现和操纵页面中的html。对于旧版本的Internet Explorer尤其如此。

3. 您应该只设置一个事件处理程序，而不是设置一千个事件处理程序（必须由浏览器单独编译）...

像这样：

$('#my-div').on('click', '.my-button', function(){ ... })