console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

DevTools State of the Union @jQuery UK 2015の要点まとめ

安定のAddy Osmani先生です。

せっかく見たのでまとめておきます。
動画へのリンクは以下からどうぞ。

jQuery UK Conference - Oxford 2015

スライドもありますが、プレゼンの尺が足りてなくてあまりSyncしないですw

DevTools: State Of The Union 2015 // Speaker Deck

2015 Web Performance Model

Webにおけるスピード(=パフォーマンスの良さ)は、もはや重要な指標のひとつ。
Googleの検索結果でも重視されるほどに。

たいそうなタイトルですが、こういう指標を掲げていくといいのでは?っていう。

  • Load: 1000ms
  • Response: 100ms
  • Animation: 6ms
  • Idle: 50ms

読み込んで利用できるようになるまで1秒で!
ユーザーのインプットに対しては0.1秒以内に反応!
アニメーションは60fpsで!
次のインプットの待機状態までに0.05秒しかかけない!

詳細はこっちのドキュメントを。

This is Success: Why 1000/100/6/50ms? - Google ドキュメント

うう・・・辛い・・が、そういう時代なのか。

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されたかわかって

などなど便利そう。

おわりに

なんか間違ってたら教えてください!