Question

我有一个代码块通常可以正常工作，除非文件中有大块数据然后我得到标题上提到的错误。

我将点击事件附加到每个元素，就像你在注释行上看到的一样，但后来我改变了所有的生活，因为它虽然它更有效。尽管速度有所提高，但在呈现整个页面之前，仍会提出两次警告，要求我停止脚本。

我想知道是否有任何可能的方法可以改善以下代码块（脚本）的性能，因此当发送到此特定页面的大量日期时，警报消息不会出现。

注意：由于重复代码，我减少了之前显示的代码量。这两个左边的例子就是给我一个问题的函数。

$(document).ready(function () {

//This adds the click event to toggle the next div right under the divLink clicked. 
//Old Code $(".divLink").click(function () { $(this).next('div').slideToggle(); });
$(".divLink").live('click', function (e) { $(this).next('div').slideToggle(); });


//Distribution 
//$(".Distribution").click(function () { $(this).parents().nextAll(".divDistribution").slideToggle(); });
$(".Distribution").live('click',function (e) { $(this).parents().nextAll(".divDistribution").slideToggle(); });

}）;

任何想法都会非常感激。

提前致谢。

Answer 1

<强>尤里卡!!!

我发现为什么我在代码上使用.live会遇到如此大的性能问题。

我首先遇到了问题中提到的问题，因为我正在使用document.ready + element.click（）来选择元素，因此它导致了大的性能问题，导致警报“停止运行此脚本吗”。

然后我为element.live（'click'，function（）{}）更改了element.click（），因为.live为所有与当前选择器匹配的元素附加了一个处理程序，因此它应该很多更快，但事实并非如此。

使用.live 导致性能问题的原因是我在document.ready（）中使用.live离开了语句。因此，它正在等待呈现页面以将处理程序附加到所有元素的偶数。

解决方案将.live从document.ready（）中删除，不需要。

结果无论文档有多大，页面的页面呈现现在都在变亮。

Answer 2

欢迎来到IE的世界。

Internet Explorer中的Javascript引擎因严重缺乏性能而臭名昭着。

你可以在几乎每个论坛上找到很多喘气和喘气。

MS已经引入了这个警告 - 告诉用户“页面上有一个缓慢运行的脚本”（恕我直言），因为他们很尴尬，它的功能有多么糟糕，并试图把责任归咎于网站开发人员。值得庆幸的是，讨论对此仍然是老生常谈，因为最终MS已经放弃了，并决定在他们的最新产品中全力以赴。希望这些问题能在短时间内消失。

我知道如果你的工作是内部企业内部网，那并不是一个很好的答案，但在现实世界中，大多数网站都会重定向IE用户并竖起一个标语，说“下载像FF Chrome或Safari这样的现代安全浏览器”这个网站“ - 以避免坏消息。

我认为这是你问题的根源，而不是javascript本身。

Answer 3

现在，你已经说过有很多元素被分配了相同的事件监听器，我可以建议一个解决方法是将单个事件监听器绑定到它们的容器，就像这样（假设你有一个类似的结构）：

<div class="DistributionContainer">
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
        ...
    <div class="divDistribution"><div class="Distribution">Clicky</div></div>
</div>

将Click处理程序绑定到DistributionContainer而不是每个.myElement。

$('.DistributionContainer').click(function(e) {
    if (e.target.className=="Distribution")
        $(e.target).parents().nextAll(".divDistribution").slideToggle();
    }
});

这是300个分发元素的实时示例：http://jsfiddle.net/zCt6X/

Jquery live获取脚本导致Web浏览器在IE中慢慢运行警报

3 个答案: