DevTools State of the Union @jQuery UK 2015の要点まとめ
安定のAddy Osmani先生です。
せっかく見たのでまとめておきます。
動画へのリンクは以下からどうぞ。
スライドもありますが、プレゼンの尺が足りてなくてあまりSyncしないですｗ
2015 Web Performance Model
Webにおけるスピード(=パフォーマンスの良さ)は、もはや重要な指標のひとつ。
Googleの検索結果でも重視されるほどに。
たいそうなタイトルですが、こういう指標を掲げていくといいのでは？っていう。
- Load: 1000ms
- Response: 100ms
- Animation: 6ms
- Idle: 50ms
読み込んで利用できるようになるまで1秒で！
ユーザーのインプットに対しては0.1秒以内に反応！
アニメーションは60fpsで！
次のインプットの待機状態までに0.05秒しかかけない！
詳細はこっちのドキュメントを。
うう・・・辛い・・が、そういう時代なのか。
DevToolsの新機能: Networkパネル編
タイムラインで、何にどれだけ時間がかかったがわかるように
DNSルックアップが遅いのか、サーバーのレスポンスが遅いのか、TTFBに時間がかかってるのか..etc
Waterfallチャート？っていうんかなアレ。
表示できるものが増えた
Initiatorでiframeなどによるリクエストも拾えるようになって、表示はOtherってでます。
HTTP2/SPDYなど、プロトコルの種別もわかるように！
フィルタの充実
- method:GET とか
- domain:example.com とか
- mime-type:image/gif とか
- -.js ってすれば除外できたりとか
Preserve Log機能
これも前からあった気がするけど・・。
ページ遷移するとリフレッシュされてた内容を、消さないようにできるやつです。
これでページ遷移の差分がとれるようになりますね。
Deviceのエミュレートだけでなく、Networkもエミュレートできるように
これも前からな気がする・・。
3Gだとどんな動きするのかが見えたりして中々おもろいです。
画像依存しまくったサイトだと、真っ白なまましばらく待たないといけなくて、これはヤバいって危機感が。
パフォーマンスに関するケーススタディ
DevToolsチームがWikipediaを斬る！
Don't advertise .show() on the front page · Issue #88 · jquery/jquery.com
きっかけはコレ。
こないだざわついてたやつですね。
長いので要点だけ置くと・・。
- NetworkパネルでCausesとJS Profilerにチェックいれてプロファイリングするのオススメ
- このコードでRecalc/ForceLayoutされるNodeの数とかわかる
- どのタイミングでどれだけスタックが貯まってて
- どれにどんだけ時間がかかってるとかわかる
- ちなみにWikipediaのエディターは、ロードに20秒以上かかってる
- :hiddenなんて激重セレクタをぽんぽん使わない
- children()とかのメソッドも、注意して使うべし
- show()/hide()も実はいろいろやってるって知ってた？
- html()とかもう言うまでもないよね！
- jQuery使うなとは言わんが目的とあわせて考えて使えよ！
まあ個人的には何を今さら・・またこの話か・・な内容ですけど、
それでもまだこういうのが蔓延してるってことなんですかね。
DevToolsの新機能: そのほか編
Color Picker
ElementパネルでCSSの色をいじれるアレ、ページ内限定ですがDigitalColor Meterなことができるように！
Capture Details: Paint
プロファイルするときにPaintにチェックいれておくと、
Layerパネルで見れるアレが各タイミングごとに追えるように！
ただこの機能、激重いので普通にChrome落ちたりするんですよね！！
Web Animation playback
Elementパネルの要素のスタイルの右上に再生ボタンみたいなのがあると思うんですが、アレです。
CSSアニメーションの一時停止、スロー再生ができます。
Animation Inspector
これは新機能らしく知らなかったです。
ページ内で起こってるアニメーションを抽出して表示してくれるぽい。
便利っぽい！
Cubic Bezier Function Editor
この機能、地味にほしかったんですよね！
cubic-bezier.comみたいな感じで、
CSSアニメーションのTiming Functionを、普通のプロパティみたくGUIでリアルタイムに変更できるように！
Script Blackboxing
debuggerとか貼ってアレコレ追ってる内に、気付けばBackboneやらjQueryやらにたどり着いてて・・。
何回抜けれどもアプリのコードに帰りつけない！！って経験ありますよね？
あれがなくなります！
"このライブラリはBlackboxとする"みたいな指定をすることで、そもそもスキップしてくれるようになります。
これ素晴らしいですねー。
V8 Proactive Compilation
- DevToolsでコード書くと、実行するまでもなく構文エラーとか表示してくれたり
- undefined is not a functionじゃなくて、なんて関数を呼ぼうとしたのか表示してくれるようになったり
- 複数行まとめて編集できるようになったり
なんやか色々アップデートされる模様。
Promise Inspector
Canaryではちょっと前から使えますね、コレ。
- Promiseが今どれだけあって
- どうつながってて
- それぞれどうなってて
- どこでresolve/rejectされたかわかって
などなど便利そう。
おわりに
なんか間違ってたら教えてください！
