javascript - 如何总体优化 jQuery 性能

Question

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

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

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

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

Answer 1

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

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

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

话虽这么说......

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

• 使用原生 JavaScript 进行 dom 交互:

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

• 相比类别更喜欢 ID

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

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

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

• 重用选择器

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

• 不要使用.Each

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