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

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

なんとなくだったパフォーマンスのチューニングの知識を勉強したくて「Webフロントエンド ハイパフォーマンス チューニング」を読んでみたのでその書評をしてみます。

Ads

推測するな計測せよ

現在僕の仕事としてはReactを使ったサービスの制作、運用・保守などを行っています。サービスを作ったり運用していると「ここのページ読み込み遅いな」とか「若干、滑らかにアニメーションしていない気がする」とか気付いたりしませんか?

ネットで探せばそれなりに対処法があったりして、なんとなくパフォーマンスがよくなった!よしよし、よかった!
ってなっていたんですけど、これっていいのかな?って思うとこがありました。

もちろん何かしら問題になったことを解決するのは知見が溜まっていいっちゃいいんですけど、なんかこう「こうこうこうゆう理由」で「パフォーマンスが悪い」から「こうゆう対処」をして、「これだけパフォーマンスがよくなった」という具合に出来てなかったんですね。
今思えばろくに計測もせず推測でパフォーマンスが悪いところをなんとなく対処していただけなんですよね。

そもそも基本的にWEBフロントエンドの実装はできるけど、パフォーマンスチューニングの知識があまりなかったです。

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

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

WEBサイトを高速化したいけど、ちゃんとしたパフォーマンスチューニングの知識がないなと思う方にオススメです。WEBフロントの最新事情も盛り込まれていてとても勉強になります。

目次

  1. ウェブパフォーマンスとは何か
  2. ブラウザのレンダリングの仕組み
  3. チューニングの基礎
  4. リソース読み込みのチューニング
  5. JavaScript実行のチューニング
  6. レイアウトツリー構築のチューニング
  7. レンダリング結果の描画のチューニング
  8. 高度なチューニング
  9. 認知的チューニング

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

こんなとこがよかった

  • ブラウザのレンダリングの仕組みが学べる
  • 計測の方法を学べる
  • 状況に応じたチューニングの方法を学べる
  • WEBフロントエンドの最新事情を学べる

序盤で「ブラウザのレンダリングの仕組み」を学ベたことにより後々のチューニングが理解しやすかったです。どこがボトルネックになっているかを計測で調べそれに応じたチューニングを施すのが大事なんですね。

チューニング方法についても基本的なチューニングのCSSスプライト、CDNの使用や、CSS translateZハックなどのちょっと高度なもの、さらにはFacebookなどで使われている読み込み時の待ち画面などの認知的チューニングなどが学べます。

まとめ

かなり読み応えがありなかなかすぐに全てを覚えるのは厳しいけど、会社などに置いておきチューニングする際にすぐに読めるようにしておこうかなと思える一冊。

いいなと思ったらシェアお願いします

同じタグで検索

同じカテゴリーの記事

Ads
ページの先頭へ