如何优化jQuery的性能

How To Optimize jQuery Performance in General

本文关键字：jQuery 性能优化何优化更新时间：2023-09-26

我们经常使用jQuery函数。现在，就性能而言，我听说这通常是一个坏主意，因为一方面，它易于编写，理解和维护，但据说它比"丑陋"的原始JavaScript代码要慢。

在最终用户体验方面，使用jQuery函数还是原始函数真的重要吗?例如:$('#exampleId').hide() vs document.getElementById('exampleId').style.display='none' ?

如果是这样，是否有一个特殊的minifier将性能差的jQuery符号转换为运行更快的符号?

或者这些只是在大多数情况下可以完全忽略的微优化?

jQuery可能很慢，但它减少了javascript语法中的大量膨胀。

正确看待问题是很重要的，瓶颈性能的1%改进比轻微遍历代码的100%性能改进更有价值。

也就是说....

下面是一些提高jQuery性能的方法

使用原生javascript进行dom交互:
$(jQuery)[0]返回本机选择器，允许您在需要的地方使用本机dom交互。强烈建议在循环、事件和其他瓶颈代码中使用这种方法来提高性能。(例子)
偏好id优于类
这个是已知的。jQuery的类对象的性能开销比它的ID对象开销要大得多。
当你使用类时，给它们一个上下文
防止jQuery使用选择器遍历整个DOM。将$('.class')替换为$('.class', '#class-container')将极大地提高性能。
重用选择器
总是缓存你的选择器在变量中，如果你使用它们不止一次.....永远不要在循环中选择元素。
不要用.Each
这可能很诱人，但任何for循环都会大大加快。

我将让您决定是否jQuery看起来比原始JavaScript更丑。我的观点是jQuery不那么冗长，这是我更喜欢的。

现在是性能。jQuery的性能不如原始JavaScript，这是真的，下面的链接将清楚地显示。除非你在使用成千上万的元素选择和jQuery函数的页面上工作，否则我建议你转向原始JavaScript。

http://jsperf.com/jquery-hide-vs-javascript-hide

TL;DR -通常可以忽略的微优化