Web Frontend Rendering Performance Knowledge & Tips

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

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

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

ZFBSTBHPʜ Ѫ͢΂͖Web

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

ؔ৺ΛҾ͘8FCαΠτ͸ॏ͘ͳΓ͕ͪ ϨϯμϦϯάͱ͔ εΫϩʔϧͱ͔ Ξχϝʔγϣϯͱ͔ ͱʹ͔͘৭ʑ ݁ہ

NT milli second

“ – ϛϦඵ - ༻ޠղઆࣙయ | NTTPCίϛϡχέʔγϣϯζ “཮্ڝٕ΍ڝӭͰ΋λΠϜͷܭଌ͸ 100෼ͷ1ඵ ·Ͱɻ
͔͠͠ɺౙقछ໨ͷϦϡʔδϡ(ͦΓ)΍ࣗಈंϨʔεͷ F1 ͳͲ͸ 1000෼ͷ 1ඵ·Ͱܭଌ͍ͯ͠Δɻ”

ਓؒ͸NTͱNTͷҧ͍Λײ͡Δ NT͔Βίϯτϩʔϧ͢Δ NT୯Ґͷ޻෉͕ εϜʔζͳಈ͖Λ࡞Δ NTͷ౒ྗ

" & ␡ -PBE %JTQMBZ 6TJOH $MPTF *OJUJBM

　スムーズで快適な操作感 ♥ " & ␡ -PBE %JTQMBZ 6TJOH
$MPTF *OJUJBM

4FUVQ '145JNFMJOF #SPXTFS3FOEFSJOH $BTF4UVEZ $PODMVTJPO "HFOEB

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

'14ͷ͸ͳ͠ '145JNFMJOF

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

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

NTGNTG ʜ

($ 4DSJQU -BZPVU 1BJOU &WFOU NT

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

ϨϯμϦϯάϑϩʔͱΑ͋͘Δ໰୊ #SPXTFS3FOEFSJOH

ࠓճ͸8FC,JUΛऔΓѻ͍·͢ 3FOEFSJOH&OHJOF http://myakura.github.io/n/webkit4devs.html

ϨϯμϦϯάϑϩʔ 3FOEFSJOH'MPX )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS 5SFF -BZPVU
1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶

ϨϯμϦϯάॲཧͷݩʹͳΔ΋ͷ )5.-$44 1

5IF#VUUPO

{} /* ͍ΘΏΔϘλϯ */ ! .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

{} /* ͍ΘΏΔϘλϯ */ ! .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

%0.ͱ$440.͔Βඳը͢΂͖ཁૉΛπϦʔԽ͢Δ 3FOEFS5SFF )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS 5SFF -BZPVU
1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶

& ϨϯμʔπϦʔΛݩʹཁૉΛ഑ஔ͢Δ -BZPVUʁ )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS 5SFF
-BZPVU 1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶ &

5JNFMJOF'SBNFT FPSͷਪҠͱڞʹɺϑϨʔϜ಺ͷॲཧ಺༁Λ஌Δ

https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/

-BZPVUॲཧͷա౓ͳൃੜ -BZPVU5ISBTIJOH

ɹ͕࿈ଓͨ͠ ྑ͘ͳ͍ঢ়ଶ ⚠

εΫϦϓτʹΑΔϓϩύςΟΞΫηε 1SPQFSUZ"DDFTT )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS 5SFF -BZPVU
1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶

{} 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&"%ʜ

{} 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

{} 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&ʜ

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

ελΠϧ΍ը૾σʔλΛඳը͢Δ 1BJOUʁ )5.- $44 $440. %0. +BWB4DSJQU 3FOEFS 5SFF -BZPVU
1BJOU ▶ ˛ ˝ ▶ ▶ ▶ ▶ ▶

