Javascript jQuery执行缓慢的常见原因以及如何优化代码？

可能的重复项：

你好,

这可能是一个模糊的或一般性的问题，但我认为它可以作为其他jqueryer的一个很好的资源

我对jQuery运行缓慢的常见原因以及如何优化这些情况感兴趣

我们的页面上有大量jQuery/JavaScript执行操作。。。大量的非元素会影响性能

您知道jQuery有哪些明显的性能缺陷？jqueryer可以做哪些常规优化来压缩脚本的最后一点性能

例如：开发人员可以使用选择器访问比其他方式慢的元素

---

谢谢

通常，您能做的最大一件事就是改进DOM选择器，以限制执行操作时的查询/遍历量。我建议用谷歌搜索“改进jquery性能”，搜索大量关于这个主题的博客文章，因为这个问题很模糊。下面是我在编写jquery代码时最常想到的两点：

---

最明显的性能瓶颈是无缓存查询：

$('.selector').hide();

// and later
$('.selector').css("height", "23px");

// and even later still
$('.selector').attr("src", "http://blah.com");

这是一个非常原始的示例，但同时匹配许多元素和循环可能会大大降低性能，特别是在不支持

querySelectorAll

的浏览器上，或者在使用浏览器不支持的复杂选择器的浏览器上（因此需要使用Sizzle来执行所有DOM迭代）。将匹配的集合存储在变量中是明智之举：

var $sel = $(".selector");
$sel.hide();

// and later
$sel.css("height", "23px");

// and even later still
$sel.attr("src", "http://blah.com");

---

jQuery性能是Javascript性能的同义词。有很多关于这方面的文章。查看一些提示

Nicolas Zakas（Yahoo！前端工程师，Javascript性能书籍的作者）在这方面也有一些很好的幻灯片

以下是一些重要提示：

• 限制DOM操作和DOM 解析-可以时按ID解析 因为它是最快的。解析 上课要慢得多
• 限制在循环中执行的操作
• 检查变量范围和闭包以及 使用局部变量
• 检查您的数据访问方法-it 最好从对象访问数据 文本或局部变量
• 地产在一个区域内的深度越深 对象，则访问所需的时间越长

---

在某些情况下，过度使用jQuery本身可能会导致性能降低。例如，

$（'#selector'）.html（）

比

document.getElementById（'selector'）.innerHTML=
不缓存查询

我经常看到这样的事情（夸张到无法说明问题）：


将事件绑定到表中的所有行…当表有1000多行时

这闻起来很难闻：

$("table tr").click(function(){}).hover(function(){},function(){});

或者更糟（循环中的函数声明[是，
each（）
是一个循环]：

相反，您可以：

$("table").delegate("click","tr",function(){}); //etc

jQuery性能通常取决于选择器性能。以下是我向我目前工作的团队提供的指导方针：


缓存选择器
尝试使用Id而不是类，例如
$（“#myDiv”）
使用元素类型限定类，例如
$（'div.content'）

2019年编辑：

现代浏览器公开了一个非常高效的getElementsByCassName（）方法，该方法返回具有给定类的元素。如图所示

因此，在现代浏览器中，
$（'.content'）
比
$（'div.content'）


为选择器提供一个作用域，尤其是嵌套在另一个选择器中时，例如
$（'div.content'，this）

使用选定元素的链接，例如
$（'div.content'）.css（'display'，'block'）.show（）


还有一些非基于选择器的优化，例如


升级至jQuery的最新版本！每个版本似乎都带来了更多的性能增强
确保您正在使用缩小的
jQuery的版本
缩小您自己的jQuery代码（是最好的imho）
当心写得不好的第三方插件
将jQuery脚本标记（包括jQuery）移到页面底部-这样可以加快页面加载时间
了解静态绑定事件和实时事件之间的区别（使用or函数）
在访问DOM时，请尝试将所有代码分组到一个insert中，而不是大量的小附录

另外，一定要了解javascript性能优化，因为这两件事密切相关，可能会产生巨大的影响。
argh我在搜索时没有看到这些。是的，但是我们很懒，而且“getElementById”很难键入-pOh，没有争论。我到处使用
$（）.html（）
。但是当jQuery插件fullcalendar从一个小小的html（）调用切换到一个.innerHTML集时，性能肯定提高了，我没有抱怨！“使用元素类型限定类，例如
$（'div.content'）
”在现代浏览器中，
$（'div.content'）
实际上比
$（'div.content'）
快得多。例如：
$（'.content'）-925600次/s
vs
$（'div.content'）-548302次/s~40.76%
$("table tr").each(function(){
    $(this).click(function(){});
    $(this).hover(function(){},function(){});
});

$("table").delegate("click","tr",function(){}); //etc

$('.content')        // 925,600 ops/s ±0.9%


$('div.content')     // 548,302 ops/s ±1.2% --- 40.76% slower