JavaScript .length 性能

Question

我有一个非常平凡的任务，但我想知道这两种方法的性能有何不同。我正在尝试获取选中的复选框的总数并将其显示给用户:

$(document).on('change', ':checkbox', function() {
    if ( $(this).is(':checked') )
        count++;
    else
        count--;

    $count.html(count);
 });

对比

 $(document).on('change', ':checkbox', function() {
    $count.html($(':checkbox:checked').length);
 });

谢谢!

Answer 1

与所有性能问题一样，如果您真的、真的认为性能差异可能与您的应用程序相关(这似乎不太可能，因为它只是响应用户事件)，那么您必须测量、测量、测量才能看到这实际上更快。

一般来说，运行几行额外的 Javascript 代码比搜索整个 DOM 来查找内容要快得多，因此基于该逻辑的猜测是 $(':checkbox:checked') 会比 if ( $(this).is(':checked') ) 慢。但 .is() 也不是一个特别快的操作。

所以，这是一个用 jsperf 构建的测试用例:http://jsperf.com/checkbox-count我在测试页面中放入了大量的 HTML。如果您要搜索的 DOM 较小，您的情况可能会有所不同。

if ($(this).is(':checked')) 选项在所有现代浏览器中速度快了 500 倍以上。这是图形比较。 $(':checkbox:checked').length 速度慢得多，以至于蓝色条甚至没有显示在图表中。

以下是每个浏览器中“每秒操作数”的实际数字:

Chrome .is(...): 934,632
Chrome $(...).length:498

IE 11 .is(...): 209,333
IE 11 $(...).length 268

Firefox .is(...): 1,227,712
火狐 $(...).length: 251

正如您所看到的，这是一个非常惊人的差异。 DOM 搜索速度很慢。但是，它可能仍然不会在您展示的代码示例中产生任何实际差异，因为这只是响应用户事件的几毫秒差异。最慢的操作仍然小于5ms，因此这可能在简单的事件处理程序中无法注意到。

但是，如果这是作为较长计算的一部分在循环中反复评估的内容的一部分，那么在这种情况下它可能会产生很大的不同。