jQuery / JavaScript速度...我真的需要在意吗？

Question

我看到了很多帖子比较各种选择器查询和DOM遍历方法的速度。当然，在有数百或数千个元素和O^n操作的情况下，速度很重要，但在99%的情况下，当Jquery对用户操作做出DOM操作（或动画效果或制作吐司）时，速度真的很重要吗？

几乎所有JQuery操作都比与服务器进行往返更快，这是不是事实？

设计超级优化的服务器端代码是有意义的。并且明智地在javascript中分配内存并清理内存，以使用户的浏览器不像Flash circa v5一样运行。我认为除非在测试期间某些东西明显减慢了页面，否则浪费时间优化JQuery / Javascript的速度是没有意义的。

请问是否应该关心JQuery的速度，为什么？

编辑

我的语气确实有点抱怨，但并不是要争辩。有一些资源可以了解如何在需要优化时进行优化，更好的提问方式可能是：

如果JavaScript / jQuery不够优化，会有什么影响？如果我没有注意到它，我是否需要担心？

接受的答案： 阅读回答后，我认为这个问题的最佳答案取决于您的项目和团队规模。在程序员没有完全了解用户将看到的页面的情况下，例如团队中： - 程序员负责页面上的各个功能 - 程序员独立开发和单元测试 - 存在专门定制的前端API或其他可能影响实际响应时间的代码

那么更加小心和“过度优化”是有意义的。这在有专业的前端设计师专门负责的情况下是可行的。

在较小的项目中，例如我目前的两人团队： - 缺乏专业化 - 需要高程序员产出 - 整个前端的集中责任由一个人承担

所有这些都将优化放在优先级列表的下面。@Anurag的答案帮助我找到了问题的核心并做出了最好的决定。

- RSG

Answer 1

实际上，优化任何东西过早都没有意义，不仅仅是jQuery。

花费时间和精力添加这些微小的优化可能并不值得收益。如果某些东西明显很慢，那么深入研究问题，否则专注于设计应用程序。

创建良好的应用程序并不容易，尝试过早进行优化通常会导致复杂且难以维护的设计和架构。

- Anurag

Answer 2

我本来想投票关闭这个问题，因为它是主观和争议性的，但我想这与争论无关。

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

我必须承认，ECMA-/Javascript解释器在过去几年里确实有了很大的改进，因此整体的Javascript性能也得到了提高。然而，在浏览器环境中，Javascript仍然不太快。特别是涉及DOM操作时，它实际上非常慢（或者说：它可能非常慢）。

有许多关于这个主题的好书，其中一本我强烈推荐的是Nicholas C. Zakas的《高性能Javascript》。

我们应该优化我们的代码的原因有：

• 并不是所有用户都使用尖端浏览器，我们应该保证使用旧版和慢速浏览器的用户也有良好的用户体验
• Javascript总体而言仍有限制。这意味着内存使用和执行时间也受到限制
• Javascript和浏览器UI线程不能并行执行。这意味着慢速的Javascript会严重影响用户体验
• 这毕竟是一个好习惯！如果你习惯编写最佳代码，那么每次都会这样做，我认为这是非常好的事情

即使使用高度抽象的框架如jQuery，你仍然可以轻易地做出糟糕的事情。举个例子，一个简单的查询语句就像：

$('body > *')

在IT技术领域，通常很慢的是代码执行速度。问题是，即使这种情况下也不会明显减慢程序运行速度，但是如果你没有意识到这一点，并且在编写代码时没有进行优化，最终会累积影响。

- jAndy

Answer 3

如果你的代码运行缓慢，jQuery 不太可能是瓶颈。它在执行任务时非常快速。更有可能的问题是算法的效率不高。

- Matt Howell

Answer 4

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

也就是说，性能应该成为您应用程序的一个具体要求，并且与任何应用程序一样，在缺乏性能影响某些要求之前，您不应花费太多时间担心性能。当然，我并不是说在有简单线性替代方案的情况下使用 O(n^3) 算法，但瓶颈可能出现在许多地方，您选择的 JavaScript 库只是其中之一。

- maerics

Answer 5

jQuery可以帮助您专注于开发，而不是花费数小时来修复跨浏览器不兼容性。速度不是问题，至少对于肉眼来说不是。这归结于您的代码编写和优化方式。这并不意味着您将停止使用javaScript，但对于像ajax请求这样的任务，使用jQuery可以让生活变得更加容易，而无需担心跨浏览器不兼容性。

更新 请参阅下面的评论。 这是我用来测试javascript的for与jQuery的$.each函数的工具。在本地，jQuery比javascript快4毫秒。 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');

- Hussein

---

在 UI 的上下文中，2 毫秒和 160 毫秒响应时间的差异在我看来是可以忽略不计的。这是用 JSLitmus 完成的吗？ - RSG

@RSG，你说得对，只有在出现问题时才应该进行优化。然而，160毫秒的响应时间已经达到了人类感知的范围。如果你的用户界面至少需要160毫秒的响应时间，那么你需要考虑优化或提供“正在处理”反馈给用户。 - johnhunter

我发布的图形结果是不正确的。我使用console.time来遍历循环，我的语法影响了结果。我更新了我的帖子，请参见上面用于测试的代码。再次尝试后，它显示jQuery的$.each比JavaScript本地的for更快。 - Hussein