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交互过多.