最新ニュース、芸能、ネットの話題をまとめ読み

 

JavaScriptパフォーマーはじめの一歩「User Timing API」

  • このエントリーをはてなブックマークに追加
家庭内そうめん総消費量(DSS)が高いフロントエンドエンジニア、ザワです。「パフォーマンス最適化」というキーワードを耳にすることが多くなってきた昨今、フロントエンドエンジニアの方々は処理を書けるだけではなく、パフォーマーとしての役割も気にせざるを得なくなってきました。

今回は、そんなパフォーマーの入り口として、JavaScriptの処理時間を計ってみよう、まずは気にしてみることから始めよう、そんな回です。

では、早速始めましょう。Let’s do it!

※細かい仕様等は最後に紹介している参考URLから確認してみてください。

基本事項

User Timing APIとは
JSの処理時間を計測するために有用なAPIです。

使う場面

「とりあえず処理書いたけど、すっごい重いなー。でもどこが重いのやら?」とか、「最近覚えた新しい構文で処理を書き換えてみたけど、実際どのくらい処理時間変わるのかなー」とか気になったときに使います。

メリット

Chrome DevToolsのパフォーマンスパネルで、確認したい処理のタイミングと時間を視覚的にわかりやすく確認できる。
大きなディスプレイに写していると周りに尊敬の念を抱かれる。きっと。

使い方

今回使用するメソッドは2つだけ!
performance.mark()
performance.measure()

performance.mark()

performance.mark('mark-1’);
計測したい地点に、任意の名前でラベリングをしていくイメージです。後述の例でイメージが把握できればと思います。

performance.measure()

performance.mark('mark-1');
//計測したい処理
document.querySelector('.example');
performance.mark('mark-2');
performance.measure('measure-1', 'mark-1', 'mark-2');
performance.mark()で指定した2つのmark間の経過時間を、measureメソッドを使うことでDevToolsのUserTimingという項目で確認できます。

試してみる

下記手順で確認できます。

ChromeでDevToolsを開く
Performanceパネルを開く
記録ボタンを押して記録を始める
Code Penの「Run Pen」をクリック
しばし待つ(5秒くらい)
ストップボタンを押す

すると、下記のように「User Timing」という項目が表示されます。



まずはシンプルにexampleクラスをquerySelectorで取得する処理を10万回繰り返ししてみます。
See the Pen JS profiling by User Timing API by Zawa (@sowork) on CodePen.



performance.measure()で指定しているように、mark-1からmark-2までの経過時間がmeasure-1という名前でDevToolsのperformanceパネルに表示されたのが確認できましたか?

markとmeasureを使うことで何が確認できるかを理解したところで、JavaScript、jQueryでDOMの取得を色々なメソッドで行った処理結果を確認してみましょう。各処理は10万回ずつ繰り返しています。

See the Pen JS profiling for querying DOM by User Timing API by Zawa (@sowork) on CodePen.



document.getElementById()の処理速度が速いことが、結果からわかります。さすがですね。このように、処理にラベリングをすることで視覚的にわかりやすく、かつ、DevToolsを使いこなすパフォーマーの気分になれます。

その他

対応ブラウザ

対応ブラウザはこちらからチェック!
caniuse.com

polyfill

polyfillを使いたい方はこちらをチェック!
User Timing polyfill

参考サイト

User Timing API – Web APIs | MDN
User Timing API: あなたの Web アプリをもっと理解するために – HTML5 Rocks

まとめ

今までは、例えばアニメーションに掛かっている時間がどれくらいかを計測する場合に、console.time()とconsole.timeEnd()を利用して計測していました。単純に処理時間を計測するだけなら十分ですが、Chrome DevToolsで一連の処理の流れの中、視覚的に確認できるのは大きいメリットだと思います。

サイトのパフォーマンスが上がることは、ユーザー、クライアント、エンジニア自身にとってもプラスなはずです。今後もパフォーマーとして、有用なメソッドが見つかり次第、ご紹介していきたいと思います。

良い制作ライフを! Enjoy!

Yomerumoをフォローする

Yomerumoから人気記事をお知らせします!

Twitter

おもしろ最新記事

記事一覧

注目ニュース

> もっと見る


掲載情報の著作権はニュース提供元企業等またはGMOアドマーケティング株式会社に帰属します。記事の無断転用を禁じます。
すべての人にインターネット
関連サービス