futoase

よろしくお願いします。

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

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

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

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

会社に買ってもらったので、読んでみた。

基本的なことから始まり、最後は工夫の面まで続く本

本の内容は基本的な内容から始まる。 ブラウザの挙動、しくみの説明で1章割いているので、 復習になった。

また、レンダリングの仕組みとして、 リソースを取得 -> JavaScriptを実行 -> CSSを解釈 -> ビットマップレベルでレンダリング という手順を踏むのだが、細かくできるだけ最新のWebAPIを用いて 説明がかかれていて、キャッチアップしやすかった。

プロトコルの説明(QUICやHTTP/2)、 Chrome DevToolsでのパフォーマンス関係の 確認をする場合どうすれば見ることができるのか、 という点の説明が書かれていて、普段気にしていなかった CSSレンダリングのパフォーマンスチェックについて 知ることができた。

特に、classの書き方についてどのようにすればパフォーマンスが悪化するか、について 詳しく知れた (classの階層構造はDOM全て舐めてしまうので悪い、など)。

例えば以下の書き方でパフォーマンスに差が出る。

table > tbody > tr > td {
  border-width: 1px;
}

td {
  border-width: 1px;
}

cssは右から評価されるので、"td"がある要素をtable以下から全て探そうとしてしまう。

1度読んで復習して強化できる

BEMとか、GPU処理とかSVGとか基礎的、 すでに利用されている技術について書かれている。 書物の中でコード例が出ているが、 実行をしなかったとしても、読みながら 書かれていることが理解できる程度のコード量に抑えられているので 移動中に読んでも特に困ることはなかった。

Web周りの技術は幅が広く、見えない部分(ネットワークレイテンシの問題とか)が多く、 どうしても思い込みでこうすれば最適みたいな感じになってしまいがちなので、 その意識を正すという意味でも読んでよかった。

Copyright (c) 2013-2017 Keiji Matsuzaki