フロントエンド開発Blog

オレには鈍器がある

DOM , JavaScript , cash.js , jQuery , minified.js

いまさらながら、DOM操作系のJavaScriptライブラリを軽く調べてみたのでメモを残します。巷ではDOMは死んだとかVirtualDOMなどなど言われてますが、SPAでもない限りまだまだDOMからの脱却は難しいのが現状だと思います。

というわけでDOM操作系JavaScriptをちょっぴり調べてみました。

選定基準

  • domの取得、prop変更等の操作が可能
  • IE11,Edge, chrome, firefox, safari, android mobile, mobile safariで動作
  • 学習コスト低

候補とメリデメ

機能が多い順。

  • jQuery
    • 利用者が多く、ぐぐれば大抵解決する
    • フロントエンドエンジニアならほとんどの人は経験があるため初期学習コストがほぼ0で導入可
    • プラグインが豊富なため急ぎに開発に向いている
    • Deffered/Promiseが強力 アニメーションチェーンが書きやすくメンテナブル
    • アップデートが活発 jQuery3.0の開発も進んでいる
    • jsファイルサイズがかさむ(85kb, gzipしても30kbほど)
  • minified.js
    • jsファイルサイズが軽い8kb程度
    • jQueryでできること+αの機能搭載 あれがないこれがない、となりにくい
    • minified.jsでぐぐるとjavascriptのミニファイ(gulpとか)に関する記事ばかりでるため検索効率が悪い
    • リリーススパンが1年毎 メンテナンスが遅いため実践投入が怖い
  • cash.js
    • jsファイルサイズが軽い4kb程度
    • jQueryっぽい記法 https://github.com/kenwheeler/cash
    • cash.jsでぐぐるとAJAXのcache対策などが引っかかるため検索効率が悪い
    • AJAXやEVENT、Promise系の機能がない 他のライブラリで補うか、生JSを書く必要がある

パフォーマンスについて

ある程度複雑なHTML構造のページでセレクタ指定でDOM取得を1000万回繰り返す

console.timeで計測。

ただし、ブラウザがフリーズしちゃうかもしれませんので覚悟のあるかただけ開いてください。結果だけ知りたいかたは以下の記事をご覧いただくだけにとどめておいてください。開発者メニューのconsoleを開きながら見ると結果が取得できます。

以下、実行結果まとめ。

ライブラリ#target.target
jQuery6332.040ms18759.403ms
minified13963.333ms80180.134ms
cash7129.291ms21899.798ms

参考までに生JS周りのデータ

参考#target.target
生JS461.692ms661.692ms
生JSで取得してjQueryオブジェクトに変換3511.016ms30620.888ms
  • jQueryは他のDOM系ライブラリと比較しても最速
  • 生JSはやはり早い
    • ID探査の場合は生JSで取得してjQueryオブジェクトに変換したほうが倍早い
    • ただしclassなどで配列として取得したDOMオブジェクトをjQuery変換した場合は倍遅い

ページトップへ

関連ページ

ページトップへ