High Performance Web Frontend

High Performance Web Frontend 0',G??7D 3:A?G K47D97@F"@5

Êœħ :FFB 3:A ?G

Frontend Engineer !-&% ,, #3H3,5D;BF DAIE7D

Ƃ QX Y mrsjfskSEc 1(>_%!
VU jqskW} ~yX lmgtosiTY

ª¼¾¢s§ªÀ°¾ŗê  '7FIAD= " A?BGF7  +7@67D

ģş7,8-4(::,89 ŪÏ",:=682 ęĽ$,5+,8 Śņ647;:, Ōş65*3;9065 ŝsİ

ÅésÒút yz074$;FxÀ :DA?7(B7D38.;93.$+0+;3 ℹ XO]X',)0:A',)0:-68,<,367,89B /::74?(2;8(.0:/;)065=,)20: +,<9/:43

#perfmatters )7D8AD?3@57&3FF7DE

§ªÀ°¾X peűŗpsWƂ ❓

§ªÀ°¾tçŢ ¯ iðÉFÒŀiðÉ E¯¬¯iŉè E¯¬¯ìiŃïZ®ïŌZ ⚠

¨¥Ėĥqp ®À¼À£sūĀ ' /=@9;5  ▻ ▻ ▻

===9:8(5.,36675,:=6829*648,96;8*,905-6.8(7/0*9=,)7,8-684(5*,(5+ ,*644,8*,047(*:6- 9,*65++,3(?

✓7+C98 7<ŜŉÉ HHHHHHHHÛ² &" ✓Ħ(+299 7<ŜŉÉ HHHH¨| &" ✓9C366+ 7<ŜŉÉ
H~¬¯ú ±&"   +

®À¼À£ąs ěÌsťĈ`¿ĈŮ` 97:>=/#/8./;  . " 

B7D8?3FF7DE AA9>7" ( ?3;@DA35: 4>A9EBAF <B
B7D8?3FF7DE3F9AA9>7;A :F?>

Network ',%AA=GB -)I3K:3@6E:3=7 ,7@6!--)+7CG7EF +757;H7!--)+7BA@E7 ¥¢½À¿ŪÏ

⇆ -)I3K:3@6E:3=7 ',%AA=GB !--)+7CG7EFN+7EBA@E7@  2

¾¡¾ ¢sūĀ @@@ 19916/ -97 +8+6B=3-<

ōŎĿqŚĲŔil jsĖĥnalŨSW] 33

¾¡¾ ¢sūĀūĀsĚġ @@@ 19916/ -97 +8+6B=3-<

ūĀsĚġžÁůſ ¨~¥§yČė\v ©}«iÔúyĐt\ ©¯yÖĬ\v $$¨}yÄė\v $$e$iĽnŅnŖyĀŌÉ\v HHHHHHHHHHHHHHHH/=- ℹ

074)7D8AD?3@577EF)D35F;57 =5 13=2>, 39 <://.

)397,B776"@E;9:FE ./?/69:/;< 19916/ -97 <://. :+1/<://. 38<312=<

ª¼¾¢¾£mŔU '7FIAD=ûń jsíĠ ✓

⇆ -)I3K:3@6E:3=7 ',%AA=GB !--)+7CG7EFN+7EBA@E7@  2

íĠ ¹¢sĜıb '  Reduce number of HTTP requests ⬅
⬅ ⬅ ⬅ ⬅ ⬅ ⬅

#,,,{n~ ĽÑªºıb 98-+=/8+=/$$$:;3=/<+=+&#

íĠ ¹Àsıb 6 Image 6 Optimized Miniﬁed, Gzipped 7 Text
7 # """ ▻ ▻▻ ▻ ▻▻

ĽÑsĞŮÜ #!% " +>8=6/= 7+1/!:=37 %;37+1/ 6

¡¢sĞüÜ (&97:;/<<9;$$ $ $$!$$ 9916/69<>;/97:36/;$ &1630B$$ 7 7

{ct§sőS ûńWŁùqŽ 8

Render )3;@F %3KAGF ). ęĽÔĹqjSl

AA9>7:DA?73@3DK ĀûiĆİR}ŉU÷ńZwv ŏęį¯ªiŊÉpŉM Mxrv 312=6B>36.şĉþÿûŠ GWDHCRT]¢GWD

16.666... ?E ),

),n¹ª»¶»À¢ ¤}ªÑocÞUiĘŕj Ğh Ô©«§\v C "$y½b_ohj «¯¢iÁĕy 7<dďm]v "
"$0;+7/:/;</-98.

