hitode909の日記

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

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">

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

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

追記

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

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

追記(2)

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

アニメーションGIFを最初から再生する

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


https://gph.is/18VKkP7

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

近況

  • しばらく天気が悪いこともあって自転車乗ってなかった
  • それとは関係なく体重がちょっと増えていた
  • ちょっと自転車に乗ったくらいでは体重減らないことは分かっていて,パスタ君は毎日すごい距離自転車乗っているけどだんだん大きくなっていっている
  • ところで今使っている体重計の精度が怪しくて計測するたびに3キロくらい上下している