チョッパヤ本を読んだ

普段あまりこういう本は買わないのだけれども、友人達が書いていたので購入してみた。特に献本などもないのでどうでもいいかと思ってたんだけど、あとで印税貢献分としてコーヒー一杯奢れと著者両人にたかるネタとして良さそうなので買いました。

内容はGoogleの出しているWeb Fundamentalsのうち、パフォーマンスに関連するセクションを捕捉・再構成したような感じ。

巷では玄人向けという評価もあるけれど、それは本のターゲットの説明として大雑把にすぎると思う。一読者たる私の感じたターゲットは、

Chromeのdeveloper toolsのperformance profilerの使い方がよくわからない
Webサイトの動作が遅くて困っている・困っていないが予防のための知識が欲しい
- サーバー側の負荷には余裕があるのでクライアントサイドが原因だと思っている
- どこが原因なのかわからないので、まずクライアント側から調べていきたい
「Webフロントエンド」に関した（限った）パフォーマンス戦術の頻出パターンが知りたい
- 余談ですが私は「Webフロントエンド」という呼称が大嫌いです
Webサイト構築・運用におけるパフォーマンスについての考え方を知りたい

あたりの人向けの本だと思った。基本的にはWebクライアントサイド慣れしてない人向けの本だと思うし、ビギナー向けの本だとも思う。

逆にこの本に書かれていない内容としては

とか。

具体的に感じたこと

Webサイトのパフォーマンスに関する概論的なお話。パフォーマンスやる意味とかを偉い人に説明するのに使うと便利とか、どういう技術的な指標を用いるかという話
npmとかNode.jsの使い方に関しては第1章に入れなくてもいいと思った。この本を読むような人種でnpmの使い方がわからない人種はあまりいないだろうし、想定するにしても「はじめに」の直後とかでよかったんじゃないかなあ。

ここら辺まではWebサイト構築に携わるエンジニアなら誰でも大雑把には知っておきたいところ。細かい設定の話とか覚えなくていいから。
ネットワーク処理周りの概論と具体的な調査方法、と言いつつもだいたいwebページがロードされるまでの話と、どういう指標があるのかについて
クリティカルレンダリングパス周りについては、ここら辺も読んでおくといいと思います
- Caching doesn't improve mobile web performance (much) , USENIX ATC 16

ここら辺から「Webフロントエンド」っぽくなってくる
ちなみにpainting時のrasterization周りはoff main threadになりつつあるので、メインスレッド（JSスレッド）の邪魔はしにくい処理系も出てきています（Display Listの構築処理は残っているので、そこのコストが消えているわけではない）
- Gecko: OMTP
- Blink: Slimming Paintを経た結果、compositor thread上でDisplay Listのrasterizationをするようになっていた...はず（main threadは止めないと思っているが、自信はない）
- WebKit: よくわからない
- EdgeHTML: https://blogs.windows.com/msedgedev/2017/08/17/making-web-smoother-independent-rendering/
GPUの場合では、なぜテクスチャ転送のコストが発生するのかという原理的な話（コンピュータアーキテクチャ）については、個人的には解説があったほうがすんなりのみ込みやすくなると思うけれども、ターゲットを考えると省いて正解だとも思います。

1本のメインスレッド（JSスレッド）のイベントループの中で、如何に不要な処理を間引きつつやるかという話。GUI プログラマーっぽい話。
私見として、メモリリーク周りに関しては、ページ中のオブジェクトのライフサイクルを常に意識して適切にデストラクトして参照をnull埋めなどしてリークしにくい（GCにオブジェクトが回収されやすい）コードを普段から書いた上での、デバッグテクニックとして捉えるべきだと思う。

特にエモい感情がわかなかったので....