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

Web Frontend Rendering Performance Knowledge & ...

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

Ayumu Sato

November 30, 2013
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

  1. “ – ϛϦඵ - ༻ޠղઆࣙయ | NTTPCίϛϡχέʔγϣϯζ “཮্ڝٕ΍ڝӭͰ΋λΠϜͷܭଌ͸ 100෼ͷ1ඵ ·Ͱɻ

    ͔͠͠ɺౙقछ໨ͷϦϡʔδϡ(ͦΓ)΍ࣗಈंϨʔεͷ F1 ͳͲ͸ 1000෼ͷ 1ඵ·Ͱܭଌ͍ͯ͠Δɻ”
  2. {} /* ͍ΘΏΔϘλϯ */ ! .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
  3. {} /* ͍ΘΏΔϘλϯ */ ! .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
  4. {} 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&"%ʜ
  5. {} 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
  6. {} 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&ʜ
  7. &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/
  8. OPOF   CPYTIBEPX  CPSEFSSBEJVT  EPUUFECPSEFS  TIBEPX

    EPUUFE  TIBEPX SBEJVT  SBEJVT EPUUFE  BMMNJY  http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html
  9. ⋆ ;▻ PQBDJUZO ▪ > USBOTMBUF Y Z ? @

    TDBMF O ▪ ↻ SPUBUF OEFH (16Ͱߴ଎ʹॲཧͰ͖Δ ඳըσʔλͷ࠶సૹ͕ෆཁ
  10. "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
  11. 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/ ϫʔΫϚϯ