DOM取得のパフォーマンス比較

JavaScript DOM

心に宇宙は満ちているでChromeのXPathが遅いあたりが気になって、軽く検証してみました。

Speed Test. links, elements, xpath, querySelector!

  • 単純にリンク要素を取得、走査
  • リンク要素を取得、#を含み、テキスト(手抜きでinnerHTML)が25で終わるリンクを検出

という2つのパターンについて、それぞれ

  • document.links
  • document.getElementsByTagName('a')
  • XPath
  • querySelectorAll

で実行し、パフォーマンスを計測しています。

各ブラウザごとに特徴が出ていて、FirefoxではXPathが複雑になったほうがむしろパフォーマンスがあがっていたり、確かにChromeではXPathのパフォーマンスがいまひとつのようです。

まとめとしては、単純な条件で要素を取得したい場合はgetElements?Byを使用し、条件付で要素を取得したい場合はXPathかquerySelectorAllを使い分けるという当たり前の結果です。
おまけで、getElements?By系が今更になって大幅に最適化されることはあまり期待できないのに対し、XPathやquerySelectorAllはまだまだ最適化される余地があるかもしれないという見方もあります。