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

【问题标题】：jquery DOM manipulation very slow in IE8 especially addClass and removeClassjquery DOM 操作在 IE8 中非常慢，尤其是 addClass 和 removeClass
【发布时间】：2010-11-19 19:36:25
【问题描述】：

我面临一个非常奇怪的问题。我的 html 中有选项卡和子选项卡，当我单击选项卡/子选项卡时，“activeContent”类被放置在上面。如果我单击另一个选项卡/子选项卡，则“activeContent”类将从前一个选项卡/子选项卡中删除并放置在当前选项卡上。当我继续单击多个选项卡/子选项卡时，这种情况可以正常工作。但是在 IE8 中它非常慢。特别是当我点击后退按钮时，前一个子选项卡的内容已加载，但活动子选项卡需要大量时间来更改其类。它的效果是，虽然其他选项卡的内容如果活动子选项卡仍然是前一个选项卡。

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

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

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

setTimeout(fuunction(){

//load ajax content
}, 800);

即便如此，选项卡/子选项卡也需要花费大量时间来更改其类别。

这是 IE8 还是我可能需要优化我的代码。我不确定。在包括 IE6 在内的所有其他浏览器中一切正常。是不是和IE8的后退键有关系？

【问题讨论】：

您最好优化该代码，因为在 IE8 中通过 jQuery 添加/删除类不会很慢。

标签： javascript jquery internet-explorer-8 add

【解决方案1】：

当您点击返回按钮时，您是否调用了此代码？后退按钮很可能导致页面刷新，您正在等待整个页面重新加载。 IE8 可能只是让这种行为更加明显，因为它处理页面内容缓存的方式略有不同。

【讨论】：

是的，当我点击后退按钮时，我正在调用此代码。选项卡/子选项卡内容通过 Ajax 加载。因此，当我点击后退按钮时，页面不会刷新，而是根据哈希值更改页面的状态。这很奇怪，因为当我单击选项卡和子选项卡时我使用相同的代码，虽然我看到更改类时略有延迟，但它不是很明显，但是当我向后/向前时，我检查哈希并运行相同用于切换我在单击时使用的选项卡和子选项卡类的代码，然后根据 url 加载 ajax 内容

【解决方案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 更新的点击事件。

【讨论】：

"...IE 取消默认操作需要花费大量时间" - 你能证明吗？
当我在我们的 qa 服务器上测试同样的东西时，它工作正常..但是在我的本地机器和我们的开发机器上，IE8 的行为非常奇怪..我只是很困惑
@galambalazs。是的。我可以。但我不会为了这样做而将我的代码恢复到慢版本。

【解决方案3】：

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

【讨论】：

“重置”IE8 是什么意思？关闭并重新打开它？清除缓存？作为接受的答案，如果你能更好地描述你所做的事情，这将更有用。
其实我收回我的答案，因为如果浏览器模式：IE8 和文档模式：IE8 问题仍然存在，但如果浏览器模式 IE8 文档模式 IE7 则不会。我将发布 URL 以显示问题

【解决方案4】：

我也遇到了这个问题，原来是因为我忘记了click() 事件中的return false;。（我想e.preventDefault() 也可以。）

我一直在为我的标签使用类似<a href="#"> 的链接，因为它并没有真正导航到任何地方，但 IE 似乎正在“尝试”导航并花时间这样做，因此返回 false 会阻止导航真实的。（这可能是一个最佳实践，让我放入“真实”链接以回退到这可能也是一个最佳实践。）

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

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

【讨论】：