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

Question

我面临着一个非常奇怪的问题。我的 html 中有选项卡和子选项卡，当我单击选项卡/子选项卡时，会在其上放置“activeContent”类。如果我单击另一个选项卡/子选项卡，“activeContent”类将从前一个选项卡/子选项卡中删除并放置在当前选项卡/子选项卡上。当我不断单击多个选项卡/子选项卡时，这种情况效果很好。但在 IE8 中速度非常慢。特别是当我点击后退按钮时，会加载前一个子选项卡的内容，但活动子选项卡需要花费大量时间来更改其类。其效果是，虽然其他选项卡的内容相同，但活动子选项卡仍然是上一个选项卡。

我什至尝试首先更改选项卡/子选项卡类，例如

$(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://my-pc:8080/myapp/mypage.html 但我必须做 http://167.232.23.12/myapp/mypage.html 然后它会显示所有内容。所以当我重置浏览器时，我可以通过运行我的应用程序
http://my-pc:8080/ 。

Answer 4

我也遇到了这个问题，结果发现这是因为我忘记从 click() 事件中返回 return false; 。 （我想 e.preventDefault() 也会起作用。）

从那时起，我就一直在我的选项卡中使用像 这样的链接它并没有真正导航到任何地方，但 IE 似乎正在“尝试”导航并花费时间来执行此操作，因此返回 false 会阻止真正的导航。 （这可能是最佳实践，让我放入“真实”链接来回退，这可能也是最佳实践。）

当我使用 file:/ 加载页面时，这似乎尤其是一个问题/ 我的开发计算机上的 URL（而不是将其部署到服务器并通过 HTTP 以常规方式访问它）。

（感谢 Jeff Davis 和 kd44，他们的上述回答让我走上了正轨。）