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

Question

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

在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"处理程序来执行此操作,或者使用旧的"实时"样式处理程序.

例如:

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

将只创建一个处理所有td点击事件的处理程序.

做这两件事你应该看到显着改善的性能.