javascript - IE8 中的 jQuery 和 DOM 操作性能问题

Question

我在工作中用 JQuery 开发了一个模块，它基本上是一个具有以下功能的表格

• 细胞水平编辑
• 行级编辑
• 拖放 n 行以改变位置
• 显示/隐藏列
• 调整列的大小

在 FF9.0、IE9 和 Chrome 等最新浏览器上一切正常，但在 IE8 和 FF3.6 等较旧的浏览器中，随着表格中行数的增加，页面性能显着降低。 我已经尝试了很多来自 jQuery 和 DOM 操作的优化，但仍然对性能没有影响。知道我是否遗漏了一些东西或一些技巧来使性能更好，即达到可接受的水平。

我没有使用任何插件，一切都是我的自定义实现。 javascript 文件非常大，我正在寻找一些通用的良好做法和技巧。

Answer 1

有两种主要方法可以提高大型 html 页面的性能 - 减少页面回流次数和减少处理程序数量。

<强>1。减少页面回流次数

每次您对 DOM 进行更改时，它都需要重新绘制自己。这是回流。通过使用所有 DOM 操作创建一个字符串或 DOM 片段，然后将其插入到您的页面中，将这些保持在最低限度。这只会触发一次回流。例如，如果您要添加一个表格，请按原样创建包含文本的整个表格，然后在一次操作中将其插入。

JQuery 允许您像这样创建 DOM 片段:

var table = $('<table></table');

您可以用标准方式操作您的片段:

var line = $('<tr><td>Some Data</td></tr>');
line.css('color','red');
table.append(line);

然后当片段完成时，一步将其添加到 DOM:

$('body').append(table);

您只会触发一次回流，并且该过程会快几个数量级。

<强>2。减少处理程序的数量

如果每一行都有很多控件，那就是很多处理程序。相反，只创建一个处理程序并将其附加到文档根目录，然后在调用它时检查目标属性以发现要执行的操作。在 JQuery 中，您可以使用新的“on”处理程序来执行此操作，或者使用旧的“live”样式处理程序。

例如:

$('table td').on('click', function() {
  //do work here
});

只会创建一个处理程序来处理所有 td 点击事件。

同时执行这两项操作，您应该会看到显着提高的性能。