SlideShare a Scribd company logo
ブラウザの
Performance APIの話
2016年3月25日
川田 寛(ふろしき)
!?
ふろしき
仕事: ピクシブ株式会社
趣味: Performance API
Webパフォーマンスが好きです
The Web Explorer
→ Webパフォーマンス技術の今
Software Design 2015年11月号
→ すいすいわかるHTTP/2
Webパフォーマンスが好きです
The Web Explorer
→ Webパフォーマンス技術の今
この内容の話をします。
今日話すこと
1. Performance Monitoring
2. Network Optimizations
3. Task Optimization
→ パフォーマンス計測用APIの話
→ ネットワーク最適化用APIの話
→ タスク最適化用APIの話
1. Performance Monitoring
パフォーマンス計測用APIの話
Performance Timeline
Webページを遅くする要因を
探したり監視するためのJavaScript API
タイムスタンプを記録して
JavaScriptオブジェクトを返してくれる
画像読込!!
どれぐらい
かかったの?
121
ミリ秒
ササッ
なにが計測できる?
Navigation Timing
Resource Timing
User Timing
Frame Timing
Server Timing
Navigation Timing
Webページの読み込みを開始してから
表示が完了するまでのタイムスタンプを記録
Navigation Timing
Resource Timing
画像/css/jsなどのリソースを
読み込み始めてから完了するまでの
タイムスタンプを記録する
Resource Timing
User Timing
任意のタイミングで
タイムスタンプを記録
processing
mark mark
User Timing
2. Network Optimizations
ネットワーク最適化用APIの話
Network optimizations
Webページ読み込みには
パフォーマンスを低下させる
いろんな問題が隠れている
Network optimizations
どうやってネットワーク最適化できる?
Resource Hints
Preload
Resource Hints
dns-prefetch
Resource Hints
preconnect
Resource Hints
prefetch
Resource Hints
prerender
3. Task Optimization
ネットワーク最適化用APIの話
どんなタスクを制御できる?
requestIdleCallback
requestAnimationFrame
setImmediate
Page Visibility
Web Workers
setTimeout/setInterval
requestIdleCallback
ブラウザは同時に
1つのタスクしか実行できない…
requestIdleCallback
私たちが作ったJSの実行がヘビーだと
ブラウザの描画処理を遅らせてしまう
requestIdleCallback
何もタスクが無いときに
JSを実行させる
requestIdleCallback
requestIdleCallback
実際に使ってみた
requestIdleCallback
requestIdleCallback
最後に
Web-perf周りの仕様の話って、
国内では私ぐらいしか
騒いでいる人がいませんが…
最後に
実は需要があると
信じてる。
最後に
流行らせるためにも…
入門書が必要だ!!
最後に
2016年冬
p社オフィスにて
Performance apIについての
入門みたいなドキュメントが
全世界どこさがしても無いの
ふろしき ひつじさん
俯瞰的に知りたいって人
絶対いると思うの
ひつじさんふろしき
おれはそういう
ドキュメントを書きたい
ひつじさんふろしき
日本語で一回書き起こして
そのあと英語版つくるんだ!!
ひつじさんふろしき
いいね!書こう!
ひつじさんふろしき
それで!!
ひつじさん
ふろしき
わかめさん
日本語版をまず書いてみた
(※同人誌にして冬コミにだしてみた)
脱稿した日
W3CのWebサイトにも
あるドキュメントが追加された
ブラウザのPerformance APIの話
ブラウザのPerformance APIの話
訳:Web Performance Timing API入門
↓
ごめん
無駄足だった ・・・。
ひつじさん
ふろしき わかめさん
無駄足になった私の同人誌、まだ売ってます
https://techbooster.booth.pm/items/178228
→ C90につづく
Thank You!
@_furoshiki

More Related Content

PDF
ウェブパフォーマンスの基礎とこれから
PDF
初心者のためのWeb標準技術
PDF
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
PDF
Spa のための web サーバ構築ノウハウ
PDF
How to develop a huge Single Page Application
PDF
我が家のフロントエンド開発事情
PDF
次世代Web業務アプリケーション
PDF
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
ウェブパフォーマンスの基礎とこれから
初心者のためのWeb標準技術
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Spa のための web サーバ構築ノウハウ
How to develop a huge Single Page Application
我が家のフロントエンド開発事情
次世代Web業務アプリケーション
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12

