| 訳者まえがき ⅴ |
| クレジット ⅸ |
| まえがき ⅹⅲ |
| 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 |
図書
