Web Frontend Rendering Performance Knowledge & Tips

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

View Slide

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

View Slide

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

View Slide

ZFBSTBHPʜ
Ѫ͢΂͖Web

View Slide

View Slide

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

View Slide

View Slide

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

View Slide

NT
milli second

View Slide

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

View Slide

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

View Slide

"

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

View Slide

　スムーズで
快適な操作感
♥
"

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

View Slide

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

View Slide

ϒϥ΢βͷ͖΋ͪʹͳͬͯߟ͑ΔͨΊʹ
8FC,JUલఏؾຯ ͕ɺݪཧ͸େࠩͳ͍

$BOWBTͷΰϦΰϦͨ͠࿩͸ͳ͍
8FC(-ͱ͔ͷ࿩΋ͳ͍
ւ֎ͷ(PPHMFSʹײँΛࠐΊͯ
લஔ͖

View Slide

'14ͷ͸ͳ͠
'145JNFMJOF

View Slide

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

View Slide

,
өըɾΞχϝ͸'14
'14෇ۙͰεϜʔζͬΆ͍
ҰൠతͳσΟεϓϨΠ͸
ຖඵճදࣔΛߋ৽͢Δ I[

'14ʹ΋ͳΔͱ͍ΘΏΔ
͵Δ͵Δಈ͘ήʔϜͷΠϝʔδ

View Slide

NTGNTG
ʜ

View Slide

($ 4DSJQU
-BZPVU
1BJOU
&WFOU
NT

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

5IF#VUUPO

View Slide

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

View Slide

{}
/* ͍ΘΏΔϘλϯ */
!
.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)
}
[email protected]
"QQMZ4UZMF
-BZPVU
1BJOU

View Slide

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

View Slide

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

&

View Slide

▹

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

{}
!
!
!
(Math.sin(
!
movers[m].offsetTop + timestamp / 1000
) + 1) * 500
) +'px';
}
}
3&"%83*5&3&"%83*5&3&"%ʜ

83*5&
-BZPVUJOWBMJEBUFE

3&"%
'PSDFEMBZPVU

View Slide

{}
var offsetTop = movers[m].offsetTop;
!
!
(Math.sin(
!
offsetTop + timestamp / 1000
) + 1) * 500
) +'px';
}
}
3&"%83*5&83*5&83*5&ʜ

View Slide

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

View Slide

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

View Slide

5
%SBX

*NBHF
6
4UZMFT
3BTUFSJ[F
▹
%FDPEF
3FTJ[F

%JTQMBZ
&

View Slide

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

View Slide

http://css3exp.com/moon/

View Slide

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

View Slide

OPOF

CPYTIBEPX

CPSEFSSBEJVT

EPUUFECPSEFS

http://havelog.ayumusato.com/develop/performance/e560-
css_rendering_with_skia_debugger.html

View Slide

OPOF

CPYTIBEPX

CPSEFSSBEJVT

EPUUFECPSEFS

TIBEPXEPUUFE

TIBEPXSBEJVT

SBEJVTEPUUFE

BMMNJY

http://havelog.ayumusato.com/develop/performance/e560-
css_rendering_with_skia_debugger.html

View Slide

7
"SFB ྖҬͷେ͖͞

$PNQMFYJUZ ෳࡶ͞

␡

View Slide

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

View Slide

NT

View Slide

Topcoat
http://bench.topcoat.io/

View Slide

View Slide

Ћ
get more smoothness

View Slide

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

(16$PNQPTJUJOH

View Slide

ը૾ॲཧʹಛԽͨ͠ϓϩηοα
8IBUJT(16

3D ゲームの
必要スペックで
よく見るアレ？

VRAMが
沢山あると
良いヤツ？

ハードウェア
アクセラレーション？

CSSのハックで
聞いたことある？

View Slide

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

View Slide

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

View Slide

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

View Slide

$PNQPTJUJOH-BZFS PO(16

/PSNBM-BZFS FWFSZ$16

View Slide

(165FYUVSF

更新があれば
描画データを
GPUに再転送

描画データを
キープしといて
GPU上で合成

View Slide

◅
◅
◅

広い範囲を
再描画しないから
スムーズ

レイヤー丸ごとを
操作させるだけで
サクサク移動

View Slide

⋆
;▻
PQBDJUZO
■
>
USBOTMBUF Y Z

?
@
TDBMF O

■
↻
SPUBUF OEFH

(16Ͱߴ଎ʹॲཧͰ͖Δ ඳըσʔλͷ࠶సૹ͕ෆཁ

View Slide

"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

View Slide

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

View Slide

View Slide

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

View Slide

View Slide

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

View Slide

View Slide

SPUBUF
Ξχϝʔγϣϯத

View Slide

BTTVNFE0WFSMBQ
ॏͳͬͯΔͬΆ͍

View Slide

View Slide

έʔεελσΟ
$BTF4UVEZ

View Slide

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

View Slide

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

4NPPUI

View Slide

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

'14

'14

View Slide

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

'14

'14

View Slide

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

View Slide

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

+BOL

+BOL

View Slide

๭ϓϩδΣΫτ
j

View Slide

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

View Slide

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

View Slide

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

border-radius
+
dashed border

View Slide

νϡʔχϯάલNT νϡʔχϯάޙNT

border-radiusを
消してみた

View Slide

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

View Slide

๭ϓϩδΣΫτ2
p

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

0I
Σ(´Д`;)

View Slide

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

View Slide

(165FYUVSF

更新があれば
描画データを
GPUに再転送

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

View Slide

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

View Slide

๭ϓϩδΣΫτ3
x

View Slide

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

View Slide

View Slide

܁Γฦ͞ΕͨϘλϯ͸ɺ͢΂ͯಉ͡ϨΠϠʔʹ͋Δ
શϘλϯ͕ಉ࣌ʹ$PNQPTJUJOH͞Ε͍ͯͨ
"OJNBUJPOͷτϦΨʔDMBTTʹ[JOEFYΛՃ͑ͨ
௚ͬͨ

ר͖ࠐΈʹΑͬͯ(16΁ͷςΫενϟసૹྔ͕ɹɹ
ଟ͘ͳͬͨ͜ͱͰϥά͕ൃੜͨ͠ʁʢԾઆʣ
▾
▾
▾
▾

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

·ͱΊ
$PODMVTJPO

View Slide

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

View Slide

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

View Slide

Thank you
IUUQBIPNV
!BIPNV
HJUIVCDPNBIPNV
!
⌂

View Slide

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

View Slide

Web Frontend Rendering Performance Knowledge & Tips

Web Frontend Rendering Performance Knowledge & Tips

Ayumu Sato

More Decks by Ayumu Sato

Other Decks in Programming

Featured

Transcript