Question

我总是在使用JQuery时注意效率，因为我知道有太多的开销。以下哪两种方法更有效，为什么？有没有办法让它更有效率？

方法1：

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

方法2：

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>

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

Answer 2

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

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

Answer 3

方法2效率更高，因为方法1重复选择let item1:WKPickerItem = WKPickerItem() item1.title = "1" let item2:WKPickerItem = WKPickerItem() item2.title = "2" timePicker.setItems([item1, item2])。

正如评论中发布的'.progress-bar'链接所示，这两个选项在功能上是等效的：

AnotherDev

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

减慢方法1的方法是选择$('.progress-bar > .sr-only'); $('.progress-bar').children('.sr-only'); AND $('.progress-bar')，而方法2则将现有$('.progress-bar > .sr-only')结果重新用作找到$('.progress-bar')孩子的基础，而不是“重新”它。

Answer 4

方法2会更有效但差异会很小，你可能不会注意到任何差异。我会把它留给你个人的优先选择

这两种方法中哪一种更有效？

4 个答案: