internet-explorer - Backbone.js 在 IE6 IE7 和 IE8 上的性能

Question

在大多数版本的 IE 上渲染 Backbone.js 集的大型结果表时，我遇到了性能瓶颈。

其他人是如何解决这个问题的？

无论如何我们可以在这些劣质浏览器上缓存输出吗？

score 22 · Accepted Answer

我的猜测是您正在将行一一添加到 DOM 中。这可能会导致许多浏览器重绘，在行渲染时给您带来迟缓/缓慢的感觉。

提高速度的最简单方法是限制与 DOM 的交互。不要将行一一插入到 DOM 中，而是将它们全部插入。

继续阅读我的意思的一个例子。

不该做什么：

在此示例中，请注意我在添加任何行之前如何将表添加到 DOM。 这很糟糕，因为它会导致浏览器重绘 1000 次！

这是错误的：

this.table = $("<table></table>").appendTo("body");
this.model.each(this.addRow);

在此示例中，我等待将表添加到 DOM，直到生成所有行。这意味着 DOM 只重绘一次，应该比上面的例子快得多。

这是对的：

this.table = $("<table></table>");
this.model.each(this.addRow);
this.table.appendTo("body");

这适用于您与 DOM 的任何交互。你越弄乱它，它就会越慢。事实上，人们常说加快 JS 速度的最快方法是限制与 DOM 的交互

如果您发现自己需要向 DOM 中已经存在的元素添加某些内容，只需在display:none对 DOM 执行操作时将其设置为或暂时将其从 DOM 中删除。完成后，将其注入回去，您将只强制进行一次重绘。

一旦你掌握了优化 DOM 交互的窍门，我认为你会发现你的应用程序有很大的改进空间。

现代浏览器通过缓存更新 DOM 的请求并在“块”中进行更改来限制 DOM 重绘。IE（和旧浏览器）将在每次更改时重新绘制。这可能解释了为什么您的现代浏览器表现更好，尽管 DOM 交互过多。