一般如何优化 jQuery 性能答案

【问题标题】：How To Optimize jQuery Performance in General一般如何优化 jQuery 性能
【发布时间】：2015-06-05 17:41:58
【问题描述】：

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

无论您使用 jQuery 函数还是原始函数，就最终用户体验而言，性能真的很重要吗？ 例如$('#exampleId').hide() vs document.getElementById('exampleId').style.display='none'?

如果是这样，是否有特殊的缩小器可以将性能不佳的 jQuery 符号转换为运行速度更快的符号？

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

【问题讨论】：

"我听说这通常是个坏主意，因为一方面它易于编写、理解和维护，但据说它比“丑陋”的 raw 慢JavaScript 代码。” 您使用的几乎每个库都是如此，而不仅仅是 jQuery。您必须决定什么更重要：从代码处理或开发时间/维护中减少几毫秒。在某些情况下，从 jQuery 切换到纯 javascript 可以显着提高功能速度，但这些通常是边缘情况，随着库的改进变得越来越少。
您不想将其作为答案发布，每个示例都有 1 或 2 个示例吗？我会将其标记为解决方案。

【解决方案1】：

优化尚未编写的代码是节省时间的好方法。

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

保持正确的观点很重要，瓶颈性能提高 1% 比简单遍历代码的性能提高 100% 更有价值。

话虽这么说......

使用原生 javascript 进行 dom 交互：

$(jQuery)[0] 返回本地选择器，允许您在需要时使用本地 dom 交互。强烈建议在循环、事件和其他瓶颈代码中使用它来提高性能。 (example)
偏好 ID 优于类

这是一个给定的。 jQuery 的类对象的性能开销远大于它的 ID 对象开销。
当你使用类时，给它们一个上下文

防止 jQuery 使用选择器遍历整个 DOM。将$('.class') 换成$('.class', '#class-container') 将极大地提高性能。
重用选择器

如果您多次使用它们，请始终将选择器缓存在变量中......并且永远不要在循环中选择元素。
不要使用.Each

这可能很诱人，但任何 for 循环都会快得多。

【讨论】：

【解决方案2】：

我会让你决定 jQuery 看起来是否比原始 JavaScript 更丑。我的看法是 jQuery 不那么冗长，我更喜欢。

现在是性能。 jQuery 的性能不如原始 JavaScript，这是正确的，下面的链接将清楚地显示。除非您正在处理带有和使用数千个元素选择和 jQuery 函数的页面，否则我建议您转向原始 JavaScript。

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

【讨论】：