5 %SBX *NBHF 6 4UZMFT 3BTUFSJ[F ▹ %FDPEF 3FTJ[F %JTQMBZ
&

$POUJOVPVT1BHF 3FQBJOUJOH ը໘ͷඳըʹԿms͔͔͍ͬͯΔͷ͔Λ஌Δ

http://css3exp.com/moon/

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

OPOF CPYTIBEPX CPSEFSSBEJVT EPUUFECPSEFS http://havelog.ayumusato.com/develop/performance/e560-
css_rendering_with_skia_debugger.html

OPOF CPYTIBEPX CPSEFSSBEJVT EPUUFECPSEFS TIBEPX
EPUUFE TIBEPX SBEJVT SBEJVT EPUUFE BMMNJY http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html

7 "SFB ྖҬͷେ͖͞ $PNQMFYJUZ ෳࡶ͞ ␡

$ISPNJVN΍"OESPJEͷ%ඳըΤϯδϯ ࣮ߦ͞ΕͨඳըίϚϯυͷཤྺΛݟΕ͹ ελΠϧͷෳࡶ͕͞෼͔Δ 4LJB ⚙

Topcoat http://bench.topcoat.io/

Ћ get more smoothness

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

ը૾ॲཧʹಛԽͨ͠ϓϩηοα 8IBUJT(16 3D ゲームの必要スペックでよく見るアレ？ VRAMが沢山あると良いヤツ？ハードウェア
アクセラレーション？ CSSのハックで聞いたことある？

http://www.nvidia.com/object/what-is-gpu-computing.html

http://www.paulirish.com/2012/why-moving-elements-with- translate-is-better-than-posabs-topleft/

https://developers.google.com/events/io/sessions/325091862

$PNQPTJUJOH-BZFS PO(16 /PSNBM-BZFS FWFSZ$16

(165FYUVSF 更新があれば描画データを GPUに再転送描画データをキープしといて GPU上で合成

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

⋆ ;▻ PQBDJUZO ▪ > USBOTMBUF Y Z ? @
TDBMF O ▪ ↻ SPUBUF OEFH (16Ͱߴ଎ʹॲཧͰ͖Δ ඳըσʔλͷ࠶సૹ͕ෆཁ

"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

4IPX$PNQPTJUFE -BZFS#PSEFST GPU߹੒͞Ε͍ͯΔϨΠϠʔΛՄࢹԽ͢Δ

ϨΠϠʔͷҙਤ͠ͳ͍িಥʹΑΔ$PNQPTJUJOH "DDJEFOUBM0WFSMBQ

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

SPUBUF Ξχϝʔγϣϯத

BTTVNFE0WFSMBQ ॏͳͬͯΔͬΆ͍

έʔεελσΟ $BTF4UVEZ

+BOL#VTUJOH B ύϑΥʔϚϯεͷ્֐ཁҼΛऔΓআ͘

ͨͱ͑͹εΫϩʔϧ࣌ͷ ϖΠϯτύϑΥʔϚϯεΛྫʹߟ͑Δ 4NPPUI

'14લޙͰ΋҆ఆ͍ͯ͠Ε͹ εϜʔζͳૢ࡞ײΛಘΔ͜ͱ͕Ͱ͖Δ '14 '14

+BOLϙΠϯτ͕͋Δͱ ૢ࡞ͷҾ͔͔ͬΓɾҧ࿨ײʹͭͳ͕Δ '14 '14

http://jankfree.org/jank-busters-io-2013/template.html#15 ϨϯμϦϯάύϑΥʔϚϯεΛམͱ͢+BOL ෆཁͳϖΠϯτʹͭͳ͕Δ QPTJUJPOpYFE PWFSqPXTDSPMM IPWFSޮՌ UPVDIϦεφʔͷॲཧ ॏ͍ϖΠϯτʹͭͳ͕Δ ෳࡶͳݟͨ໨ͷ$44 ը૾ͷσίʔυͱϦαΠζ
େ͖͗͢ΔແବͳۭϨΠϠʔ

+BOLϙΠϯτΛղফ͢Δʹ͸ ݪҼΛಛఆɾରॲ͢Δϊ΢ϋ΢͕ඞཁ +BOL +BOL

๭ϓϩδΣΫτ j

ファーストビュー下にいくとき必ずスクロールが一度引っかかるような･･･ (※iPhone4にて) 本人 ❓

ϑΝʔετϏϡʔNT ໿ը໘ԼNT

ϑΝʔετϏϡʔNT ໿ը໘ԼNT border-radius + dashed border

νϡʔχϯάલNT νϡʔχϯάޙNT border-radiusを消してみた

$44ͷ࢓ࣄ͗͢͠஫ҙ CSSͰग़དྷΔ͜ͱ͔Βٯࢉͯ͠ෳࡶʹ͢Δͷ΋ة͏͍ ⚠

๭ϓϩδΣΫτ2 p

この(グラデや画像が山盛りな) ページを開いて暫くするとブラウザが落ちるんです！ X-( 同僚 ❓

ޙ೔ ༨༟ͳ͔ͬͨͷͰɺ΍΍εϧʔؾຯରԠͰͨ͠

bodyにおまじないCSSを適用したら直りました :-) 同僚 ℹ

{} ! ! ! ! body { -webkit-backface-visibility:hidden; } ͓·͡ͳ͍ͷ಺༰

0I Σ(´Д`;)

{} ! ! ! ! body { -webkit-backface-visibility:hidden; } ͓·͡ͳ͍ͷΖ͍ͷ಺༰
⬆ #0%:·Δ͝ͱ(16$PNQPTJUJOHͯ͠Δ

(165FYUVSF 更新があれば描画データを GPUに再転送描画データをキープしといて GPU上で合成広域に適用する ↓ 常に描画内容が更新される
↓ GPUへの再転送コストが高くなる ↓ 描画処理に副作用がでる可能性!!

(16͸ສೳༀͰ͸ͳ͍ ո͍͠ϓϩύςΟͰԿͱͳ࣏ͬͨ͘ = ෭࡞༻Ωέϯ ⚠

๭ϓϩδΣΫτ3 x

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

܁Γฦ͞ΕͨϘλϯ͸ɺ͢΂ͯಉ͡ϨΠϠʔʹ͋Δ શϘλϯ͕ಉ࣌ʹ$PNQPTJUJOH͞Ε͍ͯͨ "OJNBUJPOͷτϦΨʔDMBTTʹ[JOEFYΛՃ͑ͨ ௚ͬͨ ר͖ࠐΈʹΑͬͯ(16΁ͷςΫενϟసૹྔ͕ɹɹ ଟ͘ͳͬͨ͜ͱͰϥά͕ൃੜͨ͠ʁʢԾઆʣ ▾ ▾
▾ ▾

࣌ʹ͸ର঱ྍ๏΋ඞཁ ؾ͍ͮͨͱ͖ʹ͸࣏͕ࠜ೉͍͠έʔε΋গͳ͘ͳ͍ ⚠

Financial Times http://coding.smashingmagazine.com/2013/05/23/building-the-new- ﬁnancial-times-web-app/

'MFYJCMF#PY-BZPVU.PEVMFͷར༻ʹΑͬͯ -BZPVUॲཧͷίετ͕ߴ͘ͳͬͨࣄྫ ৽͍͠࢓༷ͷ$44Λಋೖ͕ͨ͠ ϒϥ΢β࣮૷͕੒ख़͍ͯ͠ͳ͔ͬͨέʔε

Flexbox layout isn't slow http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow

Apple http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home- Page/

USBOTMBUF; ϋοΫ͕ɺଟ਺ͷඇΞΫςΟϒͳཁૉʹ΋ ద༻͞ΕΔ͜ͱͰ$PNQPTJUJOH͕ߴίετʹͳ͍ͬͯͨ ਌ཁૉʹඞཁे෼ͳUSBOTMBUF; ϋοΫ͕͋ͬͨͷͰ ωετͨ͠ཁૉ಺ͷݸผϋοΫΛղআͯ͠վળͨ͠

Flickr http://code.ﬂickr.net/2013/06/04/adventures-in-jank-busting-parallax- performance-and-the-new-ﬂickr-home-page/

యܕతͳεΫϩʔϧύϥϥοΫε࣮૷ͷ '14Λ5JNFJOFΛݩʹվળ͢Δࣄྫ NBSHJO5PQ΍CBDLHSPVOEQPTJUJPOʹ୅Θͬͯ USBOTMBUFE΍USBOTMBUF;ʹΑΔ(16߹੒Ͱվળ

Pinterest http://www.smashingmagazine.com/2013/06/10/pinterest-paint- performance-case-study/

QPTJUJPOpYFEͳϔομʔ6*ʹର͢Δ USBOTMBUF; ద༻ʹΑΔ(16߹੒ͷద༻ ֎ཁૉʹCPYTIBEPX಺ཁૉʹCPSEFSSBEJVTΛ ෼͚ͯద༻͢Δ͜ͱͰɺ$44ͷඳըෛՙΛܰݮͨ͠ εΫϩʔϧ࣌ʹIPWFS͕൓Ԡ͢Δ͜ͱʹΑΔෛՙΛ σΟϨΠΛ͔͚ͨΓɺදݱΛܰͯ͘͠ରԠͨ͠

·ͱΊ $PODMVTJPO

w ·ͣ͸λΠϜϥΠϯΛݟΔ͜ͱ͔Β࢝ΊΑ͏ w ύϥϥοΫε͸ɹʹؾΛ͚ͭΑ͏ w $44͸࢖͍͗͢ͳ͍Α͏ʹ͠Α͏ w (16$PNQPTJUJOH͸࢖͍ॴ͕ΩϞʂ w ઌਓͷ஌ܙ͸஌͓ͬͯ͜͏ʂ
͓͞Β͍ ⚠

w ύϑΥʔϚϯεͷ໰୊͸ৗʹγϏΞ w ࣮ߦ؀ڥͱڞʹ8FC։ൃͷ෯͕޿͕͍ͬͯΔ w 8FCٕज़ͷͻͱͭͱͯ͠ϊ΢ϋ΢ΛਂΊΔ΂͖ w ࣗ෼ͳΓʹΩϟονΞοϓ͠Α͏ w ΑΓΑ͍8FCମݧΛʂ
·ͱΊ

Thank you IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂

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/ ϫʔΫϚϯ

Web Frontend Rendering Performance Knowledge & ...

Web Frontend Rendering Performance Knowledge & Tips

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript