一般如何优化 jQuery 性能

Question

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

无论您使用 jQuery 函数还是原始函数，对于最终用户体验的性能真的很重要吗？ 例如

$('#exampleId').hide()

vs

document.getElementById('exampleId').style.display='none'

？

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

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

Answer 1

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

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

正确看待事物很重要，瓶颈性能 1% 的改进比轻量遍历的代码上 100% 的性能改进更有价值。

话虽这么说......

这里有一些提高 jQuery 性能的方法

• 使用原生javascript进行dom交互：

  $(jQuery)[0]

  返回原生选择器，允许您在需要时使用原生 dom 交互。强烈建议在循环、事件和其他瓶颈代码中使用它来提高性能。 （示例）

• 比起班级更喜欢ID

  这是一种既定的。 jQuery 的类对象的性能开销远大于其 ID 对象的开销。

• 当你使用类时，给它们一个上下文

防止 jQuery 使用选择器遍历整个 DOM。将

$('.class')

替换为

$('.class', '#class-container')

将极大地提高性能。

• 重用选择器

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

• 请勿使用

  .Each

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

Answer 2

我会让你决定 jQuery 看起来是否比原始 JavaScript 更难看。我的观点是 jQuery 不太冗长，我更喜欢这一点。

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

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

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