Web Frontend Rendering Performance Knowledge & Tips

YouTube: https://www.youtube.com/watch?v=cBT1Are3jXE

HTML5 Conference 2013 http://events.html5j.org/conference/2013/11/ で利用したスライドです。本編45分。

パフォーマンス全般 ( Network, Render, Compute ) については High Performance Web Frontend 2013 秋 https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu もご参考ください。

Transcript

1. Web Frontend Rendering Per formance Knowledge & Tips )5.-
   $POGFSFODF
   $ZCFS"HFOU
   *OD
   
   "ZVNV
   4BUP
2. "ZVNV
   4BUP !BIPNV
   גࣜձࣾαΠόʔΤʔδΣϯτ
   ϑϩϯτΤϯυΤϯδχΞ
   IUUQBIPNV
3. !͋΄Ή
   ྘ͷνϟϥ͘ͳ͍ौ୩αϥϦʔϚϯ
   &YDFM
   ৬ਓͩͬͨΓϑϩϯτ։ൃͩͬͨΓ
   IUUQBIPNV
   ˡ
   ଓ͖͸8FCͰ ͞ͱ͏
   ͋ΏΉ
4. 
   ZFBST
   BHPʜ Ѫ͢΂͖Web
7. "OJNBUFE
   (*' NBSRVFF )5.- DBOWBT USBOTGPSN
   !LFZGSBNFT %)5.-
9. ؔ৺ΛҾ͘8FCαΠτ͸ॏ͘ͳΓ͕ͪ
   ϨϯμϦϯάͱ͔
   εΫϩʔϧͱ͔
   Ξχϝʔγϣϯͱ͔
   ͱʹ͔͘৭ʑ ݁ہ
10. NT milli second
11. “ – ϛϦඵ - ༻ޠղઆࣙయ | NTTPCίϛϡχέʔγϣϯζ “཮্ڝٕ΍ڝӭͰ΋λΠϜͷܭଌ͸ 100෼ͷ1ඵ ·Ͱɻ ͔͠͠ɺౙقछ໨ͷϦϡʔδϡ(ͦΓ)΍ࣗಈंϨʔεͷ F1 ͳͲ͸ 1000෼ͷ 1ඵ·Ͱܭଌ͍ͯ͠Δɻ”
12. ਓؒ͸NTͱNTͷҧ͍Λײ͡Δ
    NT͔Βίϯτϩʔϧ͢Δ
    NT୯Ґͷ޻෉͕
    εϜʔζͳಈ͖Λ࡞Δ NTͷ౒ྗ
13. " & ␡ -PBE %JTQMBZ 6TJOH $MPTF *OJUJBM
14. 　 スムーズで 快適な操作感 ♥ " & ␡ -PBE %JTQMBZ 6TJOH $MPTF *OJUJBM
15. 
    4FUVQ
    
    '14
    
    5JNFMJOF
    
    #SPXTFS
    3FOEFSJOH
    
    $BTF
    4UVEZ
    
    $PODMVTJPO
    "HFOEB
