Backbone.js 在 IE6 IE7 和 IE8 上的性能答案

【问题标题】：Backbone.js performance on IE6 IE7 and IE8Backbone.js 在 IE6 IE7 和 IE8 上的性能
【发布时间】：2012-05-22 22:18:31
【问题描述】：

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

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

我们是否可以在这些劣质浏览器上缓存输出？

【问题讨论】：

【解决方案1】：

我的猜测是您正在将行一一添加到 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 重绘。 IE（和旧浏览器）将在每次更改时重新绘制。这可能解释了为什么您的现代浏览器尽管有过多的 DOM 交互，但性能更好。

【讨论】：