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

著者 : 久保田光則

• 技術評論社 (2017年5月26日発売)

作品紹介・あらすじ

ブラウザのレンダリングのしくみから計測と最適なチューニングまで、速さのための基礎知識と実践技術をあますことなく解説。

感想・レビュー・書評

[横さんの感想 · 2023年8月28日]

本書は、SPA(Single Page Application)などの解説を含めつつ、ウエブパフォーマンスの向上に関しての解説書です。(2018/04)

・ブラウザのレンダリングエンジンの仕組み
・レンダリングの各フェーズごとの考え方
　　フォーマンスチューニング時に必要な考え方
　　パフォーマンス測定法
・チューニングテクニック

■レンダリングの仕組み
①リソースの読み込み Loading
②Javascriptの実行 Scripting
③レイアウト計算 Rendering
④レンダリング結果の描画 Painting

■各フェーズごとに考え方

①リソースの読み込み Loading

・読み込むリソースの大きさと数を減らす
・レンダリングをブロックする読み込みを減らす
・ブラウザとサーバ間の遅延を減らす
・ブラウザのキャッシュを活用する

②Javascriptの実行 Scripting

・Javascriptのボトルネックを特定する
・ガベージコレクションを避ける
・メモリーリークを防ぐ
・未使用のオブジェクトを解放する（WeakMap,WeakSet)
・複数のUIスレッドの衝突を回避する（Web Workers)
・JavaScriptの高速化(asm.js,SIMD.jp)
・高頻度で発火するイベントの抑制
・モバイル端末での、Click イベントの遅延の解消
など

③レイアウト計算 Rendering

・高速ＣＳＳセレクタの記述
・ＣＳＳ設計規約ＢＥＭの活用
・利用していないＣＳＳルールセットを減らす
・レイアウト処理の発生を防ぐ

④レンダリング結果の描画 Painting

・レンダリングの３つの処理　①ペイント、②ライタライズ、③レイヤーの合成
・３つのイベントが不用意に発生しないように考慮する
・描画のオーバーヘッドを解析する
・ＧＰＵによって合成されるレイヤー

■チューニングテクニック

・高度なチューニング

　バーチャルレンダリング
　なめらかなアニメーション
　Will-changeCSS プロパティによる最適化
　CSS Containment　で再レンダリングを最適化する

・認知的チューニング

　ふるまいや、ＵＩを変更することでユーザの体感速度を速くするというチューニング

　インジゲーター
　インタフェースプレビュー
　処理がおわったようにふるまう
　無限スクロール
　投機的なリソースの先読み

Ｃｏｎｔｅｎｔｓ

謝辞
１．　ウェブパフォーマンスとは何か
１－１．　パフォーマンスを定義する
１－２．　パフォーマンスの重要性
１－３．　新たに重要になった描画パフォーマンス
１－４．　ハイブリッドアプリの存在
１－５．　パフォーマンスチューニングの第一歩
１－６．　本書の概要

２．　ブラウザのレンダリングの仕組み
２－１．　なぜ仕組みから学ぶのか
２－２．　対象とするレンダリングエンジン
２－３．　ブラウザのレンダリングの流れ
２－４．　リソース読み込み　－　Ｌｏａｄｉｎｇ
２－５．　ＪａｖａＳｃｒｉｐｔ実行　－　Ｓｃｒｉｐｔｉｎｇ
２－６．　レイアウトツリー構築　－　Ｒｅｎｄｅｒｉｎｇ
２－７．　レンダリング結果の描画　－　Ｐａｉｎｔｉｎｇ
２－８．　再レンダリング

３．　チューニングの基礎
３－１．　闇雲なチューニングの害
３－２．　推測するな，計測せよ
３－３．　目指すべき指標を設定する
３－４．　計測する手段
３－５．　Ｃｈｒｏｍｅ　ＤｅｖＴｏｏｌｓなど開発者向けツールによる計測
３－６．　ＪａｖａＳｃｒｉｐｔによる計測
３－７．　パフォーマンス診断ツールを用いる
３－８．　パフォーマンスの継続的監視

