High Performance Web Frontend 2013 秋

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
September 14, 2013

High Performance Web Frontend 2013 秋

第15回リクリセミナー「Frontrend in Osaka」 - Re:Creator's Kansai http://recreators.doorkeeper.jp/events/5240 で利用したスライドです。本編60分でした。
同年の7月に行ったWCAN Summer 2013の講演とは、Network周りの前振りを厚くしたり、Compute周りをより薄くしたりと、構成の配分に調整が加えられています。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

September 14, 2013
Tweet

Transcript

  1. High Performance Web Frontend *5B51D?BMC#1>C19B?>DB5>49>'C1;1 18?=E I25B75>D!>3

  2. ×Ūķ๑NᴗO๑ 8DD@ 18?=E

  3. Frontend Engineer ,%$ ++ "1F1+3B9@D B?GC5B

  4.     Ɨ sIy†P‹Q bgh_[h`KBX .%;U" NM u_fh`Oqt

     r|mP ab\idh^LQŒ
  5. ¯ÂĨw­¯”ƶğ ůø  &5DG?B; # ?=@ED5  *5>45B

  6. ijŷ4)5*1%77)56 ƀÚ)7:35/ ħō!)2()5 ŲŚ31487) Ţŷ32'086-32 ŵwŁŠ

  7. Î÷wßĊx |}.52#9D{Ɵ 8B?=5'@5B19/<:4/',1,<4 ℹ …~€PHSP$)&-7>$)&-7*35)9)034)56?w{ƒ‚ ,7741<%/85%+-7,8&-32:)&/-7 ()96,710

  8. #perfmatters (5B6?B=1>35%1DD5BC

  9. īÎw­¯”ƶğr jwƅůĘ ❓ =3314*'31&03+  :)&4)5*351%2')&%6-'6*357,)1%5/)7-2+7)%1

  10. šÄ¬Æž½Äň[õÈf‰ ":D477,ciI¤´Ž±´˜hńêR  ĝŔńÌY]Vdc ‘€²±´˜øR ÓµY]  -7:28:D477,:<2 80><4.= 

     ŕ<01:B;,207:,/=;00/   ;,<>44
  11. ??7<5uą‹ŠtVku ¤´ŽŸƒ´¥²R ÕV‹—i Āħ­²†²ˆg ęVĕƌRLx ' 2::270A0-8,=>0<.09><,7-7:2=;:>5;  ?=492=4>0=;00/49A0-=0,<.3<,964923>87

  12. äŐuĕƌŒÉX‰ ::270d"4.<:=:1>i ¤´Ž±´˜R ĝņUfx]k ‹´žgd`b  hčęg afRxĚĢ{ĜY]  3>>;

    <,/,<:<0477C.:8   -492,9/2::270,2<00=7:A;,23>87
  13. .52wĀëu†np ƅůĘ[ĭuÿdpV‰ ℹ

  14. ĉūŊþwĂĴë  #  +

  15. ůÑwŮƊë   - 

  16. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7
  17. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7 2 D¨Á¼ª ]V^±f·T 
  18. (175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492

    7:=0 94>4,7 2 D†§•] “»R€¢eL ♥
  19. Network &+$??;E@ ,(?>>53D9?> +5>4 ,,(*5AE5CD *5359F5 ,,(*5@?>C5 «¥¨ÃƗÅƀÚ

  20.  0 + -  ␡ $?14 4=;7,C )=492 7:=0

    94>4,7
  21. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

  22.  #w¿¡ÆŸŒï`î‰ ,,(¿—“Ÿ¨w&5DG?B; ‡­}²—R‹´œ´h rwÐw’îðÆgQQxúŊ{ #5:4-%716%13.dÕkmZ ýĩĘg»îðZxcYtNQŚ '

  23. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

  24.  + &+ <95>D SGGG5H1=@<53?=npôæw +5BF5BwÖĠxsaƗT 21.49 ¯”ÃÆ©À¥—Ž¥±

  25.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± SUÆQYŠœ‡tV`s œnpjWtÐw&+uŧVp‰‹T !$ &+űĽ

  26.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± S    

    lnpcT !$ &+űĽ
  27. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

  28.  + +5BF5B <95>D Sb^lcÆVT 21.49 ĦŤwƆĄ

  29.  + +5BF5B <95>D StwŌqfZÆƗT $.7;.7 ĦŤwƆĄ

  30.  + +5BF5B <95>D Saumxƒ ¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ ,,(¿—“Ÿ¨

  31.  + +5BF5B <95>D ĦŤwƆĄ ,,(¿—“Ÿ¨ ,( G1I 81>4C81;5

  32. ⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

  33.  + +5BF5B <95>D S¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ Sm…nr~npvT $.7;.7 ,,(¿—“Ÿ¨

    ¿—“Ÿ¨wáʼnĬƇ
  34.  + +5BF5B <95>D SrˆUXg #ſ‰vT $.7;.7 ,,(ÁŸµÄŸ #

  35.  + +5BF5B <95>D SUˆ[rWƒ ‚nrľčſnpVV†ƒT 21.49 ÁŸµÄŸïÚÊ ,,(ÁŸµÄŸ #

  36.  + +5BF5B <95>D ÁŸµÄŸïÚÊ SeƒU  #ſ‰†T $.7;.7 ,,(ÁŸµÄŸ

    #
  37.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË F‡½JP[WVÂG 21.49

  38.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË ,( +<?G+D1BD

  39. •Æ¬Æ²¥©[â„fV ĺ×h&:?9/(<4;RLwmY]  ®‡‚—dĹOeq ø×h&:?9/(<4;{ĭwŁYbMx Ń¿R·âãfĔÜ^d&:?9/(<4;h ×øgć¼Yb„´œ´¢“˜RđgQXo 

  40. 978(5B6?B=1>35 B?GC5B&5DG?B;9>7 .3480<,7,-=:<0477C.:8 -::6= 

  41. m…nrƋdVqf†v 

  42. xewŽ—½Äx ­¯”ƶğwĤĵë ✓

  43. ÙXyšÄ§Ä¦›¨wƁĐ AAA2::270.:8 ,9,7C>4.=

  44. ĤĵrdpőĵیĈ ţŤdpžźf‰ ::

  45. šÄ§Ä¦›¨wƁĐƁĐwĨı AAA2::270.:8 ,9,7C>4.=

  46. ƁĐwĨıƓÇƃƔ  ­€Œ†ª“¬{ĊĕZx ®‘°‡—h×ø{čvZ ®´{ÙĬZx ''¡­—{ÇĕZx ''d 'hĻnŀnŐ{ýňÌZx HHHHHHHHHHHHHHHH0>. ℹ

  47. (175+@554!>C978DC /0@07:;0<=2::270.:8 =;00/ ;,20=;00/ 49=423>=

  48. None
  49. (175+@554!>C978DC*E<5C /0@07:;0<=2::270.:8 =;00/ /:.= 49=423>= <?70=

  50. .52­¯”ƶ𳟨±¾—§Ÿ 24>3?-.:8 > 6 =;00/ -7:- 8,=>0< /:.= -0=>;<,.>4.0=<?70=+49><:8/

  51. o]wŽ—½Äx &5DG?B;śŝwûįċŘ ✓

  52. ¿—“Ÿ¨wĪŒł‡f ;  Reduce number of HTTP requests ⬅ ⬅

    ⬅ ⬅ ⬅ ⬅ ⬅ ?>31D5>1D5 +++@B9D5C 1D1-*!
  53. ¿¡ÆŸw› Œł‡f - Image - Optimized Minified, Gzipped = Text

    = %  $$€$ ▻ ▻▻ ▻ ▻▻
  54. ~gxšŸ­wŨV ċ،űĽdpV^ ?

  55.  0 + -  ␡ !:,/ 4=;7,C -C9>7 7:=0

    94>4,7
  56. 16.666...  =C  (+

  57. (+r¿¯Á¥¼Áƨ ©œ¯ÔpbÞUhĖŏi ĝg ×®Ÿ°“¬Zx D  %'{¾a]pgi Ÿ°´§hÄē{ 8=cČm[x #

    %'1<,80;0<=0.:9/
  58. °¾‘œw ¯ÁÆ·ux ĴRtáʼn[Ŵ~npV‰  $?14 +3B9@D $1I?ED (19>D F5>D =C

    '! '!
  59. ¯ÁÆ·áʼnwŇĜŒ ,9=5<9>5qŔŶf‰ ' (4807490<,80=

  60. DEMO

  61. ?=@1B56B1=5C@5BC53?>4 1<,80=;0<=0.:9/,;;=;:>.:8

  62. Render (19>D $1I?ED (- ħōáʼnuoVp

  63. ??7<58B?=51>1BI ýùhăįR’ńUõĿXyx ʼnėĮ”´¯hŅÌqńM Mzsx#423>7C?47/ŗĆûüùŘ ŠL\IšMHWYcŸL\I

  64. Heavy Painting ƅV´Ä¨

  65. ´Ä¨šŸ¨w ůø -  Big Image Heavy CSS ",) #%2(

    #,)%76,))7 )5*351%2'),)'/0-67*357,)3&-0)$)&
  66. ă\VōÝr¿› -

  67. *.u‰ōÝ¿› wšŸ¨ # + ▻ 3*=<1-90 

  68. éÒh†ˆx›Æ¬Æ›©qŸ^ # ⬅  + ⬇ +5BF5B

  69. ƏűÝĐëu†‰› ÿ  ▪ ▻ īĂ ÀcIŏġiÀgfx

  70. įĔuŜşc[ėůt¿¡ÆŸƗ  ▪ •†—ĦĖÁ ‹§›¯ †´žŽ¬}¯ H H H 

    )´” ífehIJœ ▪
  71. ƅV++wƂçäŌ 

  72. sŠ[ƅV±Â­§Z ŔŶdt[‡Œf '

  73. , !&+.$,'&, %''& .== 0B;.:8 8::9

  74. DEMO

  75. 2 C57,.*,,.2.7*9.- D,536581914/ C4*+2.,54914:5:8 D6*/.7.6*14914/

  76. 2 +5=80*-5<kŽTQ[Z "*/.6*149913.M£¡

  77. ++šŸ¨wIJųG9D8va ì

  78. +;9152E775B ôĖçąhŋĶrIĸÿŗ¡±Ÿ|¯ŘRıOx

  79. 454. 38 +5=80*-5< 38 +57-.77*-1:8  38 -599.-+57-.7  38

    80*-5<-599.-  38 80*-5<7*-1:8   38 7*-1:8-599.-  38 *2231=  38 @BDRK)&8++)5jPvoKBWAp‡PceZ]KQTJLxDl}FYRG
  80. 454.  +5=80*-5<  +57-.77*-1:8  -599.-+57-.7  80*-5<-599.- 

     80*-5<7*-1:8   7*-1:8-599.-   *2231=  ⬅ ⬅ ⬅ 3,@07:2,C?8?=,>:.:8 /0@07:; ;0<1:<8,9.0 0 .==+<09/0<492+A4>3+=64,+/0-?220<3>87
  81. ¹¬ÀxņuítV ª˜€řķ¸dQŒÅYR_ ?¿I@–Œ²iěQgáÚZx íiÑįcLyjIM`\ĖÁgZx ëďI#0>A:<6‰—dàĞ ":-470/0@4.0=,<07:A=;0. +

  82. ++wbäŌxŲōŏu D

  83. Layout Thrashing ěùdtVÁŽ‘¨áʼnwťˆŽd

  84. ­¾¾¥—ŸqUˆ[mt ÁŽ‘¨áʼnwöƍ ⚠ :9E>C:?>,76,-:?>4>

  85. ůŞwÁŽ‘¨ƓàƄŦÅ¿¯ÂÆr‚Ɣ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ¶¬SY ³®k¾²SaTÂ
  86. 917>?C9>76?B354CI>38B?>?EC<1I?EDC ()9)034)56+33+0)'31',531)()9)034)573306(3'6()13673318',0%<387

  87. DEMO

  88. 2 DDMº°SY ‹À\¤– ⚠

  89. öƍwÀƱwÊq ŹanpV‰ar ❓ :<.0/'C9.3<:9:?=7,C:?>

  90. ÁÄ£¿Ä˜w¯ÂÆ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻
  91. đĵĚüwůļ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ‘”Œ[L `SI\
  92. àŲŚuÔWÁŽ‘¨ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ 2 ƒ_Yb\I[ jLelj
  93. ēåÁŽ‘¨awƇQŸ—¿±¨x°Â¥— "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ ƘÍÍÍÍÍÍÍÍÍƘ ƖP?B354$1I?EDPƕ ƙ/0/0/0/0/0/0/0ƙ
  94. Ÿ¾¥Ä˜ÁŽ‘¨wŎŋ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ Ņ……………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ 2 Oh 2 Oh 2 Oh 2 Oh 2 OhÂ
  95. ņĈw±Â­§zw *514 .B9D5qŎŋ ⚠

  96. 2 ©¦«—k ¸Kg

  97. JK öƍwÀƱ // 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); }
  98. JK Ćāu¶¸táʼn --- 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 --- ... .. 2 œHWVLe žkXPid 2 UJLEˆ¶¬ S\I[ :::<3878&)'31:%7',9#$- 
  99. Ÿ¾¥Ä˜ÁŽ‘¨à "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

      ▻ ▻ ▻ ▻ ▻ ▻ Ņ……………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ Å………………………Å ÄD57,.-*>5:9Dà Æ()()()()()()()Æ 2 Oh 2 Oh 2 Oh 2 Oh 2 OhÂ
  100. JK öƍut‰±Â­§Å¸¡¥© 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 /)00)+386'31.    0%<3874)5*351%2')
  101. GPU ƐĿwšŸ¨

  102. B1@893C(B?35CC9>7->9D 5,A464;0/4,:<2 A464 <,;34.=+%<:.0==492+)94>

  103. aaxņu.52#9D 8B?=9E=µÆ¨wŵ ℹ

  104. Žª¸Æ½Är ´Ä¨u‰(- ❓

  105. µž½Äwŗê

  106. řĠãw´Ä¨

  107. ¢¶ÆŽª¸Æ½Äwýó

  108. ĺ¯ÁÆ·bruŽ¬¬¬u

  109. ++>9=1D9?>Cx tiń‡Zuê^wZ  948,>4:9-,=0/7,C0<;<:8:>4:9

  110. óĞÁ»Æu§—Ÿ¤ºŒwh‰ ()9)034)56+33+0)'31)9)276-36)66-326   9)03'-7<'32*'319)03'-7<  48&0-'6',)(80)()7%-0 

  111. óĞÁ»ÆÈq§—Ÿ¤ºŒêZf 2 qxrB ◅ ◅ ◅ ()9)034)56+33+0)'31)9)276-36)66-326   9)03'-7<'32*'319)03'-7<

     48&0-'6',)(80)()7%-0 
  112. (-u§—Ÿ¤ºŒ Żſdpáʼn 2 mv~]¯M tnqs{ "&]­¥‚ "&]­¥‚ ▻ - ▻

    wpo| NR ´ ¹› EYVPnzQ #kK ˆ„Ol}KCXŠ
  113. „ˆf]‰rżV ⚠ —®…´gfx¡±•~{ňĕZxd ôĖĦh·ÂÒRÉĄĘgöÖZxVdRLx RILmwéMĤØgňĕZxd %)lhŇľłRĽVw Ÿƒ´¥²º¶gafRx ==429>4807,C0<;<:8:>4:9

  114. óĞÁ»Æ[ěùhg ŋĞcŠ‰ÌĩrċŘ  ..4/09>,77,C0<.<0,>4:9

  115. DEMO

  116. DEMO

  117. Compute "1F1+3B9@D 1B2175?<<53D9?> %5=?BI$51; ŅŚÅ¿¡ÆŸ

  118.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

  119.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

  120. "1F1+3B9@D (-(B?Ƒ<5B ' ÄēhäıgQQ`]úŊ

  121. DEMO

  122.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶

  123. ,9=5<9>5%5=?BI '2:53D?E>D5BC ' ¨©®r„ Ž‡—øhóğ

  124. DEMO

  125. ÞúŏuöƍwU‰ ­¢ÆÄwŠÏ ' (4807490hĈì{ĉòċUĵx

  126. wa]ˆĸ­¢ÆÄ hŒêRŔZTx 49.0;>4:90B;7,490/.:8

  127. –³ÆžšÁ—½Ä rx „ Ž‡—h·ĴfÎĐQv ¨©®őÛ{ĸ÷Zxăā F¯²œhuNgåÃhŠ¦{ HİËcÏōYbUyx«”  ,<-,20:770.>4:9

  128. [ĉūcŠpV‰Ƈ ÐwáʼnxÜĶf‰ ⚠

  129. [ =CwÊwĪèŒ ģnpVnpd~W  $,7169 *>5:9 "*149 =C?F5B CD1BD

  130. (B5<<?31D5~kx '2:53D(??<tswċŘ &8-0(2):+%1)6'31+%5&%+)'300)'735*5-)2(0<'3() :::,710 53'/6'31)278735-%0664))(67%7-'1)143306 ℹ

  131. ƉĹ­¢ÆÄ Š¦R×ÏXyfM -7:290A<074..:8   ?=492.3<:80/0@07:;0<>::7=>:ŕ9/808:<C70,6=

  132. ¸¹¿¿Æ—rx ĸ÷XyfM¨©®őÛRĎmw ïJgģSőÛRčxĒļ F 'gPMbiLxĠhİďĒļ HŠ¦ißfwæfwĎmxqh "08:<C!0,6= ℹ

  133. ✓Ýø‰´¡hijŎfĪnÒM ✓ÈŌČn$"h£²—®™´ ✓„ Ž‡—ŊhñĔÎĐ ✓.:9=:707:2feguxÅÊ .:/492=8,=34928,2,D490.:8  A<4>4921,=>808:<C0Ŗ.409>5,@,=.<4;> 0>.

  134. *53?B4 51@ <<?31D9?>C ' ½Ç”´¯{ĥÍgWĨ¹

  135. DEMO

  136. 2 °ÀÆyz}‰f’Y„ ˜ÁƉf’Yµ™ b

  137. Conclusion ~r

  138. ŠÏdkòůŞuoVp ă~ZuĥˆŽˆ 

  139. .52­¯”ƶğŒñ‰ ůŞ  &5DG?B; # ?=@ED5  *5>45B

  140.  &5DG?B; AţŤŏuŲŃf{d Aûįwċ،Ėďf‰

  141.  *5>45B A++wƂŭƎuŀě AÁŽ‘¨wŎŋ‚ŀě A(-áʼnxĝƅuġW

  142. # ?=@ED5 AĻudf]t^p'# A¦ÆÀŒØXyŰp A™Æ·rZx®Žtöƍ

  143. ,9=5<9>5xŖ¦ÆÀ ũRtöƍŒŎŰq\‰ M

  144. (0(534&3;86)5'327)27'318  7%0/6()973306  -2();,710 2 "$ 2 "& 2

    ˜¨ 2  2 yz}
  145. A.52ĢŬwŻŌ[Ď[‰ AĉūŊþwĂĴë Aåƈr­¯”ƶğ + >F #

  146. .52ĢŬqğVŤ`‰t‡ f_u€{\ƒ ?

  147. )E5CD9?>C 8DD@ 18?=E 18?=E 79D8E23?= 18?=E ⌂

  148.  ,774:::‰-'/5'314,37367&-6%%'6     ,774:::‰-'/5'314,373667)9)2()4303   

     ,774:::‰-'/5'314,3736)4636    ,774:::‰-'/5'314,3736.3,22-):%0/)5      ,774:::‰-'/5'314,3736%0)6/    ,774:::‰-'/5'314,3736        ,774:::‰-'/5'314,37360%',0%2,%5(<      ,774:::‰-'/5'314,3736169+   ,774:::‰-'/5'314,3736861-66-32     ,774:::‰-'/5'314,3736.(,%2'3'/    ,774:::‰-'/5'314,37367,6/<7      ,774:::‰-'/5'314,3736,%26)0   %3:>:<0/4>=G