Webフロントエンド ハイパフォーマンス チューニング

書籍の概要

この本の概要

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

こんな方におすすめ

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

この書籍に関連する記事があります！

快適なWebサイトのためにすべきこと
Webサイトを利用していてストレスを感じるのはどのようなときでしょうか。

本書のサンプル

本書の一部ページを，PDFで確認することができます。

目次

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でアニメーションを行う

著者プロフィール

久保田光則（くぼたみつのり）

Aspective LLC代表。福岡市在住。UI/UXデザイナー，ソフトウェアエンジニア。ウェブフロントエンド，ハイブリッドアプリに造詣が深い。優れたデザインとエンジニアリングを両立したソフトウェアプロダクト開発の実現を目指し日々頑張る。著書に『HTML5ハイブリッドアプリ開発[実践]入門（技術評論社，共著）』がある。