こんにちは、太田です。今回はtimelineパネルとAuditsパネルの使い方について解説していきます。 Timelineパネル Timelineパネルはウェブページの読み込みから表示までにかかった処理時間を詳細に解析できるツールです。 クロスブラウザJavaScript入門の第13回で作成したTwitter検索アプリを使って解析してみます。Twitterの検索APIを呼び出して検索結果を表示するシンプルな検索クライアントです。 まずはデベロッパーツールのTimelineパネルを開きます。 左下にある黒丸をクリックすると解析が始まります。F5などでページをリロードし、読み込みが完了したらもう一度ボタンをクリックすると解析が終了します。解析結果は次のとおりです。 まず、大本のHTMLの読み込み、その次にjson2.jsを読み込み、並行してHTMLのパース処理は終わらせ、json2.jsを読み
![第3回 ウェブサイトの最適化 | gihyo.jp](https://cdn-ak-scissors.b.st-hatena.com/image/square/f07fd3681ae4005b8a56be15f4bc27ca5b0f5b1a/height=288;version=1;width=512/https%3A%2F%2Fgihyo.jp%2Fassets%2Fimages%2FICON%2F2010%2F675_devtools.png)