16. ϒϥ΢βͷ͖΋ͪʹͳͬͯߟ͑ΔͨΊʹ
    8FC,JU
    લఏؾຯ
    ͕ɺݪཧ͸େࠩͳ͍
    $BOWBTͷΰϦΰϦͨ͠࿩͸ͳ͍
    
    8FC(-ͱ͔ͷ࿩΋ͳ͍
    
    ւ֎ͷ(PPHMFSʹײँΛࠐΊͯ લஔ͖
17. '14ͷ͸ͳ͠ '14
    
    5JNFMJOF
18. ϦϑϨογϡϨʔτͱ'14 '14
    
19. , өըɾΞχϝ͸
    '14
    '14
    ෇ۙͰεϜʔζͬΆ͍ ҰൠతͳσΟεϓϨΠ͸
    ຖඵճ
    දࣔΛߋ৽͢Δ
    I[ '14
    ʹ΋ͳΔͱ͍ΘΏΔ
    ͵Δ͵Δಈ͘ήʔϜͷΠϝʔδ
20. NTG
    
    NTG ʜ
21. ($ 4DSJQU -BZPVU 1BJOU &WFOU NT
22. $ISPNFͳΒ$BOBSZ͕Φεεϝ
    ࠷৽ͷػೳ͕Πν଎͘࢖͑Δ
    ! ಈ͔ͳ͍೔͕͋ͬͯ΋ٽ͔ͳ͍ʢॏཁʣ %FWFMPQFS
    5PPM
    
    5JNFMJOF
31. ϨϯμϦϯάϑϩʔͱΑ͋͘Δ໰୊ #SPXTFS
    3FOEFSJOH
32. ࠓճ͸
    8FC,JU
    ΛऔΓѻ͍·͢ 3FOEFSJOH
    &OHJOF http://myakura.github.io/n/webkit4devs.html
33. ϨϯμϦϯάϑϩʔ 3FOEFSJOH
    'MPX )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶
34. ϨϯμϦϯάϑϩʔ 3FOEFSJOH
    'MPX )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶
35. ϨϯμϦϯάॲཧͷݩʹͳΔ΋ͷ )5.-$44 1
36. 5IF
    #VUUPO
37. {} /* ͍ΘΏΔϘλϯ */ ! .the_button { ! width: 200px; height: 50px; ! ! background: linear-gradient (top, #48a2fb, #005cc2); border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.6) } UIF@CVUUPODTT
38. {} /* ͍ΘΏΔϘλϯ */ ! .the_button { ! width: 200px; height: 50px; ! ! background: linear-gradient (top, #48a2fb, #005cc2); border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.6) } UIF@CVUUPODTT "QQMZ
    4UZMF -BZPVU 1BJOU
39. %0.ͱ$440.͔Βඳը͢΂͖ཁૉΛπϦʔԽ͢Δ 3FOEFS
    5SFF )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶
40. & ϨϯμʔπϦʔΛݩʹཁૉΛ഑ஔ͢Δ -BZPVUʁ )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶ &
41. <section> ▹ <h2> <p> <img>
42. <section> <p> <img> <h2> ▹ <section> <h2> <p> <img>
43. 5JNFMJOF
    
    'SBNFT FPSͷਪҠͱڞʹɺϑϨʔϜ಺ͷॲཧ಺༁Λ஌Δ
44. https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/
45. -BZPVUॲཧͷա౓ͳൃੜ -BZPVU
    5ISBTIJOH
46. ɹ
    
    
    ͕࿈ଓͨ͠
    ྑ͘ͳ͍ঢ়ଶ ⚠
47. εΫϦϓτʹΑΔϓϩύςΟΞΫηε 1SPQFSUZ
    "DDFTT )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶
48. {} function update(timestamp) { ! ! for (var m = 0; m < movers.length; m++) { ! movers[m].style.left = ( (Math.sin( ! movers[m].offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); } 3&"%
    
    83*5&
    
    3&"%
    
    83*5&
    
    3&"%ʜ
49. {} function update(timestamp) { ! ! for (var m = 0; m < movers.length; m++) { ! movers[m].style.left = ( (Math.sin( ! movers[m].offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); } 3&"%
    
    83*5&
    
    3&"%
    
    83*5&
    
    3&"%ʜ 83*5&
    -BZPVU
    JOWBMJEBUFE 3&"%
    'PSDFE
    MBZPVU
50. {} function update(timestamp) { var offsetTop = movers[m].offsetTop; ! for (var m = 0; m < movers.length; m++) { ! movers[m].style.left = ( (Math.sin( ! offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); } 3&"%
    
    83*5&
    
    83*5&
    
    
    83*5&ʜ
51. &MFNFOU
    clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetTop offsetWidth scrollHeight scrollLeft scrollTop scrollWidth innertText outerText getBoundingClientRects etc... .PVTF&WFOU
    layerX layerY offsetX offsetY ! 8JOEPX
    scrollBy scrollTo scrollX scrollY getComputedStyle ! 'SBNF
    %PDVNFOU
    
    *NBHF
    height width http://kellegous.com/j/2013/01/26/layout-performance/
52. ελΠϧ΍ը૾σʔλΛඳը͢Δ 1BJOUʁ )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS
    5SFF -BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶
53. 5 %SBX *NBHF 6 4UZMFT 3BTUFSJ[F ▹ %FDPEF
    3FTJ[F %JTQMBZ &
54. $POUJOVPVT
    1BHF
    3FQBJOUJOH ը໘ͷඳըʹԿms͔͔͍ͬͯΔͷ͔Λ஌Δ
55. http://css3exp.com/moon/
56. ෛՙͷߴ͍ɺෳࡶͳ$44 5PP
    DPNQMFY
    4UZMF
57. OPOF
    
     CPYTIBEPX
    
     CPSEFSSBEJVT
     EPUUFECPSEFS
    
     http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html
58. OPOF
    
     CPYTIBEPX
    
     CPSEFSSBEJVT
     EPUUFECPSEFS
    
     TIBEPX EPUUFE
    
     TIBEPX SBEJVT
    
     SBEJVT EPUUFE
    
     BMM
    NJY
    
     http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html
59. 7 "SFB
    ྖҬͷେ͖͞ $PNQMFYJUZ
    ෳࡶ͞ ␡
60. $ISPNJVN
    ΍
    "OESPJE
    ͷ
    %ඳըΤϯδϯ
    ࣮ߦ͞ΕͨඳըίϚϯυͷཤྺΛݟΕ͹
    ελΠϧͷෳࡶ͕͞෼͔Δ 4LJB ⚙
61. NT
62. NT
63. NT
64. Topcoat http://bench.topcoat.io/
67. Ћ get more smoothness
68. (16߹੒
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ (16
    $PNQPTJUJOH
69. ը૾ॲཧʹಛԽͨ͠ϓϩηοα 8IBU
    JT
    (16
    3D ゲームの 必要スペックで よく見るアレ？ VRAMが 沢山あると 良いヤツ？ ハードウェア アクセラレーション？ CSSのハックで 聞いたことある？
70. http://www.nvidia.com/object/what-is-gpu-computing.html
71. http://www.paulirish.com/2012/why-moving-elements-with- translate-is-better-than-posabs-topleft/
72. https://developers.google.com/events/io/sessions/325091862
73. $PNQPTJUJOH
    -BZFS
    PO
    (16 /PSNBM
    -BZFS
    FWFSZ
    $16
74. (16
    5FYUVSF 更新があれば 描画データを GPUに再転送 描画データを キープしといて GPU上で合成
75. ◅ ◅ ◅ 広い範囲を 再描画しないから スムーズ レイヤー丸ごとを 操作させるだけで サクサク移動
76. ⋆ ;▻ PQBDJUZ
    O ▪ > USBOTMBUF Y
    Z ? @ TDBMF O ▪ ↻ SPUBUF O
    EFH (16Ͱߴ଎ʹॲཧͰ͖Δ
    ඳըσʔλͷ࠶సૹ͕ෆཁ
77. "TTJHOUJNF
    -BZFS
    1SPNPUJPO
    translateZ scaleX rotateX rotateY rotateZ translate3d scale3d rotate3d backface-visibility: hidden ! ! "OJNBUJPO
    #BTFE
    -BZFS
    1SPNPUJPO
    transform: translate transform: opacity ! ! -PBEUJNF
    -BZFS
    1SPNPUJPO
    Plugin iFrame Video Canvas WebGL http://velocityconf.com/velocity2013/public/schedule/detail/31377
78. 4IPX
    $PNQPTJUFE
    -BZFS
    #PSEFST GPU߹੒͞Ε͍ͯΔϨΠϠʔΛՄࢹԽ͢Δ
80. ϨΠϠʔͷҙਤ͠ͳ͍িಥʹΑΔ$PNQPTJUJOH "DDJEFOUBM
    0WFSMBQ
82. "OJNBUJPO
    #BTFE
    -BZFS 4UBDLJOH
    $POUFYU
    -BZFS https://developer.mozilla.org/ en-US/docs/Web/Guide/CSS/ Understanding_z_index/ The_stacking_context
84. SPUBUF
    Ξχϝʔγϣϯத
85. BTTVNFE0WFSMBQ
    ॏͳͬͯΔͬΆ͍
87. έʔεελσΟ $BTF
    4UVEZ
88. +BOL
    #VTUJOH B ύϑΥʔϚϯεͷ્֐ཁҼΛऔΓআ͘
89. ͨͱ͑͹εΫϩʔϧ࣌ͷ
    ϖΠϯτύϑΥʔϚϯεΛྫʹߟ͑Δ 4NPPUI
90. '14લޙͰ΋҆ఆ͍ͯ͠Ε͹
    εϜʔζͳૢ࡞ײΛಘΔ͜ͱ͕Ͱ͖Δ '14 '14
91. +BOLϙΠϯτ͕͋Δͱ
    ૢ࡞ͷҾ͔͔ͬΓɾҧ࿨ײʹͭͳ͕Δ '14 '14
92. http://jankfree.org/jank-busters-io-2013/template.html#15 ϨϯμϦϯάύϑΥʔϚϯεΛམͱ͢+BOL ෆཁͳϖΠϯτʹͭͳ͕Δ
    
    QPTJUJPO
    pYFE
    
    PWFSqPX
    TDSPMM
    
    IPWFS
    ޮՌ
    
    UPVDIϦεφʔͷॲཧ ॏ͍ϖΠϯτʹͭͳ͕Δ
    
    ෳࡶͳݟͨ໨ͷ$44
    
    ը૾ͷσίʔυͱϦαΠζ
    
    େ͖͗͢ΔແବͳۭϨΠϠʔ
93. +BOLϙΠϯτΛղফ͢Δʹ͸
    ݪҼΛಛఆɾରॲ͢Δϊ΢ϋ΢͕ඞཁ +BOL +BOL
94. ๭ϓϩδΣΫτ j
95. ファーストビュー下にいくとき 必ずスクロールが一度 引っかかるような･･･ (※iPhone4にて) 本人 ❓
96. ϑΝʔετϏϡʔ
    NT ໿ը໘Լ
    NT
97. ϑΝʔετϏϡʔ
    NT ໿ը໘Լ
    NT border-radius + dashed border
98. νϡʔχϯάલ
    NT νϡʔχϯάޙ
    NT border-radiusを 消してみた
99. $44ͷ࢓ࣄ͗͢͠஫ҙ CSSͰग़དྷΔ͜ͱ͔Βٯࢉͯ͠ෳࡶʹ͢Δͷ΋ة͏͍ ⚠
100. ๭ϓϩδΣΫτ2 p
101. この(グラデや画像が山盛りな) ページを開いて暫くすると ブラウザが落ちるんです！ X-( 同僚 ❓
102. ޙ೔ ༨༟ͳ͔ͬͨͷͰɺ΍΍εϧʔؾຯରԠͰͨ͠
103. bodyに おまじないCSSを 適用したら直りました :-) 同僚 ℹ
104. {} ! ! ! ! body { -webkit-backface-visibility:hidden; } ͓·͡ͳ͍ͷ಺༰
105. 0I Σ(´Д`;)
106. {} ! ! ! ! body { -webkit-backface-visibility:hidden; } ͓·͡ͳ͍
     ͷΖ͍ͷ಺༰ ⬆ #0%:·Δ͝ͱ
     (16
     $PNQPTJUJOH
     ͯ͠Δ
107. (16
     5FYUVSF 更新があれば 描画データを GPUに再転送 描画データを キープしといて GPU上で合成 広域に適用する ↓ 常に描画内容が更新される ↓ GPUへの再転送コストが高くなる ↓ 描画処理に副作用がでる可能性!!
108. (16͸ສೳༀͰ͸ͳ͍ ո͍͠ϓϩύςΟͰԿͱͳ࣏ͬͨ͘ = ෭࡞༻Ωέϯ ⚠
109. ๭ϓϩδΣΫτ3 x
110. いいねボタン(仮称)につけた アニメーションの開始に ラグがあるんだけど… :-( 上司 ❓
112. ܁Γฦ͞ΕͨϘλϯ͸ɺ͢΂ͯಉ͡ϨΠϠʔʹ͋Δ
     શϘλϯ͕ಉ࣌ʹ
     $PNQPTJUJOH
     ͞Ε͍ͯͨ
     "OJNBUJPOͷτϦΨʔDMBTTʹ
     [JOEFY
     ΛՃ͑ͨ
     ௚ͬͨ 
     ר͖ࠐΈʹΑͬͯ(16΁ͷςΫενϟసૹྔ͕ɹɹ ଟ͘ͳͬͨ͜ͱͰϥά͕ൃੜͨ͠ʁʢԾઆʣ ▾ ▾ ▾ ▾
113. ࣌ʹ͸ର঱ྍ๏΋ඞཁ ؾ͍ͮͨͱ͖ʹ͸࣏͕ࠜ೉͍͠έʔε΋গͳ͘ͳ͍ ⚠
114. Financial Times http://coding.smashingmagazine.com/2013/05/23/building-the-new- financial-times-web-app/
115. 'MFYJCMF
     #PY
     -BZPVU
     .PEVMF
     ͷར༻ʹΑͬͯ
     -BZPVU
     ॲཧͷίετ͕ߴ͘ͳͬͨࣄྫ ৽͍͠࢓༷ͷ$44Λಋೖ͕ͨ͠
     ϒϥ΢β࣮૷͕੒ख़͍ͯ͠ͳ͔ͬͨέʔε
116. Flexbox layout isn't slow http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow
117. Apple http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home- Page/
118. USBOTMBUF; 
     ϋοΫ͕ɺଟ਺ͷඇΞΫςΟϒͳཁૉʹ΋
     ద༻͞ΕΔ͜ͱͰ
     $PNQPTJUJOH
     ͕ߴίετʹͳ͍ͬͯͨ ਌ཁૉʹඞཁे෼ͳ
     USBOTMBUF; 
     ϋοΫ͕͋ͬͨͷͰ
     ωετͨ͠ཁૉ಺ͷݸผϋοΫΛղআͯ͠վળͨ͠
119. Flickr http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax- performance-and-the-new-flickr-home-page/
120. యܕతͳεΫϩʔϧύϥϥοΫε࣮૷ͷ
     '14Λ5JNFJOFΛݩʹվળ͢Δࣄྫ NBSHJO5PQ
     ΍
     CBDLHSPVOEQPTJUJPO
     ʹ୅Θͬͯ
     USBOTMBUFE
     ΍USBOTMBUF;
     ʹΑΔ(16߹੒Ͱվળ
121. Pinterest http://www.smashingmagazine.com/2013/06/10/pinterest-paint- performance-case-study/
122. QPTJUJPO
     pYFE
     ͳϔομʔ6*ʹର͢Δ
     USBOTMBUF; 
     ద༻ʹΑΔ(16߹੒ͷద༻ ֎ཁૉʹ
     CPYTIBEPX
     ಺ཁૉʹ
     CPSEFSSBEJVT
     Λ
     ෼͚ͯద༻͢Δ͜ͱͰɺ$44ͷඳըෛՙΛܰݮͨ͠ εΫϩʔϧ࣌ʹ
     IPWFS
     ͕൓Ԡ͢Δ͜ͱʹΑΔෛՙΛ
     σΟϨΠΛ͔͚ͨΓɺදݱΛܰͯ͘͠ରԠͨ͠
123. ·ͱΊ $PODMVTJPO
124. w ·ͣ͸λΠϜϥΠϯΛݟΔ͜ͱ͔Β࢝ΊΑ͏
     w ύϥϥοΫε͸
     
     ɹʹؾΛ͚ͭΑ͏
     w $44͸࢖͍͗͢ͳ͍Α͏ʹ͠Α͏
     w (16
     $PNQPTJUJOH
     ͸࢖͍ॴ͕ΩϞʂ
     w ઌਓͷ஌ܙ͸஌͓ͬͯ͜͏ʂ ͓͞Β͍ ⚠
125. w ύϑΥʔϚϯεͷ໰୊͸ৗʹγϏΞ
     w ࣮ߦ؀ڥͱڞʹ8FC։ൃͷ෯͕޿͕͍ͬͯΔ
     w 8FCٕज़ͷͻͱͭͱͯ͠ϊ΢ϋ΢ΛਂΊΔ΂͖
     w ࣗ෼ͳΓʹΩϟονΞοϓ͠Α͏
     w ΑΓΑ͍8FCମݧΛʂ ·ͱΊ
126. Thank you
     
     IUUQBIPNV
     
     
     !BIPNV
     
     
     HJUIVCDPNBIPNV
     ! ⌂
127. Thanks for amazing photos! http://www.flickr.com/photos/jdhancock/6151250051/ Ξώϧτϧʔύʔ http://www.flickr.com/photos/gbpublic/8790507077/ ΅͘Βͷ(F'PSDF http://www.flickr.com/photos/ryanready/4996206922/ ൶ը૾ http://www.flickr.com/photos/lac-bac/4678561929/ ϫʔΫϚϯ http://www.flickr.com/photos/lac-bac/4678562003/ ϫʔΫϚϯ http://www.flickr.com/photos/lac-bac/4678561879/ ϫʔΫϚϯ http://www.flickr.com/photos/lac-bac/4679194926/ ϫʔΫϚϯ