Jquery / Javascript速度......我应该真的关心吗?

时间:2011-03-02 07:18:34

标签: javascript jquery optimization performance frontend

我已经看到很多帖子比较了各种选择器查询和DOM遍历方法的速度。当然,在具有数百或数千个元素和O ^ n操作的情况下,它很重要,但在99%的Jquery响应用户操作进行DOM操作(或眩晕动画或制作吐司)的情况下,速度确实很重要?

几乎所有JQuery操作都不会比往返服务器更快吗?

设计优化优化的服务器端代码是有意义的。在javascript中负责内存分配和清理是有道理的,因此用户的浏览器不会像Flash大约v5一样运行。在浪费时间优化JQuery / Javascript的速度时,我没有任何意义,除非在测试期间显着减慢页面速度。

有人可以告诉我是否以及为什么我应该开始关注JQuery速度?

修改

我的口气无疑是狡猾的,但并不意味着争论。当您需要here时,有很好的资源如何进行优化,这是一个更好的方式来问我的问题:

  

次优Javascript / Jquery有什么影响?
  如果我没注意到,我应该担心吗?

接受

阅读回复后,我认为这个问题的最佳答案取决于您的项目和团队规模。在程序员没有用户将看到的页面的完整视图的情况下,例如团队

  • 程序员负责页面上的各个功能
  • 程序员独立开发和单元测试
  • 有一个定制的前端API或其他可能影响实际响应时间的代码

然后更谨慎和“过早优化”作为常规是有道理的。如果有专业的,专业的前端设计师不做其他事情,这是可行的。

在较小的项目上,例如我目前的双人团队:

  • 缺乏专业化
  • 需要高级程序员输出
  • 一个人对整个前端的集中责任

优先级列表中的所有推送优化。 @ Anurag的回答帮助我找到了问题的核心并做出了最好的决定。

5 个答案:

答案 0 :(得分:7)

实际上优化任何prematurely都没有意义,而不仅仅是jQuery。

添加这些微优化所花费的时间和精力可能不值得。如果某些事情看起来很慢,那么就深入研究这个问题,但另外要专注于设计好应用程序。

创建好的应用程序并不容易,过早地进行优化通常会导致设计和体系结构复杂且难以维护。

答案 1 :(得分:3)

我实际上想投票决定将这个问题作为主观和议论投票,但我想这不是关于争论的问题。

我们在这里要问的问题是,为什么我们不应该优化代码

我不得不承认,ECMA- / Javascript解释器在过去几年中确实改进了很多,因此整体Javascript性能提升了。但是,浏览器环境中的Javascript仍然不是很快。特别是当谈到 DOM操作时,它实际上非常慢(或者:可以非常慢)。

有很多关于这个主题的好书,我强烈推荐的是Nicholas C. Zakas的高性能Javascript

说明为什么我们应该优化代码的原因是:

  • 并非所有用户都拥有最先进的浏览器,我们应该保证旧浏览器和慢浏览器用户也能拥有良好的用户体验
  • Javascript一般来说,仍有局限性。这意味着内存使用受限以及执行时间
  • Javascript&浏览器UI线程无法并行执行。这意味着慢速的Javascript将会影响用户体验
  • 毕竟这是一个很好的做法!如果您习惯于编写最佳代码,那么每次都会这样做,我认为这是一件非常好的事情。

即使使用像jQuery这样的高度抽象的框架,你也可以轻松地做出糟糕的事情。举个例子,一个简单的查询语句,如

$('body > *')

几乎总是非常缓慢。问题是,即使这个声明也不会明显减慢速度,但是如果你没有意识到这一点并且你没有进行优化就编写了所有代码,那么它最终会加起来。

答案 2 :(得分:2)

如果您的代码很慢,jQuery可能不会成为瓶颈。它的作用很快。

更有可能的是,您的算法将成为问题。

答案 3 :(得分:1)

当它开始变得重要时你应该关心。

也就是说,性能应该是您的应用程序的特定要求,并且与任何应用程序一样,您不应该花费太多时间担心性能,直到缺少性能影响某些要求。当然,当有一个简单的线性替代方法时,我不是说使用O(n^3)算法,但是在很多地方都会出现瓶颈,而你选择的JavaScript库只是其中之一。

答案 4 :(得分:0)

jQuery可以帮助您专注于开发,而不是花费数小时来修复跨浏览器的不兼容性。速度不是问题,至少不是肉眼。这一切都归结为代码的编写和优化方式。这并不意味着你将停止使用javaScript,但对于像ajax请求这样的任务,使用jQuery可以更轻松地分享生活,而不必担心跨浏览器的不兼容性。

UPDATE 阅读以下评论。 这就是我用来测试javascript的for vs jQuery的$.each函数。 jQuery在本地获胜4ms。 jQuery 11ms vs javaScript 14ms

var array = new Array();
for (var i = 0; i < 10000; i++) {
    array[i] = 0;
}

console.time('native');
var l = array.length;
for (var i = 0; i < l; i++) {
    array[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each(array,
function(i) {
    array[i] = i;
});
console.timeEnd('jquery');