『Webフロントエンド ハイパフォーマンス チューニング』をざっと読んだ

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

が発売されていたので買って読んだ。

この辺のブラウザのパフォーマンスチューニングに関する分野は昨年から今年の春にかけての強い関心事でした*1。

昨年中は主に <canvas>を利用したお絵かきツールの話の作業において非常に知見がたまったので、今年の頭にかけて2つのスライドで知見を共有しました。

1つ目はブラウザをレンダリングエンジンの振る舞いという観点で理解をするというスライド。

知っておきたいブラウザについての基礎入門 // Speaker Deck

2つ目は↑で理解したレンダリングエンジンの振る舞いのフローに対して、どのような検証やアプローチをするとパフォーマンスに影響を与えることが出来るのかということについて書いたやつです。

Webアプリケーションで 60fpsを(極力)目指す // Speaker Deck

この本Webフロントエンド ハイパフォーマンス チューニングを読んだ感想としては、これらのスライドを作る前に是非読みたかったなぁというのが正直な感想。さらに言うと、この本があったら、上の2つのスライドは作ってなかっただろうなと思った。結構スライドに入れたいけど、時間や発表時の対象者などの制約から省いたことが数多く書かれていた。

『Webフロントエンド ハイパフォーマンス チューニング』はブラウザに起きるパフォーマンスに関係するあらゆ出来事が網羅されていた。序盤ではネットワークについても書かれていたし、後半では大部分を割いてレンダリングの最適化について書かれていた。それぞれについて、計測の方法や指標と出来ること、どのようなアプローチが取れるのかについて書かれていて、それがブラウザ内部で起きるイベントの順番に書かれていて、それぞれのチャプター冒頭部分に、今はブラウザのどの処理についての記述なのかが図で描かれていたので分かりやすくて良いなと思った。

内容としては、突飛なテクニックを使うということはほとんどなくて、とにかくブラウザのパフォーマンスチューニングについて勘所と基本的なアプローチをまずは抑えるという感じだった。なので、アプローチに関しても飛び道具的なハッキーなコードを書くとかはなくて、CSSの機能をどう使うかとか、JSでのDOM操作の工夫とかが書かれてる感じ。

個人的には上記のスライドを作る時に色々関係資料を読んだので、それらと結構重複していて、あまり目新しい知見というのはなかったが、知識の再確認をざっと出来たのは良かった。

ここからはダメ出しのような感じになってしまうのだけど、内容は終始Googleの関連トークや文書などで語られているチューニングの話がベースになっている感じで、紹介されているツールもGoogle ChromeのDevToolsだけだったので、もう少し踏み込んで、実際のアプリケーションでどのような問題とアプローチとして活かされているかとかも知りたいと思った。

何より本文内で紹介されているチューニング手法について、その手法が直感的に有効そうなのは理解できるが、コラムで否定されている『小さな最適化』になりそうなテクニックもいくつかあって、それぞれのアプローチがどのような成果をもたらすのかについて具体的な計測であるとか実例であるとかが盛り込まれていると、より紹介されているテクニックを適用する際の指標が増えて良さそうだと思った。これに関しては「何事も『推測するな、計測せよ』」なのだという著者からの勝手なメッセージなのだと信じることにした。（結局どのアプローチが良いかというのはケースに依存するのであるケースではピーキーに効くものがある似たようなケースでも大した差が出ないこともある。それに対して無闇矢鱈と指標を与えるのは良くないので、本書はそういうのを止めて、事象の理解と取りうるアプローチのパターンを読者に提供するのだと思うと腑に落ちた）

という感じでした。ブラウザのレンダリングと具体的なアプローチについて、ブラウザの処理の流れやイベントに沿って、検証方法や改善方法をシンプルにまとまっている本はなかなか巡り会えずに春前くらいに色んな資料を横断した記憶があるので、個人的には感激しました。紹介したスライドを見て、へーと思ったり興味を持った人は読んで損はないと思います。日本語でここまで凝縮されていてページ数も300ページくらいなので、ざっと読むとか出来るのでおすすめです。

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

azuさんがTwitterで#Webフロントエンドハイパフォーマンスチューニングで関連情報を書かれていたので、こちらも読むと良いと思います。

*1:今の主な関心事はブラウザ拡張の相互互換性問題に移り変わっている季節