Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
最近の Web パフォーマンス改善について知っておきたいコト
Ayumu Sato
September 24, 2017
Programming
50
17k
最近の 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
ahomu
1
450
ahomu
2
1.3k
ahomu
0
180
ahomu
9
5k
ahomu
11
4.9k
ahomu
1
1.5k
ahomu
0
210
ahomu
18
8.5k
ahomu
0
890
Other Decks in Programming
See All in Programming
layzee
1
220
boriswilhelms
0
160
nearmugi
0
190
andpad
2
250
kosugitti
1
250
numeroanddev
1
240
borkdude
2
220
tkmnzm
0
130
joergneumann
0
150
bkuhlmann
2
310
meemeelab
0
300
grapecity_dev
0
180
Featured
See All Featured
eitanlees
112
10k
destraynor
222
47k
trallard
14
720
jrom
116
7.2k
yeseniaperezcruz
302
31k
smashingmag
230
18k
thoeni
3
610
jonrohan
1021
380k
tenderlove
53
3.5k
cherdarchuk
71
260k
nonsquared
81
3.4k
marcelosomers
221
15k
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 ⌂