«¸s ª»À±qt ĤQpÔĹXŜ{ilS %A36 ,5D;BF %3KAGF )3;@F H7@F ?E
% %

ª»À±ÔĹsķČ -;?7>;@7mŁŞb 2 %37/638/;+7/<

A?B3D78D3?7EB7DE75A@6 0;+7/< :/; </-98. +::<:9= -97

Heavy Painting űS®¾¢

®¾¢¢s ŗê 6  Big Image Heavy CSS %/,#&(5+#&/,(:9/,,: #,8-684(5*,/,*2309:-68:/,!6)03,',)

õYSĽÑn¹ 6

+0q|ĽÑ¹s¢ " . ▻

ÚÈdtÀ¦À£mš[ " ⬅  . ⬇ ,7DH7D

źřÑĀÜqñ  ▪ ▻ īą¾dIŕģj¾hgv

ĠăqŇŉ`Xćŗp¹ÀƂ  ▪ ħĘ¿ ¢}ª ¯§{ª J J J
&¯ ëgfiĴś ▪

űS,,sŭØÖļ 

oXűS¬¼§¡W ŁŞapXŀb 2

-!"' ,0%-('-!&((' -<</A: -97 7998

= @35*,(**,0,5(7,+ A*31436/7/2- @2()0,*327/28386 A4(-,5,4(/27/2-

= )3:6.(+39fOLVU (-,4(/277/1,H¥¤

,=;3¸ª¸«¸¹ 2;973>7q8.;93.d ÄėZwcMvöĘ XiöĘiÈ»æćyķve $$¬|iĿĲpÃQacUv  6

,=;374G997DqĢś .skp 7 debugger.app 6 2 ▻ ▻ = C`R[UxGEcZTPJUFN
Canary Chromium ©m|vH ¸¿McQ yhj

,=;374G997D öĘæćiőĸqIĺĂş¬z}ªŠRĳOv

,,»§À¢¹ÀI;F:r^Ý

232, 16 )3:6.(+39 16 )35+,55(+/86 16 +377,+)35+,5 16
6.(+39+377,+ 16 6.(+395(+/86 16 5(+/86+377,+ 16 (001/: 16 CEI\S,);..,8uX{SEbD|XnpehSY^RTIwLd\M

232, )3:6.(+39 )35+,55(+/86 +377,+)35+,5 6.(+39+377,+
6.(+395(+/86 5(+/86+377,+ (001/: ⬅ ⬅ ⬅ 2+?/691 +B>7><+=9 -97 ./?/69: :/;09;7+8-/ / -<<*;/8./;381*@3=2*<53+*./,>11/; 2=76

³¦ºtĶqÞpS ¥~šĹµeQřÂ[R` <¾D=}jĝQhá×\v ëjÍİdLwkIMa^Ę¿h\v éĒI /=@9;5eàğ 9,36/./?3-/<+;/69@<:/- .

Ëċ 3"298/$RáÝhōM 3!$p°ÕhgvQŢ AK A+6+AB$¸ņmd řĭhÓŚRdq\M +0//6381 .

,,s_ÖļtŚĽĿq +

Layout Thrashing ĊëapS»¢ÔĹsŏŧa

ŗňs»¢žÓŰŐ¿¹ª¼Ànſ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ = ·NT ´¯f½³N[OÁ

;39@AE;@98AD576EK@5:DA@AGE>3KAGFE +,<,367,89.66.3,*64*/864,+,<,367,8:6639+6*9+,469:664;*/3(?6;:

= AAH¼²NT ÀW¦ ⚠

èŸsºÀ¬sÃm ţ^ilS^n ❓ 9;-/.$B8-2;9><6+B9>=

»¾¹¾sª¼À #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻

āĥĉîsŗĭ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ = VG ZNDW

ÓŚņqÉT»¢ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ = YT\WDV eG`ge

Ă×»¢^sŲP¹¬¢t«¼ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ ƃÄÄÄÄÄÄÄÄÄƃ ƁOAD576%3KAGFOƀ Ƅ12121212121212Ƅ

¸¾»¢ŶĒh»¢ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å = JcÁ = JcÁ = JcÁ = JcÁ = JcÁ

Ķøs¬¼§¡ws +736 0D;F7mľĻ ⚠

= ª¨¬f ºFb

LM èŸsºÀ¬ // animation loop function update(timestamp) { for (var
m = 0; m < movers.length; m++) { // Layout invalidated movers[m].style.left = ( (Math.sin( // Layout forced movers[m].offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); }

LM öóq°²pÔĹ --- 1st loop --- R offsetTop up to
date W style.left dirty flag on --- 2nd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 3rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 4rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 5th loop --- ... .. = CRQG` ¡fSKd_ = PEGB· NWDVÁ ===?6;:;),*64=(:*/< &"'0 !

¸¾»¢ÓĘ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F
  ▻ ▻ ▻ ▻ ▻ ▻ ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å Ä Ä ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&' Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å ÄÄ ÃA35*,+(;387AÂ Å&'&'&'&'&'&'&'Å = JcÁ = JcÁ = JcÁ = JcÁ = JcÁ

LM èŸqp¬¼§¡¿²£ Element clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetTop
offsetWidth scrollHeight scrollLeft scrollTop scrollWidth innertText outerText getBoundingClientRects etc... MouseEvent layerX layerY offsetX offsetY Window scrollBy scrollTo scrollX scrollY getComputedStyle Frame, Document & Image height widh 2,33,.6;9*641 3(?6;:7,8-684(5*,

§¸¸sŝt ~gŽŽ ⚠ 98D=B9>=+65+,9>=3=

;@#3@=GEF;@9 )3D3>>3JB7D8AD?3@57 2 052+<,5:;8,905(52;9:05. #(8(33(>7,8-684(5*,(5+:/,5,=30*2864,@#(.,

GPU ŻĮs¢

^^tĶq074$;F :DA?;G?¯À¢sŝ ℹ

¤²À·¾n ®¾¢q| ). ❓

¯·¾sŃÛ

ŅĐÕs®¾¢

°À¤²À·¾sïä

īª»À±_nq¦¦¦w

,,@;?3F;A@Et peĳWqÛ[sW  837+=398,+</.6+B/;:;979=398

äĎ»µÀĻĎ +,<,367,89.66.3,*64,<,5:9069,990659 <,36*0:?*65-*64<,36*0:? 7;)30*9*/,+;3,+,:(03

äĎ»µÀÂmÛ[ = p}q? ◅ ◅ ◅ +,<,367,89.66.3,*64,<,5:9069,990659
<,36*0:?*65-*64<,36*0:? 7;)30*9*/,+;3,+,:(03

).q¡´ ŤũalÔĹ = ixX±H tkps $X®§ %! $X®§
! ▻ 6 ▻ {on IM µ » KdaXzY#&vS WwSHc

äĎ»µÀýYŦ|s ÎnûńqjSl  --3./8=+66+B/;-;/+=398

ųŬþìqŮļb¹ ⚠ =;+8<6+=/.)q,+-50+-/ ?3<3,363=Bd ¹ñiĶĨy"&hŗVtwvR ,9.BqgfdçØhŌė\ve ŋłňRŁXuI¥§}ªR ĜUgv_o¯ Rº³\v <<318=37/6+B/;:;979=398

Compute #3H3,5D;BF 3D4397A>>75F;A@ &7?ADK%73= Ĵņ¿¹À

vYjkY3@3DK ōĶgijÙāĚgĮOüe ăļióĈ®¯ªyěvXe ĻâĘŕi}¯¯q ĆİiÐĠRÜxvijYòù

 À»·¾ #3H3,5D;BFsùŔ ²³¹¹À ⏱ ▶

#3H3,5D;BF ).)DAż>7D 2 ÁĕiãĳhQQa_ýŐ

òp§À¾ Řj]fŗįĊ 2 ĊêyċñčUķv

s^ZĨ§À¾ iřèRŜ\Tv 38-/:=398 /A:6+38/. -97

 À»·¾ #3H3,5D;BFsùŔ ²³¹¹À ⏱ ▶

XùŔ`lSŲ ÇsÔĹtÐĦb ⚠

),Xűŗp¬¹mt èŸqpXh ⚠

X ?EsÃsĜÙ ĕilSila{T "*5/47 (;387 (/27 ?EAH7D
EF3DF

)D7>>A53F7{ft (4<75F)AA>nSTđĮ );03+5,=.(4,9*64.(8)(.,*633,*:68-80,5+3?*6+, ===/:4386*29*64,5:;:680(3997,,+9:(:0*4,476639 ℹ

ĝŵĪ§À¾ ¡RÔÌZwgM ,691 8/@;/63- -97 ><381
-2;97/ ./?/69:/; =996< =9 ŝ8. 7/79;B 6/+5<

 À»·¾ #3H3,5D;BFsùŔ ²³¹¹À ⏱ ▶

o^Wqĩila{if àĵXßê ⚠

LM // Case1. είʔϓ಺Ͱ׬݁͢Δ function foo() { var bar =
new LargeObject(); bar.someCall(); } // Case2. ࢀর͕࢒Δ function foo() { var bar = new LargeObject(); bar.someCall(); return bar; } var b = foo(); // ͜͜Ͱείʔϓͷ֎ʹͰΔ G@5F;A@E -9.381 <7+<23817+1+C38/ -97 @;3=381 0+<= 7/79;B /Ş-3/8= 4+?+<-;3:=

LM // largeStr ͸ a() Λ௨ͯ͠ΞΫηεͰ͖ΔͷͰճऩ͞Εͳ͍ var a = function
() { var largeStr = new Array(1000000).join('x'); return function () { return largeStr; }; }(); // largeStr ͸ a() ͷதͰࢀর͞Εͳ͘ͳͬͨͷͰճऩ͞ΕΔ var a = function () { var smallStr = 'x'; var largeStr = new Array(1000000).join('x'); return function (n) { return smallStr; }; }(); >AEGD7E -9.381 <7+<23817+1+C38/ -97 @;3=381 0+<= 7/79;B /Ş-3/8= 4+?+<-;3:=

LM var myObj = { callMeMaybe: function () { var
myRef = this; var val = setTimeout(function () { console.log('Time is running out!'); myRef.callMeMaybe(); }, 1000); } }; // ࣮ߦ͢Δͱ... myObj.callMeMaybe(); // myObjͱ͍͏໊લͷม਺͔ΒࢀরΛࣦΘͤͯ΋ // ࠶ؼλΠϚʔͷதͰࢀর͞Ε͍ͯΔ myObj = null; -;?7DE -9.381 <7+<23817+1+C38/ -97 @;3=381 0+<= 7/79;B /Ş-3/8= 4+?+<-;3:=

✓Üú¯iĵŔgĪnÎM ✓ÅŒďn!i}©¯ ✓ŐiîĖËē ✓-98<96/ 691gfhsvÂÆ -9.381 <7+<23817+1+C38/ -97
@;3=381 0+<= 7/79;B /Ş-3/8= 4+?+<-;3:= /=-

+75AD6!73B >>A53F;A@E 2 ¼Ä¯ªyĥÊhYĩ¶

= «ºÀ~aT »ÀaT¶£\

Conclusion {n~

ŊÆafãŗňqjSl õ{Wqėŧ 

074§ªÀ°¾âŗň  '7FIAD= " A?BGF7  +7@67D

 '7FIAD= >ōŎĿqŚĲbxa >íĠsûńĆÿb

 +7@67D >,,sŭŖŹqįĊ >»¢sľĻįĊ > ).ÔĹtčűqēT

" A?BGF7 >ĬqabZp[l($ > ÀºÍUuŘlá >À±nWt¨pèŸ

-;?7>;@7tł Àº ŒQpèŸľŘmY F

>074ĔŕsŤļXþX >ùŔĺðsôĤÜ >×Ŵn§ªÀ°¾ . @H "

/;EG3>,FG6;A qV] 0;@6AIE,FAD7¬¹s¬¼ª¹¾ )36.949+5*64)964(9,.(8(8*/0<, <09;(3 9:;+06 ;7+(:, 56=(<(03()3,(97>
= rj}j^ "Xly = «jzuX ¹°W

074ĔŕmďSŎ]p b\qáŋ}xYŽ 8 %;B3=

*G7EF;A@E :FFB 3:A ?G 3:A?G 9;F:G4 5A? 3:A?G ⌂

/::7===0*28*647/6:69:)09((*9 /::7===0*28*647/6:699:,<,5+,7636
/::7===0*28*647/6:69,7969 /::7===0*28*647/6:6916/550,=(32,8 /::7===0*28*647/6:69(3,92 /::7===0*28*647/6:69 " /::7===0*28*647/6:693(*/3(5/(8+? /::7===0*28*647/6:6949<. /::7===0*28*647/6:69;94099065 /::7===0*28*647/6:691+/(5*6*2 /::7===0*28*647/6:69:/92?: /::7===0*28*647/6:69/(59,3 "29=9;/.3=<G

High Performance Web Frontend

High Performance Web Frontend

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript