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

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

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

f:id:hitode909:20171104013643g:plain
f:id:hitode909:20171104013708g:plain

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

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

挙動を観察していると，prerender効いてない気がする．
f:id:hitode909:20171104021922p:plain

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

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

お金大好き

「お金大好き」と書かれたTシャツを着て帰宅したら、妻に「その格好で会社行ったの・・・？」と怪訝な顔をされました
— 冒険野郎 (@tkzwtks) November 2, 2017

srcを一瞬別の画像にしてすぐにもとの画像に戻すとGIFを最初から再生できると教えてもらって，へえと思ったので実験．

ページ内に同じURLのGIFが表示されているときは最初に戻らないようだった．URLの末尾に?1とか?2とかダミーのパラメータをつけてURLを変えると回避できるけど，その枚数分ロードされるので通信量は上がってしまう．

モテるためのさしすせそ
「流石です」
「死ね」
「すごい」
「戦争するぞ」
「そうだね」
— 趣味はマリンスポーツです (@hitode909) 2017年10月27日