『Webフロントエンドハイパフォーマンスチューニング』
https://gyazo.com/7ce40c97e85a6fb6e216d21dd76297e3
関連サイト
1. ウェブパフォーマンスとは何か
概要
2. ブラウザのレンダリングの仕組み
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-18. canvas要素の2D Contextアニメーション
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でアニメーションを行う