What's hot (20)

PDF
SPAに必要なJavaScriptFrameWork
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
PDF
Yeomanではじめる爆速webアプリ開発
PDF
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
PDF
SPAを実現するために必要な通信技術
PDF
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
PDF
フロントエンド初学者がSPAに手を出してみた
PDF
モダンWeb開発ワークショップ
PDF
三位一体の自動化で壊せ DevとOpsの壁~アラサーエンジニアの挑戦~
PDF
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
PDF
業務系WebアプリケーションがStrutsから旅立つ日
PDF
20151021 cookpad talk_test_engineer
PDF
20141116 jjug ccc_2014_keynote1_public
PDF
Arachne Unweaved (JP)
PDF
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
PPTX
心・技・態 -LINEにおける改善の真実-
PDF
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
PPTX
20151205フルスクラッチcms作成のノウハウ With Laravel
PDF
Angularモダンweb開発セミナー紹介 20170923
PDF
ほんとうに便利だった業務で使えるJava SE8新機能(JJUG CCC 2015 Spring)
SPAに必要なJavaScriptFrameWork
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Yeomanではじめる爆速webアプリ開発
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
SPAを実現するために必要な通信技術
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
フロントエンド初学者がSPAに手を出してみた
モダンWeb開発ワークショップ
三位一体の自動化で壊せ DevとOpsの壁~アラサーエンジニアの挑戦~
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
業務系WebアプリケーションがStrutsから旅立つ日
20151021 cookpad talk_test_engineer
20141116 jjug ccc_2014_keynote1_public
Arachne Unweaved (JP)
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
心・技・態 -LINEにおける改善の真実-
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
20151205フルスクラッチcms作成のノウハウ With Laravel
Angularモダンweb開発セミナー紹介 20170923
ほんとうに便利だった業務で使えるJava SE8新機能(JJUG CCC 2015 Spring)
Ad

Viewers also liked (20)

PPT
Horarios de #BibliotecaAbierta y #HorarioAmpliado 2017 / Biblioteca UPM
PDF
13 Slack Tips and Use Cases For Sales Teams On Slack
PPTX
Link Building Strategies That Increase Monthly Revenue by $240,740 #EngagePDX
PPTX
How to Create a Growth Framework
PPT
Cancer Care in a Post Truth World
PPTX
Growth Hacking: Offbeat Ways To Grow Your Business
PDF
Quran Chart (Arabic Presentation)
PDF
Content Creation Process
PPTX
The Measure of a Marketer's Worth
PPTX
Squeezing Deep Learning Into Mobile Phones
PPT
色彩センスのいらない配色講座
PPTX
Payments Trends 2017
PDF
Infographic: Medicare Marketing: Direct Mail: Still The #1 Influencer For Tho...
PDF
The Race to 2021: The State of Autonomous Vehicles and a "Who's Who" of Indus...
PDF
The Marketer's Guide To Customer Interviews
PPTX
ELSA France "Teaching is us!"
PDF
Digital in 2017 Global Overview
PDF
Design in Tech Report 2017
PPTX
Culture
PPTX
Aprenentatges per passar del Jo al Nosaltres en un món digitalitzat
Horarios de #BibliotecaAbierta y #HorarioAmpliado 2017 / Biblioteca UPM
13 Slack Tips and Use Cases For Sales Teams On Slack
Link Building Strategies That Increase Monthly Revenue by $240,740 #EngagePDX
How to Create a Growth Framework
Cancer Care in a Post Truth World
Growth Hacking: Offbeat Ways To Grow Your Business
Quran Chart (Arabic Presentation)
Content Creation Process
The Measure of a Marketer's Worth
Squeezing Deep Learning Into Mobile Phones
色彩センスのいらない配色講座
Payments Trends 2017
Infographic: Medicare Marketing: Direct Mail: Still The #1 Influencer For Tho...
The Race to 2021: The State of Autonomous Vehicles and a "Who's Who" of Indus...
The Marketer's Guide To Customer Interviews
ELSA France "Teaching is us!"
Digital in 2017 Global Overview
Design in Tech Report 2017
Culture
Aprenentatges per passar del Jo al Nosaltres en un món digitalitzat
Ad

ブラウザのPerformance APIの話