Webフロントエンドハイパフォーマンスチューニングを読んで
はじめに
2020/09/24に買ったが少しずつ読んでやっと読み終わったので感想を書いておこうかと思います。
ただ書籍第2版発売が2018/04/20で発売から2年ほど時が経っており、またWebフロントエンドの進化スピードは速いため、情報が古いものもあるかもしれません。
ブラウザのレンダリングの仕組みが分かってよかった
まずこれを読んで良かったと思ったのはWebページが表示されるまでにブラウザで何が行われているのかが書かれていた点です。
第二章がまさにブラウザのレンダリングの仕組みを解説しており、この章を読むだけでも買ってよかったと思いました。
この書籍ではWebページを表示するまでのフェーズを大まかにLoading→Scripting→Rendering→Paintingの4つで紹介しています。
このフェーズの流れと各フェーズで行われることを掴んでおくだけでも今後フロントエンド開発をする上でも役立つと思いました。
ちなみに各フェーズで何をするかさらっと書くと以下の通りです。
- Loading: HTML, CSS等のリソース読み込み、パースしてDOMツリー、CSSOMツリーの構築
- Scripting: JSの実行
- Rendering: スタイルの計算（CSSOMツリーからDOMツリーを総当りして適用）、レイアウト（DOM要素の具体的な座標位置、大きさなどの算出）
- Painting: レイアウトで算出したものを実際に描画する
各フェーズでのチューニングテクニックが解説されててよかった
上記それぞれのフェーズでどうしたらパフォーマンスが改善できるか、そのテクニックが解説されていたのもよかったです。
特にLoadingでのチューニングテクニックはHTMLやCSS, JS以外のネットワークが絡む部分で割とフロントエンドエンジニアが意識から外れやすい部分かなと思いますが、ここもしっかり解説されていてよかったです。
例えばLoadingのチューニングの一例としてブラウザキャッシュを解説していましたが、これはWebサーバ側の設定を見直す良い機会になりました。
普段NginxをWebサーバとして使うことが多いのですが、これを読んだ後に調べたところNginxはETagキャッシュをデフォルト有効にしているということを知りました。
一つ思ったのはScriptingのチューニングテクニックで紹介されていたコードがaddEventListenerを使ったJSで書かれているものが多かったですが、僕は普段AngularのようなWebフレームワークを用いて開発を行うためフレームワークに用意されたイベントバインディングを使って書くことが主です。
その点は今回紹介されたチューニングテクニックの適用が難しいものもあるのかなと感じました。
Chrome DevToolsによる計測・解析を紹介しているのがよかった
パフォーマンスチューニングするにもまずは計測が大事です。この書籍ではその点パフォーマンス計測・解析についても紹介していたのはよかったです。（発売が2年ほど前のためもしかするとChromeのアップデートにより情報が古くなっている可能性はあります。）
そして割と色々なメトリクスが取れることを知れました。この辺は実際にWebページを読みながら実勢したいと思います。
最後に
まとめると買ってよかったでした。
