这两种方法哪一种更有效？答案

【问题标题】：Which of these 2 methods is more efficient?这两种方法哪一种更有效？
【发布时间】：2015-06-13 04:33:39
【问题描述】：

我在使用 JQuery 时总是注意效率，因为我知道有很多开销。以下两种方法中哪一种更有效，为什么？有什么方法可以提高效率吗？

方法一：

var percentString = percentDone.toString() + '%';
$('.progress-bar').css('width', percentDoneString);
$('.progress-bar > .sr-only').text(percentDoneString);

方法二：

var percentString = percentDone.toString() + '%';
$('.progress-bar').css('width', percentDoneString).children('.sr-only').text(percentDoneString);

【问题讨论】：

children vs selector - jQuery的可能重复
jsperf.com/jquery-child-selector-vs-find/3
你在第二种方法中硬编码了 1%

标签： javascript jquery algorithm dom optimization

【解决方案1】：

我的直觉是方法 2 更有效。但是效率提高多少取决于您的 DOM（元素总数以及有多少元素具有 progress-bar 类）。这是你应该测试的东西。这是一个测试它的例子：

http://jsperf.com/jquery-select-twice-versus-children

它表明使用方法 2 比方法 1 具有性能优势，因为方法 2 允许每秒约 18,000 次操作，而方法 2 每秒允许约 17,000 次操作。我的结论是它是如此接近，以至于没关系。但这就是这个非常简单的 DOM：

<div class="progress-bar">
 <div class="sr-only">something</div>
</div>

重要的是要考虑是micro-optimizations like this are important 还是更多readable code is important（我强烈支持更具可读性的代码——在这种情况下，我认为方法2 恰好更具可读性/传统性）。

【讨论】：

【解决方案2】：

方法 2 使用 jQuery 链接的概念，因此速度更快as explained here

主要原因是通过 jQuery 访问 DOM 元素总是有点慢，因此与其每次都访问它们，不如在单个选择（链接）中应用所有方法

【讨论】：

【解决方案3】：

方法 2 会更有效，因为方法 1 是重复选择 '.progress-bar'。

正如AnotherDev 在 cmets 中发布的链接所示，这两个选择在功能上是等效的：

$('.progress-bar > .sr-only');

$('.progress-bar').children('.sr-only');

。 . .并且就性能而言应该非常相似（当然，这取决于 HTML 的结构和内容）。

什么会减慢方法 1 是您同时选择 $('.progress-bar') AND $('.progress-bar > .sr-only')，而方法 2 重用现有的 $('.progress-bar') 结果作为查找 @987654327 的基础@children，而不必“重新找到”它。

【讨论】：

【解决方案4】：

方法 2 会更有效，但差异很小，您可能不会注意到任何差异。我会留给你自己的个人喜好

【讨论】：