IE8中的jquery DOM操作非常慢，尤其是在addClass和removeClass中

Question

我正面临着一个非常奇怪的问题。我的html中有选项卡和子选项卡，当我单击选项卡/子选项卡时，'activeContent‘类就会放在它上面。如果我单击另一个选项卡/子选项卡，'activeContent‘类将从前一个选项卡/子选项卡中移除，并放置在当前选项卡/子选项卡上。虽然当我不断点击多个选项卡/子选项卡时，这种方案可以很好地工作。但在IE8中，速度非常慢。尤其是当我点击back按钮时，上一个子选项卡中的内容会被加载，但active子选项卡要花很多时间才能更改它的类。它的效果是，虽然内容是其他选项卡的内容，但活动子选项卡仍然是前一个选项卡。

我甚至尝试首先更改tab/subtab类，如下所示

$(currentTab.node).removeClass('activeContent');
$(tab.node).addClass('activeContent');

然后使用一个seTimeout，就像上面的代码被执行之后一样。

setTimeout(fuunction(){

//load ajax content
}, 800);

即使这样，标签/子标签也需要花费大量的时间来改变它的类。

这是一个IE8，或者我可能需要优化我的代码。我不确定。在所有其他浏览器中都可以正常工作，包括IE6。是不是跟IE8里的后退按钮有关？

Answer 1

当你点击“后退”按钮时，你会调用这个代码吗？“后退”按钮最有可能导致页面刷新，而您正在等待整个页面重新加载。IE8可能只是让这种行为变得更加明显，因为它处理页面内容缓存的方式略有不同。

Answer 2

我有另一个解决方案给你。这是锚标签上的单击事件吗？我已经注意到，IE需要过多的时间来取消具有href属性的锚点标记上的默认操作。尤其是在IE8中。

下面是我的站点中的一个示例函数：

function SwapLinks() { // This allows our pages to degrade gracefully. But hrefs are slow. So, if JS is enabled remove the href!
$(".playerLink").each(function (index) {
    var link = $(this).attr("href");
    if (link != undefined && link != null && link != "") {
        $(this).removeAttr("href");
        $(this).attr("link", ""); // This little number makes IE6/IE7 happy.
        $(this).attr("link", link);

    }
});

然后在(".playerLink")上添加一个处理Ajax更新的单击事件。

Answer 3

实际上，我的代码没有任何问题。我在朋友的机器上进行了测试，它工作得很好。然后我重置了IE8，一切都开始正常工作。我不确定为什么IE8会有这样的行为。这也发生在早些时候，我不得不重置IE8，因为它无法识别运行在我本地机器上的jboss服务器上的应用程序，而是我必须执行http://167.232.23.12/myapp/mypage.html，然后它将显示所有内容。因此，当我重置浏览器时，我可以通过http://my-pc:8080/运行我的应用程序。