這兩種方法哪個更有效？

Question

我在使用 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);

Answer 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>

重要的是要考慮像這樣的微優化是否重要，或者更易讀的代碼是否重要（我強烈支持更易讀的代碼——在這種情況下，我認為方法 2 恰好更具可讀性/傳統）。

Answer 2

方法 2 使用了 jQuery 鏈接的概念，因此它比這里解釋的要快得多

主要原因是通過 jQuery 訪問 DOM 元素總是有點慢，因此與其每次都訪問它們，不如在單次選擇（鏈接）時應用所有方法

Answer 3

方法 2 會更有效，因為方法 1 重復選擇'.progress-bar' 。

正如AnotherDev在評論中發布的鏈接所示，這兩個選擇在功能上是等效的：

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

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

. . . 並且就性能而言應該非常相似（當然，這取決於 HTML 的結構和內容）。

會減慢方法 1 的是您同時選擇$('.progress-bar')和$('.progress-bar > .sr-only') ，而方法 2 重用現有的$('.progress-bar')結果作為查找'.sr-only'子對象的基礎，而不必'.sr-only'查找”它。

Answer 4

方法 2 會更有效，但差異很小，您可能不會注意到任何差異。 我會把它留給你自己的個人喜好