こんにちは，太田です。今回はtimelineパネルとAuditsパネルの使い方について解説していきます。

Timelineパネル

Timelineパネルはウェブページの読み込みから表示までにかかった処理時間を詳細に解析できるツールです。

クロスブラウザJavaScript入門の第13回で作成したTwitter検索アプリを使って解析してみます。Twitterの検索APIを呼び出して検索結果を表示するシンプルな検索クライアントです。

まずはデベロッパーツールのTimelineパネルを開きます。

左下にある黒丸をクリックすると解析が始まります。F5などでページをリロードし，読み込みが完了したらもう一度ボタンをクリックすると解析が終了します。解析結果は次のとおりです。

まず，大本のHTMLの読み込み，その次にjson2.jsを読み込み，並行してHTMLのパース処理は終わらせ，json2.jsを読み込んだらtwitter_search.jsを読み込み，それも完了したら最終的にレンダリング（paint）を行うという流れになっています。

折りたたまれている部分を展開した場合は次のようになります。

時間が掛かっているのは通信周りであることは一目瞭然となっています。JavaScriptの実行，レンダリングなどはほぼ一瞬で完了しています。

ではこの結果を元に，すこし最適化を行ってみましょう。このアプリにおいて，json2.jsはページの読み込み直後に必要というわけではないので，json2.jsの読み込みを非同期にしてみます。

<script src="json2.js"></script>

上記のようにしていた部分を，次のように置き換えます（JavaScriptの非同期読み込みについてはクロスブラウザJavaScript入門の第8回で解説していますので，よろしければご参照ください）。

<script>
(function(){
  var s = document.createElement('script');
  s.src = 'json2.js';
  document.getElementsByTagName('head')[0].appendChild(s);
})();
</script>

そして，再びTimelineパネルで解析してみます。

json2.jsとtwitter_search.jsが並列に読み込まれていることが確認できます。

なお，今回は解説のためjson2.jsを非同期にしてみましたが，この程度の時間は最適化が必要なレベルではありません。また，今度の変更でjson2.jsのAPIを読み込み時に使用してしまった場合，読み込みのタイミングによってエラーになったりならなかったりするといった厄介な事態にも繋がりかねません。最適化は諸刃の剣であることは忘れないようにしましょう。

さて，もうひとつ検索実行時のタイムラインも見てみましょう。

こちらは読み込みが完全に非同期化されていることが確認できます。こちらは最適化の余地はほとんどないでしょう。