Webフロントエンド ハイパフォーマンス チューニング を読んだ
これ読んだ。 https://www.amazon.co.jp/Web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9-%E3%83%81%E3%83%A5%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0-%E4%B9%85%E4%BF%9D%E7%94%B0-%E5%85%89%E5%89%87-ebook/dp/B0728K5JZV/ref=sr_1_1?s=digital-text&ie=UTF8&qid=1536989264&sr=1-1&keywords=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%80%80%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9www.amazon.co.jp
なんで読んだかって言うと、今働いてるとこの事業目標の一つに「Webページの表示速度向上」ってのがあったので、「もしかしたらwebフロント層で何かできることあるんじゃないか？でも、何やっていいかわかんないし、とりあえず前知識というか基礎知識というか、そういうのが足りないな〜」と思ったのがきっかけだった。
ウェブサービスのパフォーマンスチューニングって言うと、スロークエリを直したり、ビジネスロジックを直したり、nginxとかでアセットファイルとか色々圧縮したり、レンダリングを早くしたり、CDN使ったり、キャッシュにしたり、、、本当に色々な階層で改善案が浮かぶ。この本はサーバーからのレスポンスとかそういうのを早くするというのではなく、ページのレンダリングなどフロントエンド層の改善案に必要な基礎知識をざっと学べるので良かった。
ブラウザの仕組みがだいたい分かる
恥ずかしながら、ブラウザとかどういった仕組みで動いてて、どうやってWeb ページを表示してるのかよく知らなかった。。。
このブラウザの仕組から学べたので、「リソースを読み込むところが悪いのか？」「レンダリングするときにCSSとかJSが止めてて遅くなってるのか？」とかボトルネックがどこなのか計測して調べやする知識をざっとゲットできた気がする。
ブラウザは
- Loading（読み込み）
- Scripting（JS実行）
- Rendering（ツリー構築）
- Paiting（描画）
という流れ。最初のLoadingの章では、TLSハンドシェイクとかDNSの話もでて、どうやってブラウザが通信を確立してリソースを読み込むのかというネットワークプロトコルの話も交えた話が詳しく書いてあってよかった。チューニングのChrome Dev Toolでの見方とボトルネックの見つけ方も書かれていてわかりやすい。
あとは「非同期でjs読み込むの良さそう！」「DNSプリフェッチとかで事前処理しとく！」「事前にリソース取っておく！」...etc 、フロントエンドでの速度改善に役立ちそうなワードや情報をゲットできて、今後の実践する上で足がかりになる知識を大まか網羅できた気がする。 （８章あたりからはCSSアニメーションとかユーザー認知をあげるインジゲータとかの話だったので、まあ実践するときに見ようと思って、さーっと読み飛ばした。）
推測するな、計測せよ
まあ、そうですよね、、、はい。ほんと計測大事。この本で伝えたかったことが、この名言に集約されてると思う。
次は。。。
Rendering（ツリー構築）、Paiting（描画）のチューニングとなるとCSSとかアニメーションとか、普段自分が触る機会が少ない領域の話が多い印象だったので、実践するとしたらLoading、Scripting段階のチューニングを先に実践していくのが良さそうと思っている。やっていき!!!1
次は、この２冊を読んでみようかと思っている。多分、だいたい同じことが書かれてるのではないかと思うが。
