什么是 faster/more 高效 - $(".selector").height() vs $(".selector").eq(0).height()

Question

我有 20 x element.selector 相同 (100px) 高度，我需要得到他们的高度 (100px，而不是 2000px).

什么是 faster/more 有效率的事情？

$(".selector").height()

或

$(".selector").eq(0).height()

Answer 1

我为你比赛。

            run 1           run 2           run 3           run 4
with_eq:    1956.769ms      1875.220ms      1930.814ms      1895.359ms
no_eq:      1851.168ms      1861.596ms      1804.347ms      1829.207ms

而且 不使用 eq(0) 似乎稍微快一些。很明显，因为您在 jquery 对象上保存了另一个函数调用。不调用总是比调用更快。

这是我的测试用例：

// noprotect

console.time('with_eq');
for (var i = 0; i<40000; i++) {
  $(".foo").eq(0).height();
}
console.timeEnd('with_eq');

console.time('no_eq');
for (var i = 0; i<40000; i++) {
  $(".foo").height();
}
console.timeEnd('no_eq');

    .foo { height:100px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>
 <div class="foo">Hi.</div><div class="foo">Hi.</div><div class="foo">Hi.</div>

什么是 faster/more 高效 - $(".selector").height() vs $(".selector").eq(0).height()

What is faster/more efficient - $(".selector").height() vs $(".selector").eq(0).height()

performance

jquery

jquery-selectors