Save 37% off PRO during our Black Friday Sale! »

High Performance Web Frontend

High Performance Web Frontend

★追記: https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu のほうがブラッシュアップ版です

WCAN 2013 Summer (7/6) で行われた、"High Performance Web Frontend"のセッション資料です。Network 1 : Render 2 : Compute 1 くらいの割合で、各パフォーマンス要因についてお話しました。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

July 06, 2013
Tweet

Transcript

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

  2. Êœħ :FFB 3:A ?G

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

  4.      Ƃ Q…“X ˜Y mrsjfskSEc 1(>_%!

    VU Ž‹jqskW}€ ~ˆyX lmgtosiTY™
  5. ª¼¾¢s§ªŽÀ°¾™ŗê  '7FIAD= " A?BGF7  +7@67D

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

  7. Åé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

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

  9. §ªŽÀ°¾™X peűŗpsWƂ ❓

  10. §ªŽÀ°¾™tçŢ ™›¯ ­‹iðÉFÒŀiðÉ EŸ¯Š¬¯•iʼnè EŸ¯Š¬¯•ìiŃïZ®ïŌZ ⚠

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

  12. ===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(?

  13. ✓7+C98 7<ŜʼnÉ HHHHHHHHÛ² &" ✓Ħ(+299 7<ŜʼnÉ HHHH”¨›|„ &" ✓9C366+ 7<ŜʼnÉ

    HŽ~­¬¯•ú  ±&"   +
  14. ®À˜¼À£ąs ěÌsťĈ`¿ĈŮ` 97:>=/#/8./;  . " 

  15. B7D8?3FF7DE  AA9>7" (  ?3;@DA35: 4>A9EBAF <B  

    B7D8?3FF7DE3F9AA9>7;A  :F?>
  16. Network ',%AA=GB -)I3K:3@6E:3=7 ,7@6!--)+7CG7EF +757;H7!--)+7BA@E7 ¥Ÿ¢½À‘¿ŪÏ

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

  18. ”¾¡¾ •‹¢sūĀ @@@ 19916/ -97 +8+6B=3-<

  19. ōŎĿqŚIJ†Ŕil jsĖĥnalŨSW]„ 33

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

  21. ūĀsĚġžÁůſ œ¨~ˆƒ¥‰§yČė\v ©Ž}«„”iÔúyĐt\ ©Œ¯‹yÖĬ\v $$‹¨}”yÄė\v $$e$iĽnŅnŖyĀŌÉ\v HHHHHHHHHHHHHHHH/=- ℹ

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

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

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

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

  26. íĠ ¹‘™¢sĜ†ı‚b '  Reduce number of HTTP requests ⬅

    ⬅ ⬅ ⬅ ⬅ ⬅ ⬅
  27. #,€,,†{n~„ ĽÑªˆ‹º†ı‚b 98-+=/8+=/$$$:;3=/<+=+&#

  28. íĠ ¹›À™s•‹š†ı‚b 6 Image 6 Optimized Minified, Gzipped 7 Text

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

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

  31. {ct”™§sőS ûńW‚ŁùqŽ 8

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

  33. AA9>7:DA?73@3DK ĀûiĆİR}ʼnU÷ńZwv ŏęį‘¯ªiŊÉpʼnM Mxrv 312=6B>36.şĉþÿûŠ ŽGWDHCRT]¢GWD

  34. 16.666...  ?E  ),

  35. ),n¹ª»Ÿ—¶»À¢ ¤˜}ªÑocÞUiĘŕj Ğh Ô©›«‰§\v C  "$y½b_ohj ›«¯¢iÁĕy 7<dďm]v "

    "$0;+7/:/;</-98.
  36. «¸Œ–s ª»À±qt ĤQpÔĹXŜ{ilS„  %A36 ,5D;BF %3KAGF )3;@F H7@F ?E

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

  38. DEMO

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

  40. Heavy Painting űS®‹¾¢

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

  42. õYSĽÑn¹•‹š 6

  43. +0q|„ĽÑ¹•‹šs”™¢ " . ▻

  44. ÚÈdƒt•À¦À•‹£mš[ " ⬅  . ⬇ ,7DH7D

  45. źřÑĀÜq„•‹šñ  ▪ ▻ īą¾dIŕģj¾hgv

  46. ĠăqŇʼn`Xćŗp¹›À™Ƃ  ▪ ’ƒ‹”ħĘ¿ ‡¢—}ª ƒ¯šŠ§{ª J J J 

    &™¯‘ ëgfiĴś ▪
  47. űS,,sŭØÖļ 

  48. o…XűS¬¼§¡ŠW ŁŞapX‚ŀb 2

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

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

  51. = )3:6.(+39f“OLVU (-,4(/277/1,H¥¤

  52. ,=;3’¸ªŠŸ‘¸‹«¸¹ 2;973>7q8.;93.d ÄėZwcMvöʀ­Š­ Xiöʀ­Š­iÈ»æćyķve $$¬™’|iĿIJpÃQacUv  6

  53. ,=;374G997Dq„Ģś .skp 7 debugger.app 6 2 ▻ ▻ = C`R[UxGEcZTPJUFN—

    Canary Chromium ›©m|…vH ¸¿McQ yhj„
  54. ,=;374G997D öĘæćiőĸqIĺĂş¬›z}ªŠRijOv

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

  56. 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^RT„Iw‰Ld\M
  57. 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
  58. ³¦‹ºtĶqÞpS ‰¥•~šĹµeQřÂ[R` <¾D=“ˆ}­jĝQhá×\v ëjÍİdLwkIMa^Ę¿h\v éĒI /=@9;5…‹”eàğ 9,36/./?3-/<+;/69@<:/- .

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

  60. ,,s_ÖļtŚĽĿq +

  61. Layout Thrashing ĊëapS»‹‰Œ¢ÔĹsŏƒŧa

  62. ŗňs»‹‰Œ¢žÓŰŐ¿¹ª¼Ànſ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ = ·­NT ´¯f½³N[OÁ
  63. ;39@AE;@98AD576EK@5:DA@AGE>3KAGFE +,<,367,89.66.3,*64*/864,+,<,367,8:6639+6*9+,469:664;*/3(?6;:

  64. = AAH¼²NT ÀW¦™ ⚠

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

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

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

      ▻ ▻ ▻ ▻ ▻ ▻ = – ˜‘VG ZNDW‡
  68. ÓŚņqÉT»‹‰Œ¢ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ = ‰YT\WDV eG`ge‡
  69. Ă×»‹‰Œ¢^sŲP™‘¹¬¢t«¼Ÿ‘ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ ƃÄÄÄÄÄÄÄÄÄƃ ƁOAD576%3KAGFOƀ Ƅ12121212121212Ƅ
  70. ™¸Ÿ—¾’»‹‰Œ¢ŶĒ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Á
  71. Ķøs¬¼§¡Šws +736 0D;F7mľĻ ⚠

  72. = ª¨¬šf ºFb

  73. 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); }
  74. 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 !
  75. ™¸Ÿ—¾’»‹‰Œ¢ÓĘ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ ċ‹‹‹‹‹‹‹‹Ä ÃA35*,+(;387A Å&'&'&'&'&'&'&'Šċ‹‹‹‹‹‹‹‹ Ä ÃA35*,+(;387A Å&'&'&'&'&'&'&' Šċ‹‹‹‹‹‹‹‹Ä ÃA35*,+(;387A Å&'&'&'&'&'&'&'Šċ‹‹‹‹‹‹‹‹Ä ÃA35*,+(;387A Å&'&'&'&'&'&'&'Šċ‹‹‹‹‹‹‹‹Ä ÃA35*,+(;387A Å&'&'&'&'&'&'&'Å = JcÁ = JcÁ = JcÁ = JcÁ = JcÁ
  76. 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*,
  77. §¸¸Ÿ‘™sŝt €~„‡gŽŽ ⚠ 98D=B9>=+65+,9>=3=

  78. ;@#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,@#(.,

  79. GPU ŻĮs”™¢

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

  81. ‰¤²À—·¾n ®‹¾¢q|„ ). ❓

  82. ¯˜—·¾sŃÛ

  83. ¯˜—·¾sŃÛ

  84. ŅĐÕs®‹¾¢

  85. œ‹°À‰¤²À—·¾sïä

  86. œ‹°À‰¤²À—·¾sïä

  87. īª»À±_nq‰¦¦¦w

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

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

  90. äĎ»‹µÀÂmÛ[ = p}‡q? ◅ ◅ ◅ +,<,367,89.66.3,*64,<,5:9069,990659   

    <,36*0:?*65-*64<,36*0:? 7;)30*9*/,+;3,+,:(03 
  91. ).q¡‘™ž´† ŤũalÔĹ = ix„X±H tkps€  $X®§ˆ %!  $X®§ˆ

    ! ▻ 6 ▻ {on… ”IM µ• »ž• KdaXz†Y#&vS •‘Ww‰SHc—
  92. äĎ»‹µÀýYŦ|s ÎnûńqjSl  --3./8=+66+B/;-;/+=398

  93. DEMO

  94. ĸŠ ßŎi’„‹¥¯“¯R #Qt'#lłňZwcMv Ąŷ "&©Œ¯‹'#iÖŇ '#li !…‹”iÚÇ ßê 97:9<3=/.+B/;e $=+-538198=/A=iĎÏ

    ûń 97:9<3=/.+B/;iĶĨy ·i+B/;su²hô`²Wv
  95. DEMO

  96. ųŬþì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

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

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

  99.  ­À˜”»‘—·¾ #3H3,5D;BFsùŔ ²³¹¹À‘ ⏱ ▶

  100.  ­À˜”»‘—·¾ #3H3,5D;BFsùŔ ²³¹¹À‘ ⏱ ▶

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

  102. DEMO

  103. -;?7>;@7&7?ADK (4<75FAG@F7DE 2 £¤©q‚œŠ„”úiõġ

  104. DEMO

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

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

  107.  ­À˜”»‘—·¾ #3H3,5D;BFsùŔ ²³¹¹À‘ ⏱ ▶

  108. ­À˜”»‘—·¾ nt ‚œŠ„”i´ĶgËēQt £¤©ŘØyĺø\vĆĄ Eª­˜isNhäÀi†¡y HıÈdÌœ[cUwv¦‘  +;,+1/966/-=398

  109. XùŔ`…lS„Ų ÇsÔĹtÐĦb„ ⚠

  110. ),Xűŗp‰¬¹mt èŸqpƒXh ⚠

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

    EF3DF
  112. )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 ℹ

  113. ĝƒŵĪ§œÀ¾ †¡RÔÌZwgM ,691 8/@;/63- -97     ><381

    -2;97/ ./?/69:/; =996< =9 ŝ8. 7/79;B 6/+5<
  114.  ­À˜”»‘—·¾ #3H3,5D;BFsùŔ ²³¹¹À‘ ⏱ ▶

  115. ²³¹¹À‘nt ĺøZwgM£¤©ŘØRđmu íJhĤSŘØRĐvĔľ E$hPMcjLvĢiıĒĔľ H†¡jßguåguđmvpi /79;B/+5< ℹ

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

  117. 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:=
  118. 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:=
  119. 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:=
  120. ✓Üú‹…¯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:= /=-
  121. +75AD6!73B >>A53F;A@E 2 ¼Ä‘¯ªyĥÊhYĩ¶

  122. = «ºÀ~ƒa—TŠ ’»Àa—T¶œ£\

  123. Conclusion {n~

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

  125. 074§ªŽÀ°¾™†â„ŗň  '7FIAD= " A?BGF7  +7@67D

  126.  '7FIAD= >ōŎĿqŚIJbxa >íĠsûń†Ćÿb„

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

  128. " A?BGF7 >ĬqabZp[l($ > Àº†ÍUuŘlᅄ >“À±nWt—¨‰pèŸ

  129. -;?7>;@7tł Àº ŒQp蟆ľŘmY„ F

  130. +3+867)6>;9,8*65:,5:*64;  :(329+,<:6639 05+,>/:43 =  " =  $

    = ›© =  = ~ƒ‡
  131. >074ĔŕsŤļXþX„ >ùŔĺðsôĤÜ >×Ŵn§ªŽÀ°¾™ . @H "

  132. /;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…^  "Xl‚y = «jz…uX ¹°W˜‘
  133. 074ĔŕmďSŎ]„p‚ b\qáƒŋ}xYŽ 8 %;B3=

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

  135.  /::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