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

Webフロントエンドハイパフォーマンスチューニングを読んだ．最近フロントエンドでがんばるアプリケーションを作ってるので参考になった．ネットワークまわりからブラウザの細かい実装の話まで書かれていて良かった．

• link rel=prerenderで次のページをプリレンダリングできる
  • 次のエピソードに飛ぶとか，コメントページからメインページに飛ぶとか，次に遷移するページが明確なときは有効そう
  • あとからJSで足してもよい
• CSSのマッチ方法，div>div>span とか書くと右から左に順にマッチしていく
  • なので入れ子をやめると速くなる．BEMでCSSを書くとネストせず書くので速い
• デベロッパツールでレンダリングの様子をこまごま見れる
  • ペイントが発生した様子
  • レイヤの様子

ためしに，このブログのaboutページをプリレンダリングしておいたので，下のリンクから遷移するとすばやく遷移できるはず．

<link rel="prerender" href="http://blog.sushi.money/about">

• 趣味はマリンスポーツです - hitode909の日記

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

追記

挙動を観察していると，prerender効いてない気がする．

caniuseをみると，Chrome 49では使えてたけど無効になっている??
http://caniuse.com/#feat=link-rel-prerender

追記(2)

Operaで見ると信じられない速さでaboutページに遷移する様子を観察できた．最高．