Submit Search
ブラウザのPerformance APIの話
17 likes
9,524 views
Hiroshi Kawada
ブラウザに入っているPerformance APIの話、超入門者向けにざっくりと。
Technology
Read more
1 of 52
Download now
Downloaded 15 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
More Related Content
PDF
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
PDF
初心者のためのWeb標準技術
Shogo Sensui
PDF
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
PDF
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
PDF
How to develop a huge Single Page Application
Naoki Yamada
PDF
我が家のフロントエンド開発事情
Naoki Yamada
PDF
次世代Web業務アプリケーション
Fumio SAGAWA
PDF
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
初心者のためのWeb標準技術
Shogo Sensui
プログラム組んだら負け!実はHTML/CSSだけでできること2015夏
Yusuke Hirao
Spa のための web サーバ構築ノウハウ
Kazuhiro Kotsutsumi
How to develop a huge Single Page Application
Naoki Yamada
我が家のフロントエンド開発事情
Naoki Yamada
次世代Web業務アプリケーション
Fumio SAGAWA
Spring Boot + Doma + AngularJSで作るERP #jjug_ccc #ccc_r12
学 松崎
What's hot
(20)
PDF
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
PDF
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
PDF
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
PDF
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
PDF
SPAを実現するために必要な通信技術
Yusuke Naka
PDF
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
PDF
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
PDF
モダンWeb開発ワークショップ
Staffnet_Inc
PDF
三位一体の自動化で壊せ DevとOpsの壁~アラサーエンジニアの挑戦~
Rakuten Group, Inc.
PDF
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
PDF
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
PDF
20151021 cookpad talk_test_engineer
Kazuaki Matsuo
PDF
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
PDF
Arachne Unweaved (JP)
Ikuru Kanuma
PDF
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
学 松崎
PPTX
心・技・態 -LINEにおける改善の真実-
LINE Corporation
PDF
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
PPTX
20151205フルスクラッチcms作成のノウハウ With Laravel
Takumi Yoshida
PDF
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
PDF
ほんとうに便利だった業務で使えるJava SE8新機能(JJUG CCC 2015 Spring)
Yuuki Fukuda
SPAに必要なJavaScriptFrameWork
Mizuho Sakamaki
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
SPAを実現するために必要な通信技術
Yusuke Naka
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
モダンWeb開発ワークショップ
Staffnet_Inc
三位一体の自動化で壊せ DevとOpsの壁~アラサーエンジニアの挑戦~
Rakuten Group, Inc.
ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割
Recruit Lifestyle Co., Ltd.
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
20151021 cookpad talk_test_engineer
Kazuaki Matsuo
20141116 jjug ccc_2014_keynote1_public
Yoshiharu Hashimoto
Arachne Unweaved (JP)
Ikuru Kanuma
Spring Boot + Doma + AngularJSで作るERP (LINE Fukuoka Meetup版)
学 松崎
心・技・態 -LINEにおける改善の真実-
LINE Corporation
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
20151205フルスクラッチcms作成のノウハウ With Laravel
Takumi Yoshida
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
ほんとうに便利だった業務で使えるJava SE8新機能(JJUG CCC 2015 Spring)
Yuuki Fukuda
Ad
Viewers also liked
(20)
PPT
Horarios de #BibliotecaAbierta y #HorarioAmpliado 2017 / Biblioteca UPM
Biblioteca UPM
PDF
13 Slack Tips and Use Cases For Sales Teams On Slack
Troops
PPTX
Link Building Strategies That Increase Monthly Revenue by $240,740 #EngagePDX
Ross Hudgens
PPTX
How to Create a Growth Framework
Sujan Patel
PPT
Cancer Care in a Post Truth World
Matthew Katz
PPTX
Growth Hacking: Offbeat Ways To Grow Your Business
Sujan Patel
PDF
Quran Chart (Arabic Presentation)
Ahmed Alarafi
PDF
Content Creation Process
Sujan Patel
PPTX
The Measure of a Marketer's Worth
Rand Fishkin
PPTX
Squeezing Deep Learning Into Mobile Phones
Anirudh Koul
PPT
色彩センスのいらない配色講座
Mariko Yamaguchi
PPTX
Payments Trends 2017
Capgemini
PDF
Infographic: Medicare Marketing: Direct Mail: Still The #1 Influencer For Tho...
Scott Levine
PDF
The Race to 2021: The State of Autonomous Vehicles and a "Who's Who" of Indus...
Altimeter, a Prophet Company
PDF
The Marketer's Guide To Customer Interviews
Good Funnel
PPTX
ELSA France "Teaching is us!"
Adrian Scarlett
PDF
Digital in 2017 Global Overview
We Are Social Singapore
PDF
Design in Tech Report 2017
John Maeda
PPTX
Culture
Reed Hastings
PPTX
Aprenentatges per passar del Jo al Nosaltres en un món digitalitzat
Neus Lorenzo
Horarios de #BibliotecaAbierta y #HorarioAmpliado 2017 / Biblioteca UPM
Biblioteca UPM
13 Slack Tips and Use Cases For Sales Teams On Slack
Troops
Link Building Strategies That Increase Monthly Revenue by $240,740 #EngagePDX
Ross Hudgens
How to Create a Growth Framework
Sujan Patel
Cancer Care in a Post Truth World
Matthew Katz
Growth Hacking: Offbeat Ways To Grow Your Business
Sujan Patel
Quran Chart (Arabic Presentation)
Ahmed Alarafi
Content Creation Process
Sujan Patel
The Measure of a Marketer's Worth
Rand Fishkin
Squeezing Deep Learning Into Mobile Phones
Anirudh Koul
色彩センスのいらない配色講座
Mariko Yamaguchi
Payments Trends 2017
Capgemini
Infographic: Medicare Marketing: Direct Mail: Still The #1 Influencer For Tho...
Scott Levine
The Race to 2021: The State of Autonomous Vehicles and a "Who's Who" of Indus...
Altimeter, a Prophet Company
The Marketer's Guide To Customer Interviews
Good Funnel
ELSA France "Teaching is us!"
Adrian Scarlett
Digital in 2017 Global Overview
We Are Social Singapore
Design in Tech Report 2017
John Maeda
Culture
Reed Hastings
Aprenentatges per passar del Jo al Nosaltres en un món digitalitzat
Neus Lorenzo
Ad
ブラウザのPerformance APIの話
1.
ブラウザの Performance APIの話 2016年3月25日 川田 寛(ふろしき) !?
2.
ふろしき 仕事: ピクシブ株式会社 趣味: Performance
API
3.
Webパフォーマンスが好きです The Web Explorer →
Webパフォーマンス技術の今 Software Design 2015年11月号 → すいすいわかるHTTP/2
4.
Webパフォーマンスが好きです The Web Explorer →
Webパフォーマンス技術の今 この内容の話をします。
5.
今日話すこと 1. Performance Monitoring 2.
Network Optimizations 3. Task Optimization → パフォーマンス計測用APIの話 → ネットワーク最適化用APIの話 → タスク最適化用APIの話
6.
1. Performance Monitoring パフォーマンス計測用APIの話
7.
Performance Timeline Webページを遅くする要因を 探したり監視するためのJavaScript API タイムスタンプを記録して JavaScriptオブジェクトを返してくれる 画像読込!! どれぐらい かかったの? 121 ミリ秒 ササッ
8.
なにが計測できる? Navigation Timing Resource Timing User
Timing Frame Timing Server Timing
9.
Navigation Timing Webページの読み込みを開始してから 表示が完了するまでのタイムスタンプを記録
10.
Navigation Timing
11.
Resource Timing 画像/css/jsなどのリソースを 読み込み始めてから完了するまでの タイムスタンプを記録する
12.
Resource Timing
13.
User Timing 任意のタイミングで タイムスタンプを記録 processing mark mark
14.
User Timing
15.
2. Network Optimizations ネットワーク最適化用APIの話
16.
Network optimizations Webページ読み込みには パフォーマンスを低下させる いろんな問題が隠れている
17.
Network optimizations
18.
どうやってネットワーク最適化できる? Resource Hints Preload
19.
Resource Hints dns-prefetch
20.
Resource Hints preconnect
21.
Resource Hints prefetch
22.
Resource Hints prerender
23.
3. Task Optimization ネットワーク最適化用APIの話
24.
どんなタスクを制御できる? requestIdleCallback requestAnimationFrame setImmediate Page Visibility Web Workers setTimeout/setInterval
25.
requestIdleCallback ブラウザは同時に 1つのタスクしか実行できない…
26.
requestIdleCallback 私たちが作ったJSの実行がヘビーだと ブラウザの描画処理を遅らせてしまう
27.
requestIdleCallback 何もタスクが無いときに JSを実行させる
28.
requestIdleCallback
29.
requestIdleCallback 実際に使ってみた
30.
requestIdleCallback
31.
requestIdleCallback
32.
最後に
33.
Web-perf周りの仕様の話って、 国内では私ぐらいしか 騒いでいる人がいませんが… 最後に
34.
実は需要があると 信じてる。 最後に
35.
流行らせるためにも… 入門書が必要だ!! 最後に
36.
2016年冬 p社オフィスにて
37.
Performance apIについての 入門みたいなドキュメントが 全世界どこさがしても無いの ふろしき ひつじさん
38.
俯瞰的に知りたいって人 絶対いると思うの ひつじさんふろしき
39.
おれはそういう ドキュメントを書きたい ひつじさんふろしき
40.
日本語で一回書き起こして そのあと英語版つくるんだ!! ひつじさんふろしき
41.
いいね!書こう! ひつじさんふろしき
42.
それで!! ひつじさん ふろしき わかめさん
43.
日本語版をまず書いてみた (※同人誌にして冬コミにだしてみた)
44.
脱稿した日
45.
W3CのWebサイトにも あるドキュメントが追加された
48.
訳:Web Performance Timing
API入門 ↓
49.
ごめん 無駄足だった ・・・。 ひつじさん ふろしき わかめさん
50.
無駄足になった私の同人誌、まだ売ってます https://techbooster.booth.pm/items/178228
51.
→ C90につづく
52.
Thank You! @_furoshiki
Download