４．　リソース読み込みのチューニング
４－１．　リソース読み込みの流れ
４－２．　ＨＴＭＬ／ＣＳＳ／ＪａｖａＳｃｒｉｐｔを最小化する
４－３．　適切な画像形式を選択する
４－４．　画像ファイルを最適化する
４－５．　ＣＳＳのｉｍｐｏｒｔを避ける
４－６．　ＪａｖａＳｃｒｉｐｔの同期的な読み込みを避ける
４－７．　ＪａｖａＳｃｒｉｐｔを非同期で読み込む
４－８．　デバイスピクセル比ごとに読み込む画像を切り替える
４－９．　ＣＳＳのメディアクエリを適切に指定する
４－１０．　ＣＳＳスプライトを使って複数の画像をまとめる
４－１１．　リソースを事前読み込みしておく
４－１２．　Ｇｚｉｐ圧縮を有効にする
４－１３．　ＣＤＮを用いてリソースを配信する
４－１４．　ドメインシャーディング
４－１５．　リダイレクトしない
４－１６．　ブラウザのキャッシュを活用する
４－１７．　Ｓｅｒｖｉｃｅ　Ｗｏｒｋｅｒの利用
４－１８．　ＨＴＴＰ／２の利用

５．　ＪａｖａＳｃｒｉｐｔ実行のチューニング
５－１．　ＪａｖａＳｃｒｉｐｔの実行モデル
５－２．　ＪａｖａＳｃｒｉｐｔのボトルネックを特定する
５－３．　ＧＣを避ける
５－４．　メモリリークを防ぐ
５－５．　ＷｅａｋＭａｐとＷｅａｋＳｅｔ
５－６．　Ｗｅｂ　Ｗｏｒｋｅｒｓの利用
５－７．　ａｓｍ．ｊｓによるＪａｖａＳｃｒｉｐｔ高速化
５－８．　ＳＩＭＤ．ｊｓの利用
５－９．　高頻度で発火するイベントの抑制
５－１０．　モバイル端末でのｃｌｉｃｋイベントの遅延をなくす
５－１１．　Ｐａｓｓｉｖｅ　Ｅｖｅｎｔ　Ｌｉｓｔｅｎｅｒでスクロールのパフォーマンスを改善する
５－１２．　ｓｅｔＩｍｍｅｄｉａｔｅ（）の非同期実行
５－１３．　アイドル時処理を使う
５－１４．　ページ表示状態を確認する
５－１５．　無駄なＦｏｒｃｅｄ　Ｓｙｎｃｈｒｏｎｏｕｓ　Ｌａｙｏｕｔを減らす
５－１６．　ＤｏｃｕｍｅｎｔＦｒａｇｍｅｎｔの追加
５－１７．　Ｉｎｔｅｒｓｅｃｔｉｏｎ　Ｏｂｓｅｒｖｅｒで効率的に交差を検知する
５－１８．　ｃａｎｖａｓ要素の２Ｄ　Ｃｏｎｔｅｘｔアニメーション
５－１９．　ｒｅｑｕｅｓｔＡｎｉｍａｔｉｏｎＦｒａｍｅ（）を活用する
５－２０．　ＪａｖａＳｃｒｉｐｔからＣＳＳ　Ｔｒａｎｓｉｔｉｏｎを用いる
５－２１．　ＷｅｂＧＬ

６．　レイアウトツリー構築のチューニング
６－１．　レイアウトツリー構築の流れ
６－２．　レイアウトツリー構築におけるパフォーマンスの計測
６－３．　高速なＣＳＳセレクタの記述
６－４．　ＢＥＭを用いる
６－５．　ＣＳＳセレクタのマッチング処理を避ける
６－６．　レイアウトを高速化する
６－７．　レイアウトを避ける
６－８．　ＤＯＭツリーから切り離して処理する
６－９．　レイアウトを減らす非表示
６－１０．　ｉｍｇ要素のサイズを固定する

