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

Web Frontend Rendering Performance Knowledge & Tips

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
November 30, 2013

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 もご参考ください。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

November 30, 2013
Tweet

Transcript

  1. Web Frontend Rendering Per formance Knowledge & Tips )5.-$POGFSFODF $ZCFS"HFOU

    *OD"ZVNV4BUP
  2. "ZVNV4BUP !BIPNV גࣜձࣾαΠόʔΤʔδΣϯτ ϑϩϯτΤϯυΤϯδχΞ IUUQBIPNV

  3. !͋΄Ή ྘ͷνϟϥ͘ͳ͍ौ୩αϥϦʔϚϯ &YDFM৬ਓͩͬͨΓϑϩϯτ։ൃͩͬͨΓ IUUQBIPNVˡଓ͖͸8FCͰ ͞ͱ͏͋ΏΉ

  4. ZFBSTBHPʜ Ѫ͢΂͖Web

  5. None
  6. None
  7. "OJNBUFE(*' NBSRVFF )5.- DBOWBT USBOTGPSN !LFZGSBNFT %)5.-

  8. None
  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 '145JNFMJOF #SPXTFS3FOEFSJOH $BTF4UVEZ $PODMVTJPO "HFOEB

  16. ϒϥ΢βͷ͖΋ͪʹͳͬͯߟ͑ΔͨΊʹ 8FC,JUલఏؾຯ ͕ɺݪཧ͸େࠩͳ͍  $BOWBTͷΰϦΰϦͨ͠࿩͸ͳ͍ 8FC(-ͱ͔ͷ࿩΋ͳ͍ ւ֎ͷ(PPHMFSʹײँΛࠐΊͯ લஔ͖

  17. '14ͷ͸ͳ͠ '145JNFMJOF

  18. ϦϑϨογϡϨʔτͱ'14 '14

  19. , өըɾΞχϝ͸'14 '14෇ۙͰεϜʔζͬΆ͍ ҰൠతͳσΟεϓϨΠ͸ ຖඵճදࣔΛߋ৽͢Δ I[ '14ʹ΋ͳΔͱ͍ΘΏΔ ͵Δ͵Δಈ͘ήʔϜͷΠϝʔδ

  20. NTGNTG ʜ

  21. ($ 4DSJQU -BZPVU 1BJOU &WFOU NT

  22. $ISPNFͳΒ$BOBSZ͕Φεεϝ ࠷৽ͷػೳ͕Πν଎͘࢖͑Δ ! ಈ͔ͳ͍೔͕͋ͬͯ΋ٽ͔ͳ͍ʢॏཁʣ %FWFMPQFS5PPM5JNFMJOF

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. ϨϯμϦϯάϑϩʔͱΑ͋͘Δ໰୊ #SPXTFS3FOEFSJOH

  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 "QQMZ4UZMF -BZPVU 1BJOU
  39. %0.ͱ$440.͔Βඳը͢΂͖ཁૉΛπϦʔԽ͢Δ 3FOEFS5SFF )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ॲཧͷա౓ͳൃੜ -BZPVU5ISBTIJOH

  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& -BZPVUJOWBMJEBUFE 3&"% 'PSDFEMBZPVU
  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. $POUJOVPVT1BHF 3FQBJOUJOH ը໘ͷඳըʹԿms͔͔͍ͬͯΔͷ͔Λ஌Δ

  55. http://css3exp.com/moon/

  56. ෛՙͷߴ͍ɺෳࡶͳ$44 5PPDPNQMFY4UZMF

  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  BMMNJY  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/

  65. None
  66. None
  67. Ћ get more smoothness

  68. (16߹੒ ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ (16$PNQPTJUJOH

  69. ը૾ॲཧʹಛԽͨ͠ϓϩηοα 8IBUJT(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. (165FYUVSF 更新があれば 描画データを GPUに再転送 描画データを キープしといて GPU上で合成

  75. ◅ ◅ ◅ 広い範囲を 再描画しないから スムーズ レイヤー丸ごとを 操作させるだけで サクサク移動

  76. ⋆ ;▻ PQBDJUZO ▪ > USBOTMBUF Y Z ? @

    TDBMF O ▪ ↻ SPUBUF OEFH (16Ͱߴ଎ʹॲཧͰ͖Δ ඳըσʔλͷ࠶సૹ͕ෆཁ
  77. "TTJHOUJNF-BZFS1SPNPUJPO translateZ scaleX rotateX rotateY rotateZ translate3d scale3d rotate3d backface-visibility:

    hidden ! ! "OJNBUJPO#BTFE-BZFS1SPNPUJPO transform: translate transform: opacity ! ! -PBEUJNF-BZFS1SPNPUJPO Plugin iFrame Video Canvas WebGL http://velocityconf.com/velocity2013/public/schedule/detail/31377
  78. 4IPX$PNQPTJUFE -BZFS#PSEFST GPU߹੒͞Ε͍ͯΔϨΠϠʔΛՄࢹԽ͢Δ

  79. None
  80. ϨΠϠʔͷҙਤ͠ͳ͍িಥʹΑΔ$PNQPTJUJOH "DDJEFOUBM0WFSMBQ

  81. None
  82. "OJNBUJPO#BTFE-BZFS 4UBDLJOH$POUFYU-BZFS https://developer.mozilla.org/ en-US/docs/Web/Guide/CSS/ Understanding_z_index/ The_stacking_context

  83. None
  84. SPUBUF Ξχϝʔγϣϯத

  85. BTTVNFE0WFSMBQ ॏͳͬͯΔͬΆ͍

  86. None
  87. έʔεελσΟ $BTF4UVEZ

  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 ෆཁͳϖΠϯτʹͭͳ͕Δ QPTJUJPOpYFE PWFSqPXTDSPMM 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. (165FYUVSF 更新があれば 描画データを GPUに再転送 描画データを キープしといて GPU上で合成 広域に適用する ↓ 常に描画内容が更新される

    ↓ GPUへの再転送コストが高くなる ↓ 描画処理に副作用がでる可能性!!
  108. (16͸ສೳༀͰ͸ͳ͍ ո͍͠ϓϩύςΟͰԿͱͳ࣏ͬͨ͘ = ෭࡞༻Ωέϯ ⚠

  109. ๭ϓϩδΣΫτ3 x

  110. いいねボタン(仮称)につけた アニメーションの開始に ラグがあるんだけど… :-( 上司 ❓

  111. None
  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. QPTJUJPOpYFEͳϔομʔ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/ ϫʔΫϚϯ