Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High Performance Web Frontend 2013 秋

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周りをより薄くしたりと、構成の配分に調整が加えられています。

Ayumu Sato

September 14, 2013
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

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

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

    7:=0 94>4,7 2 D†§•] “»R€¢eL ♥
  3. ¿—“Ÿ¨wĪŒł‡f ;  Reduce number of HTTP requests ⬅ ⬅

    ⬅ ⬅ ⬅ ⬅ ⬅ ?>31D5>1D5 +++@B9D5C 1D1-*!
  4. ´Ä¨šŸ¨w ůø -  Big Image Heavy CSS ",) #%2(

    #,)%76,))7 )5*351%2'),)'/0-67*357,)3&-0)$)&
  5. 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
  6. 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
  7. đĵĚüwůļ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D

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

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

      ▻ ▻ ▻ ▻ ▻ ▻ ƘÍÍÍÍÍÍÍÍÍƘ ƖP?B354$1I?EDPƕ ƙ/0/0/0/0/0/0/0ƙ
  10. Ÿ¾¥Ä˜ÁŽ‘¨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Â
  11. 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); }
  12. 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#$- 
  13. Ÿ¾¥Ä˜ÁŽ‘¨à "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Â
  14. 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')
  15. (-u§—Ÿ¤ºŒ Żſdpáʼn 2 mv~]¯M tnqs{ "&]­¥‚ "&]­¥‚ ▻ - ▻

    wpo| NR ´ ¹› EYVPnzQ #kK ˆ„Ol}KCXŠ
  16.  ,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