在 IE7 中修改 'className' 属性非常慢答案

【问题标题】：Modifying the 'className' property is extremely slow in IE7在 IE7 中修改 'className' 属性非常慢
【发布时间】：2010-02-22 15:48:34
【问题描述】：

在我的网站上，我动态修改了 DIV 的 javascript 'className' 属性。然而，这是一个极其昂贵的操作，因为 DIV 包含很多子节点。有时需要长达 1.5 秒。

有没有办法加快这个操作？比如，隐藏内容，执行操作，然后再次显示内容？

更新：

一些附加信息。

实际代码：

$("#myDiv").tabs();

它位于 .ready() 处理程序中。看 http://jqueryui.com/demos/tabs/

这是昂贵的电话。我进一步追踪到 className 属性，它消耗了所有的处理时间。

DIV 包含一个大的共享点数据网格，请参阅 http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.renderashtml.aspx 代码在Sharepoint上运行，在WinXP + IE7上测试。

所以我想知道我们是否可以在操作 DOM 或类似的东西时禁用布局刷新。有什么技巧吗？

【问题讨论】：

【解决方案1】：

尝试确保影响类名正在更改的容器中包含的元素的 CSS 选择器仅在真正需要时才使用容器类。显然，当您使用容器类驱动布局时，可能会受到很多影响，但有时很容易放入div.whatever td.currency，而您真正需要的是td.currency（只是一个虚构的例子）。

IE 布局引擎在某些方面确实非常快，但我发现大量使用这种布局技术（我相信，这通常是一种非常好的做法）会给浏览器带来很多负担。值得庆幸的是，IE8 在这类事情上要好得多。

【讨论】：

【解决方案2】：

通过在更改 className 属性之前删除两个选项卡以从其父级切换选项卡，我在切换选项卡时实现了约 50% 的性能提升。实现细节见https://developers.google.com/speed/articles/javascript-dom

【讨论】：