Javascriptのフレームワーク、ライブラリが数多く存在する昨今、どのような記述をすれば最速でスクリプトを実行できるのかという問題は、WEB制作においてSEO対策でページスピード改善を行っているWEBマーケター・フロントエンドエンジニアの永遠の課題として挙げられます。
そこで今回は、Chromeなどの各ブラウザを使ったJavascriptのベンチマーク手法についてご紹介します。
①まずはいつものようにF12でデベロッパーツールを開きます。
②Consoleタブを開く
デベロッパーツールのConsoleタブを開き、Javascriptを実行できるようにします。ブラウザ上で直接コマンドを打ち込んで実行速度をはかる準備をします。
③timeとtimeEnd
ChromeやFirefoxをはじめとする様々なブラウザに標準で用意されているconsoleオブジェクトの「time」と「timeEnd」メソッドを使用します。
以下にtestというidが付与されたDOM要素を取得するといった単純なコードの実行速度を比較する場合の実際のコードの例をあげます。
・jQueryの場合
console.time('jQuery');
jQuery('#test');
console.timeEnd('jQuery');・ネイティブの場合
console.time('querySelector');
document.querySelector('#test');
console.timeEnd('querySelector');以下が実際にConsoleタブで実行した結果です。
結果を見てみると、やはりjQueryと比較するとネイティブJavascriptのほうが実行速度が速いといった結果になりました。
Witten by Masa
情報工学系学部卒のエンジニアです。メインはフロントエンドですが、そのほかにもPython,PHP,GAS,など色んな言語、開発、データ分析、マーケティングなど手広くやってます。