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. 4.

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

    VU Ž‹jqskW}€ ~ˆyX lmgtosiTY™
  2. 15.
  3. 38.
  4. 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
  5. 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
  6. 62.
  7. 67.

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

      ▻ ▻ ▻ ▻ ▻ ▻ = – ˜‘VG ZNDW‡
  8. 68.

    ÓŚņqÉT»‹‰Œ¢ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ = ‰YT\WDV eG`ge‡
  9. 69.

    Ă×»‹‰Œ¢^sŲP™‘¹¬¢t«¼Ÿ‘ #3H3,5D;BF !-&% ,, ,,(& (& +7@67D -D77 %3KAGF )3;@F

      ▻ ▻ ▻ ▻ ▻ ▻ ƃÄÄÄÄÄÄÄÄÄƃ ƁOAD576%3KAGFOƀ Ƅ12121212121212Ƅ
  10. 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Á
  11. 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); }
  12. 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 !
  13. 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Á
  14. 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*,
  15. 90.
  16. 91.

    ).q¡‘™ž´† ŤũalÔĹ = ix„X±H tkps€  $X®§ˆ %!  $X®§ˆ

    ! ▻ 6 ▻ {on… ”IM µ• »ž• KdaXz†Y#&vS •‘Ww‰SHc—
  17. 93.
  18. 95.
  19. 102.
  20. 104.
  21. 113.

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

    -2;97/ ./?/69:/; =996< =9 ŝ8. 7/79;B 6/+5<
  22. 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:=
  23. 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:=
  24. 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:=
  25. 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