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

Question

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

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

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

Answer 1

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

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

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

不该做什么:

http://jsfiddle.net/skylar/arkxp/4/

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

这是错误的:

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

你应该做什么:

http://jsfiddle.net/skylar/arkxp/5/

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

这是正确的:

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

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

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

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

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