訳者まえがき ⅴ |
クレジット ⅸ |
まえがき ⅹⅲ |
1章 Ajaxアプリケーションとパフォーマンス 1 |
Douglas Crockford●Yahoo! |
1.1 トレードオフ 1 |
1.2 最適化の原則 1 |
1.3 Ajax 4 |
1.4 ブラウザ 5 |
1.5 Wow! 5 |
1.6 JavaScript 6 |
1.7 まとめ 6 |
2章 応答性の高いウェブアプリケーション 9 |
Ben Galbraith、Dion Almaer ●Ajaxian.com, Mozilla 11 |
2.1 どれくらい速ければよいのか 12 |
2.2 遅延の測定 14 |
2.2.1 遅延の度合いが悪化するとき 15 |
2.3 スレッド 16 |
2.4 応答性の確保 16 |
2.4.1 Web Workers 17 |
2.4.2 Gears 18 |
2.4.3 タイマー 20 |
2.4.4 メモリ使用が応答時間に及ぼす影響 20 |
2.4.5 仮想メモリ 21 |
2.4.6 メモリ問題のトラブルシューティング 22 |
2.5 まとめ 23 |
3章 初期ロードの分割 23 |
3.1 現状の分析 23 |
3.2 分割による節減効果 24 |
3.3 分割位置の特定 25 |
3.4 未定義シンボルと競合状態 26 |
3.5 ケーススタディ ―Googleカレンダー 27 |
4章 実行をブロックしないスクリプトのロード 29 |
4.1 スクリプトによるブロック 29 |
4.2 スクリプトダウンロードの動作の矯正 31 |
4.2.1 XHR eval 32 |
4.2.2 XHRインジェクション 33 |
4.2.3 iframeスクリプト 33 |
4.2.4 Script DOM要素 34 |
4.2.5 Script Defer 35 |
4.2.6 document.writeによる SCRIPTタグ書き出し 35 |
4.3 ブラウザのビジーインジケータ 35 |
4.4 順序実行の保証 38 |
4.5 結果のまとめ 39 |
4.6 そして勝者は 40 |
5章 非同期のスクリプトの組み合わせ 43 |
5.1 コード例 ―menu.js 44 |
5.2 競合状態 46 |
5.3 非同期ロード時の実行順序維持 47 |
5.3.1 テクニック 1―ハードコーディングコールバック 48 |
5.3.2 テクニック 2―Window Onload 49 |
5.3.3 テクニック 3―タイマー 50 |
5.3.4 テクニック 4―Script Onload 51 |
5.3.5 テクニック 5―SCRIPTタグの分解 52 |
5.4 複数の外部スクリプト 54 |
5.4.1 管理された XHR 55 |
5.4.2 DOM要素と Doc Write 59 |
5.5 汎用的な解決方法 61 |
5.5.1 単一スクリプトの場合 62 |
5.5.2 複数スクリプトの場合 62 |
5.6 非同期ロードの実例 65 |
5.6.1 Google AnalyticsとDojo 65 |
5.6.2 YUI Loaderユーティリティ 68 |
6章 インラインスクリプトの適切な位置 71 |
6.1 インラインスクリプトによるブロック 71 |
6.1.1 インラインスクリプトをページ末尾に移動 72 |
6.1.2 非同期に実行を開始 73 |
6.1.3 Script Deferの利用 74 |
6.2 CSSとJavaScriptの適用順序の維持 75 |
6.3 危険 ―スタイルシートに続くインラインスクリプト 76 |
6.3.1 インラインスクリプトのブロック 76 |
6.3.2 スタイルシートによるブロック 77 |
6.3.3 現実の事例 79 |
7章 効率的な JavaScriptコード 83 |
Nicholas C. Zakas●Yahoo! |
7.1 スコープの管理 83 |
7.1.1 ローカル変数の使用 85 |
7.1.2 スコープチェーンの拡張 84 |
7.2 効率的なデータアクセス 89 |
7.3 フロー制御 92 |
7.3.1 高速な条件文 92 |
7.3.2 高速なループ 97 |
7.4 文字列の最適化 102 |
7.4.1 文字列の連結 102 |
7.4.2 文字列のトリミング 104 |
7.5 長時間実行されるスクリプトは避ける 105 |
7.5.1 タイマーを使って処理を明け渡す 107 |
7.5.2 処理の明け渡しのためのタイマーパターン 109 |
7.6 まとめ 110 |
8章 Comet 113 |
Dylan Schiemann●SitePen |
8.1 Cometの原理 113 |
8.2 トランスポート処理の手法 115 |
8.2.1 ポーリング 115 |
8.2.2 ロングポーリング 116 |
8.2.3 永久フレーム 118 |
8.2.4 XHRストリーミング 119 |
8.2.5 将来のトランスポート処理 121 |
8.3 クロスドメイン 121 |
8.4 Cometを実装した場合のアプリケーションに対する効果 122 |
8.4.1 接続の管理 122 |
8.4.2 パフォーマンスの測定 123 |
8.4.3 プロトコル 123 |
8.5 まとめ 124 |
9章 gzip圧縮再考 125 |
Tony Gentilcore●Google |
9.1 なぜこれが問題か 125 |
9.2 原因 126 |
9.2.1 圧縮の指定 127 |
9.2.2 犯人捜し 127 |
9.2.3 一般に見られるタートルタッピングの例 128 |
9.3 非対応ユーザーの救済方法 128 |
9.3.1 非圧縮時のページサイズを最小化するページ設計 129 |
9.3.2 ユーザーへの周知 133 |
9.3.3 gzipサポートの直接検知 134 |
10章 画像の最適化 137 |
Stoyan Stefanov●Yahoo! |
Nicole Sullivan●CSS Ninja |
10.1 画像最適化を単純にするための 2ステップ 138 |
10.2 画像の形式 138 |
10.2.1 背景知識 139 |
10.2.2 画像ファイル形式の特徴 141 |
10.2.3 PNGの詳細 143 |
10.3 可逆な画像最適化の自動化 145 |
10.3.1 PNGのチャンクの削除 145 |
10.3.2 JPEGのメタデータの削除 147 |
10.3.3 GIFから PNGへの変換 148 |
10.3.4 GIFアニメーションの最適化 148 |
10.3.5 Smush.it 149 |
10.3.6 プログレッシブ JPEGとファイルサイズ 149 |
10.4 透過度 ―AlphaImageLoaderの使用を避ける 150 |
10.4.1 透過度の効果 150 |
10.4.2 AlphaImageLoader 153 |
10.4.3 AlphaImageLoaderの問題点 153 |
10.4.4 プログレッシブエンハンスメント 155 |
10.5 スプライトの最適化 157 |
10.5.1 スーパースプライトとモジュール式スプライト 157 |
10.5.2 高度に最適化された CSSスプライト 158 |
10.6 その他の画像最適化 159 |
10.6.1 画像のサイズを変更しない 159 |
10.6.2 生成した画像の圧縮 159 |
10.6.3 ファビコン 161 |
10.6.4 Appleタッチアイコン 162 |
10.7 まとめ 162 |
11章 主ドメインの細分化 163 |
11.1 クリティカルパス 163 |
11.2 誰が細分化を行うか 165 |
11.3 HTTP/1.0へのダウングレード 167 |
11.4 細分化の実際 170 |
11.4.1 IPアドレスとホスト名 170 |
11.4.2 ドメイン数の問題 170 |
11.4.3 リソースの分散法 171 |
11.4.4 最新のブラウザ 171 |
12章 ドキュメントのフラッシュ 173 |
12.1 先頭のフラッシュ 173 |
12.2 出力のバッファリング 175 |
12.3 チャンク形式エンコーディング 177 |
12.4 フラッシュと gzip 178 |
12.5 その他の介在システム 179 |
12.6 ドメインのブロックとフラッシュ 180 |
12.7 ブラウザ ―最後の障害 181 |
12.8 PHP以外の言語 181 |
12.9 フラッシュに関するチェックリスト 182 |
13章 iframeの取り扱い 185 |
13.1 もっともコストのかかる DOM要素 185 |
13.2 iframeによる onloadイベントのブロック 186 |
13.3 iframeと並列ダウンロード 188 |
13.3.1 iframeより前に置かれたスクリプト 189 |
13.3.2 iframeより前に置かれたスタイルシート 190 |
13.3.3 iframeより後に置かれたスタイルシート 190 |
13.4 ホスト名当たりの接続数 191 |
13.4.1 iframeにおける接続の共有 191 |
13.4.2 複数のタブとウィンドウにわたる接続の共有 192 |
13.5 iframeのコストに関するまとめ 194 |
14章 CSSセレクタの単純化 197 |
14.1 セレクタの種類 198 |
14.1.1 IDセレクタ 199 |
14.1.2 クラスセレクタ 199 |
14.1.3 タイプセレクタ 199 |
14.1.4 隣接兄弟セレクタ 199 |
14.1.5 子供セレクタ 199 |
14.1.6 子孫セレクタ 200 |
14.1.7 ユニバーサルセレクタ 200 |
14.1.8 属性セレクタ 200 |
14.1.9 擬似クラスと擬似要素 201 |
14.2 CSSセレクタを効率的にするためのポイント 201 |
14.2.1 右端が最初 201 |
14.2.2 効率的な CSSセレクタの記述 202 |
14.3 CSSセレクタのパフォーマンス 203 |
14.3.1 複雑なセレクタのパフォーマンスへの影響 203 |
14.3.2 使用を控えるべき CSSセレクタ 206 |
14.3.3 リフロー時間 208 |
14.4 実際のウェブサイトにおける CSSセレクタの働きの測定 209 |
付録A パフォーマンス関連ツール 211 |
A.1 パケットアナライザ 212 |
A.1.1 HttpWatch 212 |
A.1.2 Firebugの[接続]パネル 212 |
A.1.3 AOL Pagetest 214 |
A.1.4 VRTA 214 |
A.1.5 IBM Page Detailer 214 |
A.1.6 Webインスペクタの[リソース]パネル 215 |
A.1.7 Fiddler 215 |
A.1.8 Charles 215 |
A.1.9 Wireshark 215 |
A.2 ウェブ開発ツール 216 |
A.2.1 Firebug 216 |
A.2.2 Webインスペクタ 216 |
A.2.3 IE Developer Toolbar 217 |
A.3 パフォーマンスアナライザ 217 |
A.3.1 YSlow 219 |
A.3.2 AOLPagetest 220 |
A.3.3 VRTA 222 |
A.3.4 neXpert 223 |
A.4 その他のツール 223 |
A.4.1 Hammerhead 223 |
A.4.2 Smush.it 224 |
A.4.3 Cuzillion 224 |
A.4.4 UA ProfilerとBrowserscope 225 |
付録B Yahoo! JAPANが実践する Webの高速化 229 |
岡部和昌、黒田真澄、由衛朋久、高林貴仁、木村尚敬 ●ヤフー株式会社 |
B.1 CSSスプライト ―事例 : Yahoo! JAPANトップページ 229 |
B.1.1 画像フォーマット 229 |
B.1.2 スプライト内画像の並べ方 230 |
B.1.3 スプライト画像の読み込み方法 232 |
B.1.4 CSSスプライトを利用する際の手順 233 |
B.2 画像の軽量化 ―事例 : Yahoo!ニュース 234 |
B.2.1 PNG形式の減色 234 |
B.2.2 JPEG形式の画像 237 |
B.2.3 サーバサイドの画像圧縮 239 |
B.3 FirstByte―事例 : Yahoo! JAPANウェブ検索ページ 240 |
B.3.1 FirstByteの実装例 240 |
B.4 消費リソースの分析 ―事例 : Yahoo!検索のフロントエンド 242 |
B.5 効率的な開発とパフォーマンスを意識した運用 244 |
B.5.1 役割分担 244 |
B.5.2 制作フェーズ 245 |
B.5.3 運用フェーズ 247 |
付録 Cブラウザの最新技術を活用した Webの高速化 249 |
浅井智也 ●一般社団法人 Mozilla Japan |
C.1 プラットフォームとしてのブラウザ 249 |
C.2 JavaScriptエンジンを意識した高速化 251 |
C.2.1 JITコンパイラについて 251 |
C.2.2 関数のインライン展開はほどほどに 252 |
C.2.3 ループ処理となるように記述する 252 |
C.2.4 クロージャの使用は最小限に 253 |
C.2.5 DOMプロパティへのアクセス 253 |
C.2.6 argumentsの使用に注意する 254 |
C.3 ブラウザの処理を意識した高速化 254 |
C.3.1 DOM要素やプロパティのキャッシュ 254 |
C.3.2 ブラウザのリフローを意識する 255 |
C.3.3 Selectors APIを利用する 255 |
C.3.4 ネイティブメソッドを利用する 256 |
C.4 ブラウザの最新機能を活用した高速化 258 |
C.4.1 リンクプリフェッチ 258 |
C.4.2 DNSプリフェッチ 259 |
C.4.3 画像ファイルを減らして高速化する 260 |
C.4.4 WebGL―Webで3次元グラフィックス 264 |
C.5 ユーザー体験を意識した高速化 266 |
C.5.1 HTML5のを使う場合の注意 266 |
C.5.2 ドラッグ&ドロップでファイルアップロード 267 |
付録 D Web高速化に対する Googleのアプローチ 269 |
及川卓也 ●Google |
D.1 Webの高速化 269 |
D.1.1 Google Chromeにおけるブラウザの高速化 270 |
D.2 Web標準採用 /推進による高速化の利点 272 |
D.3 Web SocketsとSPDY 274 |
D.3.1 Web Socketsとは 274 |
D.3.2 Web Socketsの実装状況 277 |
D.3.3 SPDYとは 278 |
D.4 Steve Soudersとの一問一答 281 |
索引 284 |