2017年の本で、パフォーマンスを意識したコードをかけた方が良いと思って、若干古いんだけど良さそうなので読んでみた。
ブラウザがHTMLを取得してからCSSで描画されるまでの流れを説明したり、Chrome Dev Tools の使い方を説明してくれたり、キャッシュの仕組みやパフォーマンス改善方法などが記載されていて良かった。ためになることも多かったけど、ひとまず今までの実装の考え方は特に変えずに、アニメーションをまじめに実装するときやウェブサイトが遅くなったりしたらこの書籍を思い出すくらいで良いかなと思った。
2017年の書籍ということもあり、古い情報も多く3割くらいは読み飛ばした。React を使っていたら自力で DOM を書き換えたりなどは基本発生しないし、asm.js を利用した最適化なども現代では古そう。Chromeでしか実装されていませんみたいなテクニックも記載されてて、それは2023年になってもSafariに実装されてないようだった。
以下メモ
- TSLハンドシェイクはTCP接続の3ウェイハンドシェイクに加えてさらにパケットを最低1往復半やりとりする
- 計測はCIとかで日時でスコアを確認すると良さそう
- 計測便利ツールとして NewRelicBrowser が紹介されていたけど、現代だと Firebase Performance でもいい感じに見れるのだろうか?
- CSSスプライトとかは現代でも使われるのだろうか、使われなさそう
- リンクは
http://example.com/fooへのリクエストに対しhttp://example.com/foo/へリダイレクトすることがあるので最初から/つけた方がいいかも - requestIdleCallback - Web API | MDN 現代でも Safari で使えない
- css セレクタは右から解釈するのでセレクタは単純な方が良い
body > dig.logo { ... }の場合、class に logo が含まれ、その要素が div であり、その親要素が body である、となる
- class属性を変更してアニメーションするのは避けた方が良い
- アニメーションでは transform, opacity を使用するのが良い
DNSの名前解決に時間がかかることがある、みたいなのが書かれてた時にふと「じゃあIPアドレス直書きしたらいいじゃん」って思って ChatGPT に聞いたらちゃんと答えてくれてすごい。
