如何优化jQuery性能

时间:2015-06-05 17:41:58

标签: javascript jquery performance minify

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

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

如果是这样,是否有一个特殊的缩小器将表现不佳的jQuery符号转换为速度更快的jQuery符号?

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

2 个答案:

答案 0 :(得分:3)

优化未编写的代码是一种很好的腰部时间。

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

保持正确的观点非常重要,瓶颈性能提升1%,对于轻微遍历的代码,性能提升超过100%。

有人说......

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

  • 使用原生javascript进行dom互动:

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

  • 支持ID而不是类

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

  • 使用类时,请为其提供上下文

    防止jQuery使用选择器遍历整个DOM。为$('.class')换出$('.class', '#class-container')将极大地帮助提升效果。

  • 重用选择器

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

  • 请勿使用.Each

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

答案 1 :(得分:1)

我会让你决定jQuery是否比原始JavaScript看起来更丑陋。我的观点是jQuery不那么冗长,我更喜欢它。

现在表现。 jQuery并不像原始JavaScript那样高效,而且下面的链接会清楚地显示出来。除非您正在处理使用千元元素选择和jQuery函数的页面,否则我建议转向原始JavaScript。

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

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