概要

Webサイト，Webアプリケーションをより高速にチューニングするための解説書です。リッチなWebサイト，Webアプリケーションの増加はとどまるところを知らず，これらの高速化の需要はますます高まってきています。本書では高速化という課題に対し，きちんと対処できる知識と実力を身に付けます。基礎となるブラウザのレンダリングから，個別の問題に対する対応例，今後を見据えた設計の基礎などその場しのぎではない本質的な高速化を学びます。

こんな方におすすめ

• Webサイトを高速化してPV増などに結び付けたい人
• Webアプリケーションを高速化してユーザーの満足度を上げたい人
• Webフロントエンドのチューニングを基礎から知りたい人

目次

1.　ウェブパフォーマンスとは何か

• 1-1.　パフォーマンスを定義する
• 1-2.　パフォーマンスの重要性
• 1-3.　新たに重要になった描画パフォーマンス
• 1-4.　ハイブリッドアプリの存在
• 1-5.　パフォーマンスチューニングの第一歩
• 1-6.　本書の概要

2.　ブラウザのレンダリングの仕組み

• 2-1.　なぜ仕組みから学ぶのか
• 2-2.　対象とするレンダリングエンジン
• 2-3.　ブラウザのレンダリングの流れ
• 2-4.　リソース読み込み - Loading
• 2-5.　JavaScript実行 - Scripting
• 2-6.　レイアウトツリー構築 - Rendering
• 2-7.　レンダリング結果の描画 - Painting
• 2-8.　再レンダリング

3.　チューニングの基礎

• 3-1.　闇雲なチューニングの害
• 3-2.　推測するな，計測せよ
• 3-3.　目指すべき指標を設定する
• 3-4.　計測する手段
• 3-5.　Chrome DevToolsなど開発者向けツールによる計測
• 3-6.　JavaScriptによる計測
• 3-7.　パフォーマンス診断ツールを用いる
• 3-8.　パフォーマンスの継続的監視

4.　リソース読み込みのチューニング

• 4-1.　リソース読み込みの流れ
• 4-2.　HTML/CSS/JavaScriptを最小化する
• 4-3.　適切な画像形式を選択する
• 4-4.　画像ファイルを最適化する
• 4-5.　CSSのimportを避ける
• 4-6.　JavaScriptの同期的な読み込みを避ける
• 4-7.　JavaScriptを非同期で読み込む
• 4-8.　デバイスピクセル比ごとに読み込む画像を切り替える
• 4-9.　CSSのメディアクエリを適切に指定する
• 4-10. CSSスプライトを使って複数の画像をまとめる
• 4-11. リソースを事前読み込みしておく
• 4-12. Gzip圧縮を有効にする
• 4-13. CDNを用いてリソースを配信する
• 4-14. ドメインシャーディング
• 4-15. リダイレクトしない
• 4-16. ブラウザのキャッシュを活用する
• 4-17. Service Workerの利用
• 4-18. HTTP/2の利用

5.　JavaScript実行のチューニング

• 5-1.　JavaScriptの実行モデル
• 5-2.　JavaScriptのボトルネックを特定する
• 5-3.　GCを避ける
• 5-4.　メモリリークを防ぐ
• 5-5.　WeakMapとWeakSet
• 5-6.　Web Workersの利用
• 5-7.　asm.jsによるJavaScript高速化
• 5-8.　SIMD.jsの利用
• 5-9.　高頻度で発火するイベントの抑制
• 5-10. モバイル端末でのclickイベントの遅延をなくす
• 5-11. Passive Event Listenerでスクロールのパフォーマンスを改善する
• 5-12. setImmediate()の非同期実行
• 5-13. アイドル時処理を使う
• 5-14. ページ表示状態を確認する
• 5-15. 無駄なForced Synchronous Layoutを減らす
• 5-16. DocumentFragmentの追加
• 5-17. Intersection Observerで効率的に交差を検知する
• 5-18. canvas要素の2D Contextアニメーション
• 5-19. requestAnimationFrame()を活用する
• 5-20. JavaScriptからCSS Transitionを用いる
• 5-21. WebGL

6.　レイアウトツリー構築のチューニング

• 6-1.　レイアウトツリー構築の流れ
• 6-2.　レイアウトツリー構築におけるパフォーマンスの計測
• 6-3.　高速なCSSセレクタの記述
• 6-4.　BEMを用いる
• 6-5.　CSSセレクタのマッチング処理を避ける
• 6-6.　レイアウトを高速化する
• 6-7.　レイアウトを避ける
• 6-8.　DOMツリーから切り離して処理する
• 6-9.　レイアウトを減らす非表示
• 6-10. img要素のサイズを固定する

7.　レンダリング結果の描画のチューニング

• 7-1.　レンダリング結果の描画の流れ
• 7-2.　再描画
• 7-3.　CSSプロパティの変更が何を引き起こすのか？
• 7-4.　レイヤーの生成条件
• 7-5.　描画のオーバーヘッドを解析する
• 7-6.　GPUによって合成されるレイヤー
• 7-7.　translateZハック

8.　高度なチューニング

• 8-1.　大量のDOM要素をあつかうバーチャルレンダリング
• 8-2.　なめらかなアニメーション
• 8-3.　will-changeCSSプロパティによる最適化
• 8-4.　CSS Containmentで再レンダリングを最適化する

9.　認知的チューニング

• 9-1.　インジケータを用いる
• 9-2.　インターフェイスプレビューを用いる
• 9-3.　処理が終わったように振る舞う
• 9-4.　無限スクロールを用いる
• 9-5.　投機的なリソースの先読み

Appendix. SVGのパフォーマンス特性

• A-1.　アニメーションの方法について
• A-2.　JavaScriptでアニメーションを行う

サポート

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

P.43 Display Listの説明の文章

P.117のコード例最終行

document.getElementsByTagName('header')[0].appendChild(link);

document.getElementsByTagName('head')[0].appendChild(link);

P.184，P.185のコード例

if (running) {...

if (!running){...