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中删除。完成所有操作后，将其注入，只需重新进行一次重新绘制。

一旦你掌握了优化DOM交互的想法，我认为你会在应用中找到很大的改进空间。

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