html5j パフォーマンス部 第一回勉強会 行ってきた

「http://www.adventar.org/calendars/617」の6日目

html5j パフォーマンス部 第一回勉強会 : ATND

Session 1. Webパフォーマンス事始め

• アメリカの主要なWEBサイトは1秒切ってるけど日本だと数えるくらいしか早いサイトが無い
• 平均値でパフォーマンスを判断せず、ばらつきをチェックする
• ユーザーそれぞれで環境や状況が異なる為、定時的に測定・監視しませう
• 広告効果測定ビーコンやSNSボタンは遅延の原因になったりする

Session 2. JavaScriptの高速化

• ブラウザ屋はどんなJSを書いて欲しいかを考慮してコーディング
• 最近のJSコンパイラは複数回コンパイルしたりしてる
• Date.now()微妙
• ただし、可読性を落としてまで最速を求める必要は無い

Session 3. ブラウザにやさしいHTML/CSS — 「ブラウザにモテるフロントエンドエンジニアになる」

• 高速化の3原則
  ➡少なくする！（数）軽くする！（量）近くする！（距離）
• display:none; すると Render tree に含まれない
  visibility: hidden; は含まれる
• スクリプトが外部にある場合はリソースを取得されるまで処理は中断したまま
• ただし、可読性大切、メンテナンス ＞ パフォーマンス

速度は大切だけど、読みやすさが第一という感じでした。

ブラウザの進化も早いため、昔は速度遅かった処理も改善されてたりとかあるらしい。

猪狩さんは前に同じ現場で一緒に仕事したことある気がする。