javascript - 长页面的 Javascript 性能问题

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 很慢也是正确的，如果性能是优先考虑的，考虑一次渲染更少的元素是有益的。