javascript - 为什么 DOM 单击事件需要这么长时间？

Question

在到达我的代码之前，点击我的按钮需要 >2 秒(实际按钮处理程序中的代码运行大约 10 毫秒)。

绑定(bind)如下:

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

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

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

Answer 1

1. 您的页面上有上千个按钮，而对于大多数用户来说，几十个按钮就足够了。对于大多数用户来说，这是一个可访问性问题。

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

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

像这样:

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