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

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

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

在最新的浏览器（如FF9.0、IE9和Chrome）上，一切都可以正常运行，但在较旧的浏览器（如IE8和FF3.6）中，由于表中的行数增加，页面性能显著降低。 我尝试了许多jQuery和DOM操作的优化，但仍然没有对性能产生任何影响。知道我是否遗漏了一些东西或技巧来提高性能，即达到可接受的水平

---

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

坏消息是，您可以做的并不多，因为它主要取决于浏览器中使用的javascript引擎

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

您还可以尝试动态渲染表：

Ao您得到了您的表，您得到了一个包含javascript信息的数组（或通过ajax可拖动），另外还得到了关于您在表中的位置（行）和表的长度（maxrows）的信息

然后创建一个仅与视口一样大的表，可能稍大一点。视口上方和下方的所有内容都由一个大的

或拉伸到剩余行或视口中最顶端行之前的行的高度的任何内容来处理

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

---

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

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

1。减少页面回流次数

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

JQuery允许您创建如下所示的DOM片段：

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

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

2。减少处理程序的数量

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

例如：

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

将只创建一个处理程序来处理所有td click事件

---

同时执行这两项操作，您将看到显著的性能改进。

尝试延迟加载或按需加载数据。查看一些代码肯定会有所帮助，但我猜，由于DOM操作太多，一些旧浏览器将无法处理它，无论您尝试了什么技巧，都无法使DOM变小（正如巴迪尔建议的）有趣的提议，你能发布一个活生生的例子吗？

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

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