APIを使ってWebアプリケーションの性能を測定するWebアプリを作っていてチューニングしたいんだけど性能測定が難しかった。APIという便利なAPIがあるらしいのでそれを使ってみた。beta※サポート外のブラウザで動作させたい場合のPolyfill(機能差分を埋めてくれるライブラリ)が公開されているのでそれを使うと良いそう。アプリをもっと理解するために■仕込み性能測定に使う主なメソッドは以下だけ。window.performance.mark(...)測定したいポイントにこのマークを設置する。window.performance.mark('load_file_start');...window.performance.mark('analyze_file_start');...window.performance.mark('load_file_end');...window.performance.mark('analyze_file_end')のようにmarkをどんどん設置していく。■測定マーク間の時間を測定したい場合にmeasureメソッドを使う。'load_file_end');第一引数は測定値に対する名前なので分かりやすい名前を付ける。第二引数は測定の開始点のマーク名。第三引数は終点のマーク名。window.performance.getEntriesByName('load_file');などとする。ByNameの他にByTypeなどもある。APIが便利なのは事前に幾つかマークが仕込まれていること。HTMLの読込を開始する時は'fetchStart'DOMの読込が完了した時は'domComplete'完全にHTMLの読込・解析が完了した時は'loadEventEnd'など。TimingユーザがJSで仕込める以外の部分にもマークが仕込まれているのが便利。DOMの読込が完了してからHTMLの全ロードが完了するまでの時間を測定したい場合は。'loadEventEnd');とすればマークを何も設置せずに測定できる。