jQueryのSelectorについてちょっと調べた - その1

どうも、和田です!

今回はJavaScript, 特にjQueryについてです。

IntelliJ IDEAでjQueryを書いているとたまに

Inefficient jQuery usage

Inefficient jQuery usageと表示されることがあります。

ざっくり言うと「これ効率悪いから、ID部分とクラスセレクタ部分を分割しようぜ」ということらしいのだけれども、ホントかな?

というわけで以下のコートでざっくり調べてみました。

<!DOCTYPE html>  
<html>  
  <head>
    <title>Sample</title>
  </head>
  <body>
    <div id="div-id">
      <span class="span-class1">hogehoge</span>
      <span class="span-class1">fugafuga</span>
      <span class="span-class2">piyopiyo</span>
      <span class="span-class2">foo</span>
      <span class="span-class3">bar</span>
      <span class="span-class3">foobar</span>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
    'use strict';
    function sameSelector() {
      console.time('Include same selector');
      for (let i = 0; i < 100000; i++) $('#div-id .span-class3');
      console.timeEnd('Include same selector');
    }
    function useFine() {
      console.time('Use find');
      for (let i = 0; i < 100000; i++) $('#div-id').find('.span-class3');
      console.timeEnd('Use find');
    }
    </script>
  </body>
</html>  

結果は、

Include same selector: 640.185ms  
Use find: 569.863ms  

おー、ほんとだ。

ちなみに生のJavaScriptのdocument.querySelectorAll()はどうなんでしょう?

以下のコードを実行してみます。

function querySelector() {  
  console.time('Query Selector');
  for (let i = 0; i < 100000; i++) document.querySelectorAll('#div-id .span-class3');
  console.timeEnd('Query Selector');
}
function getElements() {  
  console.time('Get elements');
  for (let i = 0; i < 100000; i++) document.getElementById('div-id').getElementsByClassName('span-class3');
  console.timeEnd('Get elements');
}
Query Selector: 98.683ms  
Get elements: 12.100ms  

やっぱり早いなぁ。


だけど、なぜこんなにも差がつくのか…。は次回以降にしたいと思います。