Question

我正在处理一个超过3400个项目的超长页面。每个项目都有一个带有3个按钮的表单，每个表单都附加了一个jQuery $ .on（）点击事件。我认为这是导致我的问题（缓慢响应悬停，很长时间渲染页面）在IE8中使用IE7文档模式的原因。当我选择$（'button'）时，我会获得超过10K的元素。

使用来自JSON对象的快速DoT.js模板库渲染页面，该对象可以深入6级。

任何想法可能是我的问题？

Answer 1

根据我的经验，IE7和IE8 非常慢。 IE9更好，IE10可以接受。

如果您绝对需要执行此操作，则必须查看更具侵略性的性能调整，例如不渲染所有3400个元素。

根据您的描述，可能不会在您的JavaScript代码中出现性能损失。如果悬停事件需要很长时间，那意味着浏览器速度很慢。

Answer 2

如果问题是众多的事件处理程序，那么使用事件委托修复它是微不足道的。

您没有提到DOM元素的结构，但为了举例，假设您当前正在附加事件处理程序：

$('.myform').on( 'click', function() { /*...*/ } );

其中myform是每个表单上的类名。

现在假设您将这些表单嵌套在id =“formparent”的父元素中。您需要做的就是将代码更改为：

$('#formparent').on( 'click', '.myform', function() { /*...*/ } );

真的那么简单。

如果您发布了一些代码，有人可以提供更具体的建议。

Answer 3

您是否尝试删除javascript以查看该网页的效果？如果您无法将其删除，请在浏览器中将其禁用，并查看其影响。如果您的页面运行速度更快，那么您就知道自己找到了问题的一部分。

3400+事件监听器很多，你可以尝试重写javascript以允许在DOM中更高级别的委托事件监听器。您有3个按钮，因此可能委托三个侦听器并将单击的表单元素传递给处理函数。除此之外，很难知道是否存在其他javascript性能问题而不知道其余代码的作用。

Frits也是正确的，IE7 / 8速度很慢，如果性能优先，考虑一次渲染更少的元素是有益的。