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

jQuery and DOM Manipulation Performance Issue in IE8

本文关键字：操作性 性能 问题 操作 DOM 中的 jQuery IE8      更新时间：2023-09-26

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

  • 单元格级别编辑
  • 行级编辑
  • 拖放n行以更改位置
  • 显示/隐藏列
  • 调整列大小

在最新的浏览器（如FF9.0、IE9和Chrome）上，一切都很好，但在IE8和FF3.6等旧浏览器中，随着表中行数的增加，页面性能显著降低。我已经尝试了jQuery和DOM操作的许多优化，但仍然对性能没有影响。如果我错过了什么或一些技巧来提高性能，即达到可接受的水平，你有什么想法吗。

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

有两种主要方法可以提高大型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单击事件。

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

坏消息是，您实际上无能为力，因为这主要取决于浏览器中使用的javascript引擎。

如果你可以选择谷歌的Chrome IE8，但在公共网站上，这很可能不是一个很好的解决方案。但它可以在企业环境中使用，用户可以轻松地更新软件。

您也可以尝试在飞行中渲染表格：

Ao你得到了你的表，你得到了一个用javascript（或通过ajax可拉）表示信息的数组，再加上你在表中的位置（行）和表的长度（maxrows）。

然后创建一个只有视口那么大的表，也许大一点。视口上方和下方的所有内容都由一个大<div>或任何扩展到视口中最顶部行之前的剩余行或行的高度的内容处理。

这样，在任何时候都只存在数量非常有限的dom节点。它可能会提高性能。

当用户滚动时，删除不再在视口中的表单元格（并将它们的高度添加到该侧的相应空白块），并添加新进入视口的表单元（删除该侧空白的高度）。

相关文章：