$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
最近の Web パフォーマンス改善について知っておきたいコト
Search
Ayumu Sato
September 24, 2017
Programming
50
19k
最近の Web パフォーマンス改善について知っておきたいコト
HTML5 Conference 2017
http://events.html5j.org/conference/2017/9/
で使用したスライドです。本編45分。
Ayumu Sato
September 24, 2017
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
150
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.7k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
250
副業をきっかけに 切り拓くキャリア形成
ahomu
1
110
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.6k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.5k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
220
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
580
CyberAgent が目指すマスメディアとアクセシビリティ
ahomu
2
2.7k
Other Decks in Programming
See All in Programming
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
380
Reckoner における Datadog Browser Test の活用事例 / Datadog Browser Test at Reckoner
nomadblacky
0
180
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.9k
気をつけたい!Desktop対応で陥りやすい罠とその対策
goto_tsl
0
160
Jakarta EE meets AI
ivargrimstad
0
350
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
100
Full stack testing :: basic to basic
up1
1
770
Java 23の概要とJava Web Frameworkの現状 / Java 23 and Java web framework
kishida
2
360
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
130
CSC509 Lecture 12
javiergs
PRO
0
170
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
8
3.2k
eBPF Deep Dive: Architecture and Safety Mechanisms
takehaya
12
1.1k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.5k
Testing 201, or: Great Expectations
jmmastey
40
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
24k
Navigating Team Friction
lara
183
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Teambox: Starting and Learning
jrom
133
8.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Automating Front-end Workflow
addyosmani
1366
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
What's in a price? How to price your products and services
michaelherold
243
12k
Transcript
剑鵚ך8FCػؿؓ٦وٝأ何㊣ח אְג濼גְֶֹ؝ز )5.-$POGFSFODF !BIPNV"ZVNV4BUP
וֲֿחכ !BIPNVדׅ
‣ ⡟谏娄ׁהֲ֮ײ ‣ せ〢㾊ה幪靼䖂䗁⚥ך8FCر؍كٗحػ٦ ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZ ‣ $ZCFS"HFOU *OD
䪮遭劤鿇8FC*OJUJBUJWF$FOUFSًر؍،窟䭍䪮遭䨌殛㹓 !BIPNV
ػؿؓ٦وٝأכꅾ銲
PGWJTJUTBSFMJLFMZUPCFBCBOEPOFEJG QBHFTUBLFMPOHFSUIBOTFDPOETUPMPBE The need for mobile speed: How mobile latency
impacts publisher revenue https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/
傈刑חꟼ׆)5.-$POGFSFODFח勻䠐陎ָ 넝ְぐ⡘חػؿؓ٦وٝأ 鸞䏝ծ䚍腉 ָ䝤ֻגְְזג 䙼ג➂זגְתׇ״יկ גְֲַծػؿؓ٦وٝأָ葺ֻזׯ,1*הַ $73ח葺ְ䕦갟כ֮ד׃׳ֲկְװծػؿؓ٦وٝأָ חוך玎䏝ך؎ٝػؙز♷ִַכתⴽ㉏겗 זֽוծכה׃ג➙㔐כ畭䫓תׅկ
IUUQTEFWFMPQFSTDZCFSBHFOUDPKQCMPHBSDIJWFTXSJUUFOCZDI ,1*✺ղכ䒦爡ךـؚٗ׀鋮ְֻׁ
‣ ػؿؓ٦وٝأחꟼׅ㛇燉涸ז罋ִ倯ךְֶׁ ػؿؓ٦وٝأך㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ ػؿؓ٦وٝأהؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ ‣ 鵚䎃ծ濼גְֶֹػؿؓ٦وٝأꟼ鸬ךכז׃ ل٦آٗ٦س؝ٝذٝخ傍ֻ䲿⣘ׅ剑黝⻉
ٓٝة؎ي徽ַח⹛ֻ6*ה䘯黝ז乼⡲䠬 ،آؑٝت
‣ رٌהַٓ؎ـ؝٦ر؍ؚٝהַכ֮תׇ ‣ 䞔㜠ꆀ⮚⯓דأٓ؎س帜ղהֻגְֹתׅ ‣ 倜׃ְ䪮遭稱➜׃תָׅ㼎䘔ـٓؐؠכぐ荈ד锃ץג♧㋐♧䣮׃ת׃׳ֲ 劤傈ך岣䠐
ػؿؓ٦وٝأך 㛇劤涸זչ罋ִ倯ծ䯝ִ倯պ
錁挿כ㣐ֹֻⴓֽגא ٓٝة؎ي ل٦آٗ٦س
‣ شؽ٦ءّٝך㨣ַل٦آָ邌爙ׁתדך鸞䏝 ؙٔذ؍ٕٖؕٝتؚٔٝػأך剑黝⻉ ꂁ⥋ٔا٦أ 歗⫷זו ך侧הؿ؋؎ٕ؟؎ؤך剑黝⻉ )5.-鵤⽱
͑؟٦غ؟؎سⳢ椚 ך넝鸞⻉FUD ل٦آٗ٦س
None
None
‣ ل٦آָ邌爙ׁ֮הך6*ך䘔瘶鸞䏝 '14 猱֮ך歗ך刿倜㔐侧 ך剑㣐⻉PS䘔ך넝鸞⻉ ؚٓؿ؍حؙ涸זٖٝتؚٔٝ頾蚚ך鯪ꆀ⻉ 歗刿倜ׁת־أؙٔفزⳢ椚ךꤐFUD
ٓٝة؎ي
WJBIUUQTXXXZPVUVCFDPNXBUDI WQ)'RO1-;
None
ػؿؓ٦وٝأה ؙٓ؎،ٝز橆㞮ךչ㢳圫䚍պ
ِ٦ؠ٦ 䎃ךأوم 㖑♴ꉟד獳⹛⚥ 4/4ة؎يٓ؎ַٝ ِ٦ؠ٦# 剑倜أوم 㖑倯ח䌓満⚥ ـحؙو٦ַؙ ِ٦ؠ٦$ 䎃ךأوم
궪굸䏄ך窫劄涸8J 锃ץ暟ד嗚稊ַ
‣ رغ؎أⳢ椚䚍腉ծأؙٔ٦ٝ؟؎ؤծ乼⡲倯岀 ‣ ـٓؐؠծ04㹋遤䚍腉ծِ٦ؠ٦ָ鷄⸇׃䭁䓸堣腉 ‣ طحزٙ٦ؙؔؿ؍أծ荈㸓ծⰕ遚8Jծٌغ؎ٕ ‣ ِ٦ؠ٦䎃룳װ⦐➂䊴ח״钠濼暴䚍ך䊴殯 ؙٓ؎،ٝز橆㞮ך㢌侧 קך♧鿇
$MJFOU $POOFDUJPO /FUXPSL 4FSWFS 䱸竲ךٖ؎ذٝء٦ 堣㐻ךؔ٦غ٦قحس ألحؙח״Ⳣ椚鹼䒀 ر٦ةك٦أזוך鹼䒀
$16ךأٗحزؚٔٝⳢ椚䚍腉ךؒىُٖ٦ز طحزٙ٦ؙךأٗحزؚٔٝ䌒㚖䚍腉ךؒىُٖ٦ز
֮ײ㢳圫䚍ך⚥ח 鹼ְծ⢪ְבְծ⢪ִזְָ悵
6*ךٖأهٝأ NT ،صً٦ءّٝG NT NT ،؎سٕ⚥ךⳢ椚 NT ل٦آٗ٦س NT
WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFSBJM וְֻז黝ⴖז䘔瘶鸞䏝ה鎉ִךַ ٓٝة؎ي
ل٦آٗ٦س ؝ٝذٝخ傍ֻ䲿⣘ׅ剑黝⻉
‣ شؽ٦ءّٝ㨣׃ג ‣ ٔا٦أتؐٝٗ٦سך鐰⣣׃ג ‣ 8FCل٦آ㹋遤ِׅ٦ؠ٦ָⵃ欽〳腉חזֿה ل٦آٗ٦سהכׅז խ אבֹכؐؑـד /BWJHBUJOH
-PBEJOH *OUFSBDUJOH
‣ %0. $440.3FOEFS5SFF ‣ %PXOMPBESFTPVSDFT3FOEFSQJYFMT5SBOTGFSCJUNBQT ‣ 3"*-ך-PBEָ˘ NTחכֲֲֶׁתזְ ְײؙٔذ؍ٕٖؕٝتؚٔٝػأ WJBIUUQTCJUTPGDPEFVOEFSTUBOEJOHUIFDSJUJDBMSFOEFSJOHQBUI
WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOHQBUIBOBMZ[JOHDSQ +4כ$440.䖉א׃ծ%0.ח䕦갟ׅ +4ָؙٔذ؍ٕؕٔا٦أחזגְ TDSJQUTSDNBJOKTBTZODדꬊず劍ٗ٦س ػ٦؟٦ـٗحׇؙ׆ؙٔذ؍ٕؕדזֻז
‣ )5.-כ%0.ךٕ٦زזךדـٗحִׇׂؙזְ ‣ $44כ$440.ـٗحؙׅ ‣ +BWB4DSJQUכ%0.$440.ـٗحؙׅ ‣ ぐ珏ך鹼䒀ٗ٦سכؙٔذ؍ٕؕػأך瀉簭ח䕵甧א ؙٔذ؍ٕؕػأךꞿׁ
‣ 鹼䒀דֹTDSJQUכBTZODתכEFGFSׅ ‣ 䗳銲ך搀ְ؟٦سػ٦ذ؍أؙٔفز铣鴥תזְ ‣ ⴱ劍邌爙ח䗳銲ז$44ך㙵鴥װװع٦سٕ넝ְ ‣ 㖇簭ֶ״ן؝٦سך剑㼭⻉ָדֹךכ׃גֶֻ ‣ 傈劤铂8FCؿؓٝزכذؗأز䲽歗姺剑穄Ⱔ㐻
ؙٔذ؍ٕؕٔا٦أך侧ה؟؎ؤ
‣ ٔا٦أָ鸞ֻ㾈ַֻծ鹼ֻ㾈ַֻהְֲ錁挿 ‣ ٔا٦أך侧הծ؟؎ؤהծ鯄鷏騃ꨄ瀉ֻׅ ‣ ꅾ銲דכ֮ךָ ل٦آٗ٦سכطحزٙ٦ؙⳢ椚ָꅾ銲
‣ 嚂錁׃ֹזְ傈劤ך鸐⥋笨♴䎂㖱.CQT ٌغ؎ٕ.CQT WJB"LBNBJ24UBUFPGUIF*OUFSOFU$POOFDUJWJUZ3FQPSU ‣ 涪罏ך䠐陎זח넝תגֹגְ ‣ 黝ⴖז歗⫷䕎䒭ד剑黝⻉הַծذؗأزך剑㼭⻉ H[JQהַזװ״י
‣ رְؕ歗⫷ծ搀꼽זٔا٦أծסא٦ח罋ִלتًגⴓַ طحزٙ٦ؙך橆㞮ה涪罏ך䠐陎
‣ ؙٓ؎،ٝز؟؎سחٗآحָؙ㺔גֹגְ䒦㹱 ‣ OQNזוד⣛㶷ػح؛٦آך鷄⸇㺁僒חזגְ ‣ 8FC،فٔכךֿהծ8FC؟؎زفؚٓ؎ٝתד周㢩َغְ ‣ ׃ג周㢩ծؿ؋؎ٕ؟؎ؤ孡חׅ➂ָ㼰זְ 銲⳿Ⱙ ְת侒ִג《♳־ְךכرְؕ+BWB4DSJQU
1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS
1VSF4JOHMF1BHF"QQMJDBUJPO؟؎ز" .PTUPG$166TBHFJT4DSJQUJOH +4TJ[FJTMBSHFSUIBOJNBHFTJ[F
4FSWFS4JEF3FOEFSJOH 41"؟؎ز# %PXOMPBET LC LC &WBMVBUFT 7JTJCMFUPUIF6TFS
4FSWFS4JEF3FOEFSJOH 41"؟؎ز# 5IJTBMTP+4TJ[FJTMBSHFSUIBOJNBHFTJ[F )5.-JTQSPWJEFEGSPN443 JUDPOUBJOTBMPUPGMBZPVUQSPDFTTJOH
‣ LCך歗⫷״LCך+4ךקֲָ媷⫊⸂א تؐٝٗ٦سػ٦أ㹋遤㣐㢌ז؝أز ‣ ٓ؎ـٓٔ鼅㹀儗כؿ؋؎ٕ؟؎ؤ孡אֽזְה㺁僒ח灶笼ׅ ‣ XFCQBDLךDPEFTQMJUUJOHְזךכ䗳銲ז堣腉 ‣ 443邌爙ָ鸞ְֽד乼⡲〳腉חזתדחכ儗ַַָ
+BWB4DSJQUךⴱ劍⻉؝أزְֿ
MPEBTI,# SFBDUEPN,# SY,# BDNFKT,#
DPSFKT,# WFMPDJUZBOJNBUF,# JNNVUBCMF,# SFBDU,# ˟NJOJGZ黝欽䖓ծH[JQ黝欽 Generated by https://alexkuz.github.io/webpack-chart
IUUQTNFEJVNDPNSFMPBEJOHKBWBTDSJQUTUBSUVQQFSGPSNBODFGC
ل٦آٗ٦سחꟼزؾحؙ
‣ 㢳ꅾ⻉ח״⚛䚍ךぢ♳ծقحتך)1"$,㖇簭ծ؟٦غ٦فحءُFUD ‣ Ⰵֽדכ)551ך䛷䜋כ״㣐ְֹ㉏겗ח״ג铎䊴חזֲ ‣ سً؎ٝءٍ٦ر؍ؚٝ♶銲הַDPODBU♶銲הַ鎉גְ )551דرְؕDPODBUכ/(ծ刿倜䚍ָ֮זٍؗحءُؼحز桦♴ָ )551㢳ֻך倯ָ׀㶷ׄד׃׳ֲָ
‣ [PQJכEFBUF✼䳔דծְַֻ㖇簭桦ָ넝ְ את"DDFQU&ODPEJOHH[JQזؙٓ؎،ٝز湱䩛ז⢪ִ 鸐䌢ךH[JQ״儗ַֽג♨㻝ח㖇簭ׅأة؎ٕ̔H[JQ@TUBUJD嗚鎢ׅה葺 ‣ CSPUMJכ倜鋉ך،ٕ؞ٔؤيדծ[PQJ״刿ח넝㖇簭 "DDFQU&ODPEJOHCS鵤ׇךכ&EHF
'JSFGPY $ISPNFծֲּׅ4BGBSJ [PQJ CSPUMJוأ؎أךػٝךせ׃ְ
‣ JNQPSUNPEGSPNNPEKTـٓؐؠ♳ד鍑寸〳腉חז *NQPSUךػأ䭷㹀ךהֶ+BWB4DSJQUָٗ٦سׁ״ֲחז ‣ )551ה䫴ֹさׇד$PODBU♶銲锷ך㸣䧭ח䗳銲ז剑䖓ךػ٦خ ‣ 1PMZNFSׅ)5.-*NQPSUTחⴽデ־ג&4.PEVMFTה䳢䩛׃ &4.PEVMFT⚺銲ـٓؐؠד剣⸬חזתד֮ה׳ה
<script type="module" src="main.js"></script> <script nomodule src="main-bundled.js"></script> &4NPEVMFT㼎䘔ـٓؐؠぢֽךـ٦زأزٓحفؿ؋؎ٕ &4NPEVMFT劢㼎䘔ـٓؐؠぢֽךغٝسٕؿ؋؎ٕ 4FFBMTP/PEFKTך&4.PEVMFT؟ه٦زך植朐然钠ה⪒ִUFQQFJTCMPH IUUQUFQQFJTIBUFOBCMPHDPNFOUSZFTNPEVMFTJOOPEFKT
‣ 1SFMPBEכ植㖈ךل٦آךח䭷㹀ٔا٦أ⮚⯓׃גٗ٦سׅ ‣ 3FTPVSDF)JOUTכ⟃꣬ךل٦آךח䫎堣涸Ⳣ椚ׅ EOTQSFGFUDI%/4鍑寸ך✲Ⳣ椚 QSFDPOOFDU5$1䱸竲ך✲Ⳣ椚 QSFGFUDIٔا٦أ《䖤ך✲Ⳣ椚
QSFSFOEFSل٦آךٖٝتؚٔٝך✲Ⳣ椚 1SFMPBE 3FTPVSDF)JOUTזהזֻ⡂גֽוⴽ➬圫
<link rel="preload" href="font.woff" as="font" crossorigin> <link rel="stylesheet" href="main.css"> <link rel="dns-prefetch"
href="//cdn.example.com"> <link rel="preconnect" href="https://api.example.com"> <link rel="prefetch" href="/libs.js" as="script"> <link rel="prerender" href="/next-page.html"> $44鐰⣣ח1SFMPBEד8FCؿؓٝزך⯓遤ٗ٦س 8FCؿؓٝز䖉ד涪欰ׅذؗأزךٖٝتؚٔٝـٗحؙ鯪幾 3FTPVSDF)JOUTぐ⡘
鎘庠ה鐰⣣䭷垥
‣ 暴㹀橆㞮ַ8FC؟؎زח،ؙإأ׃גر٦ة ꧊ ‣ 植㹋ךِ٦ؠדכזְָ鸞䏝ך♳♴鐰⣣׃װְׅ ‣ 畭劣װ㔐简זו勴⟝؝ٝزٗ٦ٕדֹ ‣ 鑫稢ז䞔㜠הךד涪罏כְָ֮ 4ZOUIFUJD.POJUPSJOH Ý
☁⚙ ⬇ ⬇ 8FC؟؎زח ،ؙإأ׃ג鎘庠 ؙٓؐس♳ךؒ٦آؑٝز 鎘庠ر٦ة꧊琎
‣ ؒٝسِ٦ؠך畭劣♳ד鎸ꐮ׃ر٦ة ꧊ ‣ 㹋ꥷחِ٦ؠָ⡤꿀׃⦼ה ‣ 鑫稢זفٗؿ؋؎ٕ鋅ךדכזְ ‣ ,1*הךꟼ鸬鋅זֿךקֲָ葺ְ 3FBM6TFS.POJUPSJOH ☁
Ý ⬇ ➡ ⬇ 鎘庠ر٦ة꧊琎 ؒٝسِ٦ؠ橆㞮ד䞔㜠《䖤
dumpTiming(performance.timing); performance.getEntriesByType('resource').forEach(dumpTiming); // φϏήʔγϣϯ·ͨϦιʔεͷϩʔυʹ͓͚Δ֤ϑΣʔζͷॴཁ࣌ؒΛग़ྗ function dumpTiming(timing) { console.log(` Name: ${timing.name
|| location.href} Unload: ${timing.unloadEventEnd - timing.unloadEventStart} Redirect: ${timing.redirectEnd - timing.redirectStart} DNS: ${timing.domainLookupEnd - timing.domainLookupStart} TCP: ${timing.connectEnd - timing.connectStart} Request: ${timing.responseStart - timing.requestStart} Response: ${timing.responseEnd - timing.responseStart} Processing: ${timing.loadEventStart - timing.responseEnd} OnLoad: ${timing.loadEventEnd - timing.loadEventStart}`); } /BWJHBUJPO5JNJOH"1* 3FTPVSDF5JNJOH"1* WJBIUUQTDIOFUQPTUTQFSGPSNBODFBQJIUNM♧鿇何㢌
〢➿ ـٓؐؠ؎كٝز劍 %0.$POUFOU-PBEFE MPBE ـٓؐؠ؎كٝزד➿欽׃גְ 湱ꟼ䚍כָ֮劤䔲ח鋅ְ⦼דכזְ 鵚➿ ؽآُ،ٕ䲽歗ך鎘ꆀ劍 4UBSU3FOEFS 'JSTU1BJOU
4QFFE*OEFY 䲽歗Ⳣ椚ךة؎ىؚٝחꟼ䗰ָ獳 8FC1BHFUFTUָ崧遤㨣 植➿ ِ٦ؠ٦⡤꿀劍 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 5JNFUP$POTJTUFOUMZ*OUFSBDUJWF ״ِ٦ؠ٦⡤꿀ה湫穠ׅ䭷垥ָ涫㜥 䠐ָ⠗邌爙חזة؎ىؚٝ 㹋ꥷחⵃ欽〳腉חזة؎ىؚٝ ֻׂⴓַ孡חז䭷垥ך㢌鼂 4FFBMTP8FCؙٓ؎،ٝز؟؎سךػؿؓ٦وٝأًزؙٔأعـּ IUUQTIBWFMPHBZVNVTBUPDPNEFWFMPQQFSGPSNBODFFQFSGPSNBODF@NFUSJDTIUNM
-FWFSBHJOHUIF1FSGPSNBODF.FUSJDTUIBU.PTU"FDU6TFS&YQFSJFODF IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDT
const observer = new PerformanceObserver((list) => { for (const entry
of list.getEntries()) { // `name` will be either 'first-paint' or 'first-contentful-paint'. const metricName = entry.name; const time = Math.round(entry.startTime + entry.duration); ga('send', 'event', { eventCategory: 'Performance Metrics', eventAction: metricName, eventValue: time, nonInteraction: true, }); } }); // Start observing paint entries. observer.observe({entryTypes: ['paint']}); WJBIUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTFSDFOUSJDQFSGPSNBODFNFUSJDTUSBDLJOH@GQGDQ 1BJOU5JNJOH"1*ח״'1ה'$1ך《䖤
None
‣ ֹׁקוך♧菙涸ז䭷垥ֽדכ濼ְֿהָ濼זְֿהָ֮ ‣ 鸞ֻ邌爙ׁךכծ鸞ֻ⹛歗ָⱄ欰㨣׃גק׃ְծהַ ‣ ֿד6TFS5JNJOH"1*ך⳿殢 فٗتؙزח״ג劤䔲ח䗳銲ז䭷垥כ
let reqCount = 0; const req = new XMLHttpRequest(); req.open('GET',
url, true); performance.mark('mark_start_xhr'); req.onload = (e) => { performance.mark('mark_end_xhr'); reqCnt++; performance.measure( `measure_xhr_${reqCnt}`, 'mark_start_xhr', 'mark_end_xhr' ); do_something(e.responseText); } req.send(); const entries = performance.getEntriesByType('measure'); entries.forEach((e)=>console.log(`XHR ${e.name} took ${e.duration}ms`)) WJBIUUQTXXXIUNMSPDLTDPNKBUVUPSJBMTXFCQFSGPSNBODFVTFSUJNJOH♧鿇何㢌 6TFS5JNJOH"1*ד⟣䠐ך挿ך䨽銲儗鎘庠ׅ⢽
‣ ؾٝه؎ٝزד鸞ֻׅىحءָّٝ䗳銲זֿה֮חכָ֮ ‣ ✮皾 㛇彊⦼ 寸ծ״鹼ֻזזְ״ֲ麊欽ׅךָك٦أٓ؎ٝ ‣ 傈䌢涸ח侧㶵הぢֹさגֿ溪䔲ז넝鸞⻉ך䩛ָ䩧ג ‣ 剣俱ֽו4QFFE$VSWFכֶ䩛鯪ד涪罏ָ㥨ֲֹז䠬ׄ
✮皾ך鏣㹀ה㹀䌢涸ז鎘庠 4FFBMTP1FSGPSNBODF#VEHFU.FUSJDT IUUQTUJNLBEMFDDPNQFSGPSNBODFCVEHFUNFUSJDT
ٓٝة؎ي 徽ַח⹛ֻ6*ה䘯黝ז乼⡲䠬
‣ 6*װ،صً٦ءָّٝ徽ַח⹛ַֻ '14ծ3"*-ך"OJNBUJPONT ‣ ِ٦ؠ؎ٝفحزח鴼鸞ח䘔דַֹ 3"*-ך3FTQPOTFNTה*EMFNT ٓٝة؎ي
‣ ـٓؐؠכءؚٕٝأٖحسծ⡦ַָꞿְⳢ椚ׅל➭ךⳢ椚כ鹼 ‣ ،صً٦ءّٝךךⳢ椚ָꅾְהծ㹋ꥷך歗ך刿倜ָ鹼 ‣ ⡦ַָⳢ椚⽑剣׃גְהծِ٦ؠ٦؎ٝفحزפך䘔瘶ָ鹼 ءؚٕٝأٖحسז⚅歲הぢֹさג欰ֹ ($ 4DSJQU -BZPVU
1BJOU &WFOU GSBNF NT
‣ החַֻⳢ椚鯪ֻծ瀉ֻׅ ‣ ً؎ٝأٖحسꞿղה⽑剣׃ג׃תֲ״ֲזⳢ椚惓׃גְֻ ؎كٝزٕ٦ف涸ח➭ךⳢ椚ָⶴ鴥״ֲⴓⶴׅ TFU5JNFPVUהַ ⚛⻉דֹⳢ椚כ➭ךأٖحسח鷕ָׅ8FC8PSLFSהַ
㼎瘻כְֻאַ֮
‣ 暴㹀ךⳢ椚㼔欽أٖحسחⴖ⳿׃ג⚛⻉ׇׁ #MJOLה3BTUFS5ISFBE $PNQPTJUPS5ISFBE 4DSJQU4USFBNFS5ISFBEהַ ‣ ٖٝتٓךةأؙ➙״㼭ְׁثٍؙٝחⴓⶴ׃ ‣ .P[JMMBך1SPKFDU2VBOUVNכせָאְגְג剣せז♧鸬ך《穈
ٖٝتؚٔٝؒٝآٝך涪⩎葿ղװג
‣ 㹋꿀㜥ד֮4FSWPך䧭卓ծ؝ٝه٦طٝزה׃ג(FDLPח《鴥 ‣ 2VBOUVN$44 4UZMP أة؎ٕⳢ椚הإؙٖةوحثך⚛⻉ ‣ 2VBOUVN3FOEFS0QFO(-ك٦أד$44ח暴⻉׃ٖٝتٓפך縧ֹ䳔ִ ‣ 2VBOUVN$PNQPTJUPS$PNQPTJUPSךأٖحسַفٗإأפך杝甧
‣ 2VBOUVN%0.ぐةـךوٕثفٗإأأٖحس⻉הأ؛آُ٦ٕ盖椚 ‣ FUD 1SPKFDU2VBOUVN 4FFBMTP.P[JMMBכ2VBOUVNفٗآؙؑزד麓ה鏐ⴽ׃ծ劢勻ח颺ֽ IUUQSPDLSJEHFIBUFOBCMPHDPNFOUSZ
ٓٝة؎يך暴חٖٝتؚٔٝワד 涪欰ׅ♧菙涸ז㉏겗
זה)5.-$POGFSFODFד涪邌׃ⰻ㺁ָת颣劍ꣲⰻדׅ 4QFBLFS%FDL IUUQTTQFBLFSEFDLDPNBIPNVXFCGSPOUFOESFOEFSJOHQFSGPSNBODFLOPXMFEHFBOEUJQT :PV5VCF IUUQTXXXZPVUVCFDPNXBUDI WD#5"SFK9&
ٓٝة؎يחꟼزؾحؙ
‣ ֮銲稆PCTFSWF׃ג㼎韋ָ歗ח⳿ⰅׅהDBMMCBDLׅ ‣ 䖞勻ךHFU#PVOEJOH$MJFOU3FDUהDMJFOU8JEUI)FJHIUךٗآحַؙ鍑佝 ‣ +4ַٖ؎،ؐز䞔㜠ח撑ׅꥷך؝٦ر؍ؚٝٔأؙ鯪幾דֹ ٔأؙٖ؎،ؐزך麓ⶱזⱄ鎘皾ծְײ'PSDFE-BZPVUװ-BZPVU5ISBTIJOH *OUFSTFDUJPO0CTFSWFSأؙٗ٦ٕず劍Ⳣ椚ך佸⚅⚺
const target = document.getElementById('target'); let viewport = getViewportSize(); function getViewportSize()
{ return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } window.addEventListener('scroll', () => { const { width, height } = viewport; const rect = target.getBoundingClientRect(); // ਫฏํʹ͓͍ͯཁૉͷҰ෦·ͨશ෦͕ը໘ʹଘࡏ͠ಘΔ͔ const isInHorizontal = rect.left > 0 && rect.left < width || rect.right > 0 && rect.right < width || rect.left < 0 && rect.right > width; // ਨํʹ͓͍ͯཁૉͷҰ෦·ͨશ෦͕ը໘ʹଘࡏ͠ಘΔ͔ const isInVertical = rect.top > 0 && rect.top < height || rect.bottom > 0 && rect.bottom < height || rect.top < 0 && rect.bottom > height; // ཁૉͷҰ෦·ͨશ෦͕ը໘ʹଘࡏ͢Δ͔ if (isInHorizontal && isInVertical) console.log('ཁૉ͕ը໘ʹೖΓ·ͨ͠'); else console.log('ཁૉ͕ը໘͔Βग़·ͨ͠'); }, false); 䖞勻ך銲稆ך歗ⰻךⰅ⳿嗚濼
const target = document.getElementById('target'); const observer = new IntersectionObserver(entries =>
{ const entry = entries[0]; // ཁૉ͕গ͠Ͱը໘ʹೖ͍ͬͯΕਅ if (entry.intersectionRatio > 0) { console.log('ཁૉ͕ը໘ʹೖΓ·ͨ͠'); } else { console.log('ཁૉ͕ը໘͔Βग़·ͨ͠'); } }); observer.observe(target); *OUFSTFDUJPO0CTFSWFSדずֿׄה㹋植ׅ
‣ UPVDINPWFװNPVTFXIFFMזוכرغ؎أך乼⡲הず劍׃ג涪欰ׅ ‣ FQSFWFOU%FGBVMU ח⪒ִגծ歗刿倜ךחعٝسٓךⳢ椚䖉ָ֮ ‣ ☝ㄎן⳿ׁזְֿה⥂鏾ׅלծأي٦ؤח歗刿倜דֹ 1BTTJWF&WFOU-JTUFOFSTأؙٗ٦ٕآٍؙٝ鯪幾 element.addEventListener('touchmove', handler,
{ passive: true });
WJBIUUQTXXXZPVUVCFDPNXBUDI W/1.+H Not passive Use passive
IUUQSCZFSTHJUIVCJPTDSPMMMBUFODZIUNM 4DSPMMKBOLEVFUPUPVDIXIFFMIBOEMFSTEFNP
‣ Ⳣ椚ׅץֹةأָؙזֻ㸣ⰋחⰅ⸂䖉ךהֹ *EMF ח涪抟ׅ؝٦ٕغحؙ ‣ TFU5JNFPVU GO ״䛬䠐涸 ‣
ؿٖ٦يך刿倜⮚⯓דֹ ‣ ⢪ְ麣כ葿ղֲ֮ SFRVFTU*EMF$BMMCBDL 6TJOHSFRVFTU*EMF$BMMCBDL]8FC](PPHMF%FWFMPQFST IUUQTEFWFMPQFSTHPPHMFDPNXFCVQEBUFTVTJOHSFRVFTUJEMFDBMMCBDL
function myNonEssentialWork (deadline) { // rIC ͷ࣋ͪ࣌ؒ 50ms Ͱ͋ΓɺtimeRemaining() ͦͷΓ࣌ؒΛฦ͢
while (deadline.timeRemaining() > 0 && tasks.length > 0) { tasks.shift()(); } if (tasks.length > 0) { requestIdleCallback(myNonEssentialWork); } } requestIdleCallback(myNonEssentialWork); SFRVFTU*EMF$BMMCBDLד内זהֹח剑㣐NT➬✲ׅ
‣ ך銲稆ח㢌刿ָ涪欰ֿׅהծـٓؐؠח✮デׅفٗػذ؍ ‣ ✉凐חְֲהtransform: translate3d(0, 0, 0)عحؙך姻䒭晛 ‣ (16،ؙإٖٓ٦ءّٝזוծـٓؐؠָ䩛ח剑黝⻉ׅךو٦ؚؗٝ $448JMM$IBOHF姻׃ֻ⢪זְהⶰ⡲欽ָֽ֮ו⤑ⵃ
.element { transform: scale(1); will-change: transform; } .element.clicked { transform: scale(2); } 4FFBMTP$44XJMMDIBOHFفٗػذ؍חאְג濼גֶֻץֹֿה IUUQTEFWPQFSBDPNBSUJDMFTKBDTTXJMMDIBOHFQSPQFSUZ
WJBIUUQTXFCLJUPSHCMPHDTTBOJNBUJPO
‣ أة؎ٕծٖ؎،ؐزծ䲽歗ך鎘皾眔㔲ꣲ㹀׃ג剑黝⻉דֹ ‣ ֮銲稆ⰻך朐䡾ח״㢩歲פך䕦갟㼓ׄ鴥فٗػذ؍ DPOUBJOTJ[F̔䭷㹀ׁ銲稆ך؟؎ؤָ؝ٝذٝخծ㶨㷝銲稆ח䕦갟ׁזֻז DPOUBJOMBZPVU̔䭷㹀ׁ銲稆ָ鋵⯌䓌銲稆ךٖ؎،ؐزח䕦갟♷ִזֻז DPOUBJOTUZMF̔䭷㹀ׁ銲稆ך㢩ח䕦갟⿹רׅ♧鿇ךأة؎ٕⰻ⩎ד㸣穠ׇׁ
DPOUBJOQBJOU̔䭷㹀ׁ銲稆ך㞮歲ך㢩⩎ח㶨㷝銲稆ָل؎ٝزׁזֻז $44$POUBJONFOU⠗זְ$44فٗػذ؍痥⡘˟⦐➂ך䠬䟝
IUUQTDPEFQFOJPBIPNVGVMM;Q,(S/ )FMMP $44$POUBJONFOU1MBZHSPVOE
תה
‣ החַֻ剑鵚ךرְؕ+BWB4DSJQUחכ孡אֽגֶֻה葺ְ ‣ ل٦آٗ٦سך鎘庠䭷垥濼גֶֻהչזחָ鸞ְךַպָⴻ倖דֹג葺ְ ‣ ٓٝة؎يכ葿ղה"1*ָ⯍㹋׃גֹגַٍؗحث،حف׃הֻה葺ְ ‣ Ⱗ⡤涸ז锃叨װ何㊣ך؛٦أأةر؍חאְגכ 鎉ְַֿה
衼罏!BIPNV!DI 涪㡰剢傈 ✮㹀 ⳿晛䪮遭鐰锷爡 8FCل٦آ鸞䏝 何㊣ؖ؎س 馄鸞 ⟎ ⛱ֲ׀劍䖉
5IBOLZPV IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ⌂