７．　レンダリング結果の描画のチューニング
７－１．　レンダリング結果の描画の流れ
７－２．　再描画
７－３．　ＣＳＳプロパティの変更が何を引き起こすのか？
７－４．　レイヤーの生成条件
７－５．　描画のオーバーヘッドを解析する
７－６．　ＧＰＵによって合成されるレイヤー
７－７．　ｔｒａｎｓｌａｔｅＺハック

８．　高度なチューニング
８－１．　大量のＤＯＭ要素をあつかうバーチャルレンダリング
８－２．　なめらかなアニメーション
８－３．　ｗｉｌｌ－ｃｈａｎｇｅＣＳＳプロパティによる最適化
８－４．　ＣＳＳ　Ｃｏｎｔａｉｎｍｅｎｔで再レンダリングを最適化する

９．　認知的チューニング
９－１．　インジケータを用いる
９－２．　インターフェイスプレビューを用いる
９－３．　処理が終わったように振る舞う
９－４．　無限スクロールを用いる
９－５．　投機的なリソースの先読み

Ａｐｐｅｎｄｉｘ．　ＳＶＧのパフォーマンス特性
Ａ－１．　アニメーションの方法について
Ａ－２．　ＪａｖａＳｃｒｉｐｔでアニメーションを行う

ISBN：9784774189673
出版社：技術評論社
判型：A5
ページ数：352ページ
定価：2680円（本体）
発行年月日：2017年06月
発売日：2017年06月08日初版第1刷
発売日：2018年04月20日初版第2刷

[fleefloatingplanetさんの感想 · 2020年1月13日]

性能チューニングのためのノウハウもさることながら、ブラウザの挙動の説明が非常にわかりやすかった。また、性能計測のための機能やライブラリの使い方が載っているのも良かった。

[あろ@新潟エンジニアマンさんの感想 · 2023年7月11日]

ブラウザのレンダリングの仕組みの解説が非常に勉強になった。どのフェーズで何がボトルネックとなりそうか？という意識も持ちつつ、なるべく最初からパフォーマンス劣化を生じさせない実装を心がけていきたい。2017年発刊だか今でも参考にできる部分は多いと思う。

[cooboo2011さんの感想 · 2022年4月28日]

フロントエンドのパフォーマンスは何なのか、そしてパフォーマンスを上げるための
手法がまとめられています。2017年出版なので、手法の部分恐らく古くなっているものも多いですが、
ブラウザレンダリングの仕組みなどが細かく書かれていて発見も多く勉強になりました。

[Toshifumi Shichiさんの感想 · 2021年8月14日]

2017/07/13読了

[kdnkさんの感想 · 2019年1月4日]

ただのテクニックだけでなく、ブラウザやレンダリングの仕組みについても書かれていて、なぜそうなるか、なぜそうするとパフォーマンスが上がるのがよくわかった

[ooocamelさんの感想 · 2018年3月26日]

ブラウザからhttpリクエストを出すから、ブラウザがサーバーからリスポンスを描画するまでの流れが理解できる。

キーワード
DOM,レンダリング

[pyoheiさんの感想 · 2017年11月23日]

web技術を少し知っているが、どのようにコードを書けばフロント技術（javascript / cssなど）が最適化されるのか、詳しく知らない人にはぜひおすすめの一冊。

フロントエンドをやっている人は読んで損はないです！

[日本工業大学LCセンター図書館さんの感想 · 2017年10月21日]

↓利用状況はこちらから↓
https://mlib3.nit.ac.jp/webopac/BB00542367

[eielさんの感想 · 2017年7月19日]

webフロントエンドのパフォーマンスについてとても丁寧に書かれていて、必読の本だと思いました。この本に書かれた知識はHTML CSSコーダーをメインにやってる人には難しいかもしれませんが、全てを把握しておく必要はありませんし、知っておいて損はないと思います。