Slide 1
Slide 1 text
Web Frontend
Rendering
Per formance
Knowledge & Tips
)5.-$POGFSFODF
$ZCFS"HFOU
*OD"ZVNV4BUP
Slide 2
Slide 2 text
"ZVNV4BUP
!BIPNV
גࣜձࣾαΠόʔΤʔδΣϯτ
ϑϩϯτΤϯυΤϯδχΞ
IUUQBIPNV
Slide 3
Slide 3 text
!͋΄Ή
ͷνϟϥ͘ͳ͍ौ୩αϥϦʔϚϯ
&YDFM৬ਓͩͬͨΓϑϩϯτ։ൃͩͬͨΓ
IUUQBIPNVˡଓ͖8FCͰ
͞ͱ͏͋ΏΉ
Slide 4
Slide 4 text
ZFBSTBHPʜ
Ѫ͖͢Web
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
"OJNBUFE(*'
NBSRVFF
)5.-
DBOWBT
USBOTGPSN
!LFZGSBNFT
%)5.-
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
ؔ৺ΛҾ͘8FCαΠτॏ͘ͳΓ͕ͪ
ϨϯμϦϯάͱ͔
εΫϩʔϧͱ͔
Ξχϝʔγϣϯͱ͔
ͱʹ͔͘৭ʑ
݁ہ
Slide 10
Slide 10 text
NT
milli second
Slide 11
Slide 11 text
“
– ϛϦඵ - ༻ޠղઆࣙయ | NTTPCίϛϡχέʔγϣϯζ
“্ڝٕڝӭͰλΠϜͷܭଌ 100ͷ1ඵ ·Ͱɻ
͔͠͠ɺౙقछͷϦϡʔδϡ(ͦΓ)ࣗಈंϨʔεͷ
F1 ͳͲ 1000ͷ 1ඵ·Ͱܭଌ͍ͯ͠Δɻ”
Slide 12
Slide 12 text
ਓؒNTͱNTͷҧ͍Λײ͡Δ
NT͔Βίϯτϩʔϧ͢Δ
NT୯Ґͷ͕
εϜʔζͳಈ͖Λ࡞Δ
NTͷྗ
Slide 13
Slide 13 text
"
&
␡
-PBE %JTQMBZ 6TJOH $MPTF
*OJUJBM
Slide 14
Slide 14 text
スムーズで
快適な操作感
♥
"
&
␡
-PBE %JTQMBZ 6TJOH $MPTF
*OJUJBM
Slide 15
Slide 15 text
4FUVQ
'145JNFMJOF
#SPXTFS3FOEFSJOH
$BTF4UVEZ
$PODMVTJPO
"HFOEB
Slide 16
Slide 16 text
ϒϥβͷ͖ͪʹͳͬͯߟ͑ΔͨΊʹ
8FC,JUલఏؾຯ ͕ɺݪཧେࠩͳ͍
$BOWBTͷΰϦΰϦͨ͠ͳ͍
8FC(-ͱ͔ͷͳ͍
ւ֎ͷ(PPHMFSʹײँΛࠐΊͯ
લஔ͖
Slide 17
Slide 17 text
'14ͷͳ͠
'145JNFMJOF
Slide 18
Slide 18 text
ϦϑϨογϡϨʔτͱ'14
'14
Slide 19
Slide 19 text
,
өըɾΞχϝ'14
'14ۙͰεϜʔζͬΆ͍
ҰൠతͳσΟεϓϨΠ
ຖඵճදࣔΛߋ৽͢Δ I[
'14ʹͳΔͱ͍ΘΏΔ
͵Δ͵Δಈ͘ήʔϜͷΠϝʔδ
Slide 20
Slide 20 text
NTGNTG
ʜ
Slide 21
Slide 21 text
($ 4DSJQU
-BZPVU
1BJOU
&WFOU
NT
Slide 22
Slide 22 text
$ISPNFͳΒ$BOBSZ͕Φεεϝ
࠷৽ͷػೳ͕Πν͑͘Δ
!
ಈ͔ͳ͍͕͋ͬͯٽ͔ͳ͍ʢॏཁʣ
%FWFMPQFS5PPM5JNFMJOF
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
ϨϯμϦϯάϑϩʔͱΑ͋͘Δ
#SPXTFS3FOEFSJOH
Slide 32
Slide 32 text
ࠓճ8FC,JUΛऔΓѻ͍·͢
3FOEFSJOH&OHJOF
http://myakura.github.io/n/webkit4devs.html
Slide 33
Slide 33 text
ϨϯμϦϯάϑϩʔ
3FOEFSJOH'MPX
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
Slide 34
Slide 34 text
ϨϯμϦϯάϑϩʔ
3FOEFSJOH'MPX
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
Slide 35
Slide 35 text
ϨϯμϦϯάॲཧͷݩʹͳΔͷ
)5.-$44
1
Slide 36
Slide 36 text
5IF#VUUPO
Slide 37
Slide 37 text
{}
/* ͍ΘΏΔϘλϯ */
!
.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
Slide 38
Slide 38 text
{}
/* ͍ΘΏΔϘλϯ */
!
.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
Slide 39
Slide 39 text
%0.ͱ$440.͔Βඳը͖͢ཁૉΛπϦʔԽ͢Δ
3FOEFS5SFF
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
Slide 40
Slide 40 text
&
ϨϯμʔπϦʔΛݩʹཁૉΛஔ͢Δ
-BZPVUʁ
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
&
Slide 41
Slide 41 text
▹
Slide 42
Slide 42 text
▹
Slide 43
Slide 43 text
5JNFMJOF'SBNFT
FPSͷਪҠͱڞʹɺϑϨʔϜͷॲཧ༁ΛΔ
Slide 44
Slide 44 text
https://developers.google.com/chrome-developer-tools/docs/demos/too-much-layout/
Slide 45
Slide 45 text
-BZPVUॲཧͷաͳൃੜ
-BZPVU5ISBTIJOH
Slide 46
Slide 46 text
ɹ͕࿈ଓͨ͠
ྑ͘ͳ͍ঢ়ଶ
⚠
Slide 47
Slide 47 text
εΫϦϓτʹΑΔϓϩύςΟΞΫηε
1SPQFSUZ"DDFTT
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
Slide 48
Slide 48 text
{}
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&"%ʜ
Slide 49
Slide 49 text
{}
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
Slide 50
Slide 50 text
{}
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&ʜ
Slide 51
Slide 51 text
&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/
Slide 52
Slide 52 text
ελΠϧը૾σʔλΛඳը͢Δ
1BJOUʁ
)5.-
$44 $440.
%0.
+BWB4DSJQU
3FOEFS
5SFF
-BZPVU 1BJOU
▶
˛
˝
▶
▶
▶
▶ ▶
Slide 53
Slide 53 text
5
%SBX
*NBHF
6
4UZMFT
3BTUFSJ[F
▹
%FDPEF
3FTJ[F
%JTQMBZ
&
Slide 54
Slide 54 text
$POUJOVPVT1BHF
3FQBJOUJOH
ը໘ͷඳըʹԿms͔͔͍ͬͯΔͷ͔ΛΔ
Slide 55
Slide 55 text
http://css3exp.com/moon/
Slide 56
Slide 56 text
ෛՙͷߴ͍ɺෳࡶͳ$44
5PPDPNQMFY4UZMF
Slide 57
Slide 57 text
OPOF
CPYTIBEPX
CPSEFSSBEJVT
EPUUFECPSEFS
http://havelog.ayumusato.com/develop/performance/e560-
css_rendering_with_skia_debugger.html
Slide 58
Slide 58 text
OPOF
CPYTIBEPX
CPSEFSSBEJVT
EPUUFECPSEFS
TIBEPXEPUUFE
TIBEPXSBEJVT
SBEJVTEPUUFE
BMMNJY
http://havelog.ayumusato.com/develop/performance/e560-
css_rendering_with_skia_debugger.html
Slide 59
Slide 59 text
7
"SFB ྖҬͷେ͖͞
$PNQMFYJUZ ෳࡶ͞
␡
Slide 60
Slide 60 text
$ISPNJVN"OESPJEͷ%ඳըΤϯδϯ
࣮ߦ͞ΕͨඳըίϚϯυͷཤྺΛݟΕ
ελΠϧͷෳࡶ͕͔͞Δ
4LJB
⚙
Slide 61
Slide 61 text
NT
Slide 62
Slide 62 text
NT
Slide 63
Slide 63 text
NT
Slide 64
Slide 64 text
Topcoat
http://bench.topcoat.io/
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Ћ
get more smoothness
Slide 68
Slide 68 text
(16߹ ϋʔυΣΞΞΫηϥϨʔγϣϯ
(16$PNQPTJUJOH
Slide 69
Slide 69 text
ը૾ॲཧʹಛԽͨ͠ϓϩηοα
8IBUJT(16
3D ゲームの
必要スペックで
よく見るアレ？
VRAMが
沢山あると
良いヤツ？
ハードウェア
アクセラレーション？
CSSのハックで
聞いたことある？
Slide 70
Slide 70 text
http://www.nvidia.com/object/what-is-gpu-computing.html
Slide 71
Slide 71 text
http://www.paulirish.com/2012/why-moving-elements-with-
translate-is-better-than-posabs-topleft/
Slide 72
Slide 72 text
https://developers.google.com/events/io/sessions/325091862
Slide 73
Slide 73 text
$PNQPTJUJOH-BZFS PO(16
/PSNBM-BZFS FWFSZ$16
Slide 74
Slide 74 text
(165FYUVSF
更新があれば
描画データを
GPUに再転送
描画データを
キープしといて
GPU上で合成
Slide 75
Slide 75 text
◅
◅
◅
広い範囲を
再描画しないから
スムーズ
レイヤー丸ごとを
操作させるだけで
サクサク移動
Slide 76
Slide 76 text
⋆
;▻
PQBDJUZO
■
>
USBOTMBUF Y
Z
?
@
TDBMF O
■
↻
SPUBUF OEFH
(16ͰߴʹॲཧͰ͖Δ ඳըσʔλͷ࠶సૹ͕ෆཁ
Slide 77
Slide 77 text
"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
Slide 78
Slide 78 text
4IPX$PNQPTJUFE
-BZFS#PSEFST
GPU߹͞Ε͍ͯΔϨΠϠʔΛՄࢹԽ͢Δ
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
ϨΠϠʔͷҙਤ͠ͳ͍িಥʹΑΔ$PNQPTJUJOH
"DDJEFOUBM0WFSMBQ
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
"OJNBUJPO#BTFE-BZFS
4UBDLJOH$POUFYU-BZFS
https://developer.mozilla.org/
en-US/docs/Web/Guide/CSS/
Understanding_z_index/
The_stacking_context
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
SPUBUF
Ξχϝʔγϣϯத
Slide 85
Slide 85 text
BTTVNFE0WFSMBQ
ॏͳͬͯΔͬΆ͍
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
έʔεελσΟ
$BTF4UVEZ
Slide 88
Slide 88 text
+BOL#VTUJOH
B
ύϑΥʔϚϯεͷ્ཁҼΛऔΓআ͘
Slide 89
Slide 89 text
ͨͱ͑εΫϩʔϧ࣌ͷ
ϖΠϯτύϑΥʔϚϯεΛྫʹߟ͑Δ
4NPPUI
Slide 90
Slide 90 text
'14લޙͰ҆ఆ͍ͯ͠Ε
εϜʔζͳૢ࡞ײΛಘΔ͜ͱ͕Ͱ͖Δ
'14
'14
Slide 91
Slide 91 text
+BOLϙΠϯτ͕͋Δͱ
ૢ࡞ͷҾ͔͔ͬΓɾҧײʹͭͳ͕Δ
'14
'14
Slide 92
Slide 92 text
http://jankfree.org/jank-busters-io-2013/template.html#15
ϨϯμϦϯάύϑΥʔϚϯεΛམͱ͢+BOL
ෆཁͳϖΠϯτʹͭͳ͕Δ
QPTJUJPOpYFE
PWFSqPXTDSPMM
IPWFSޮՌ
UPVDIϦεφʔͷॲཧ
ॏ͍ϖΠϯτʹͭͳ͕Δ
ෳࡶͳݟͨͷ$44
ը૾ͷσίʔυͱϦαΠζ
େ͖͗͢ΔແବͳۭϨΠϠʔ
Slide 93
Slide 93 text
+BOLϙΠϯτΛղফ͢Δʹ
ݪҼΛಛఆɾରॲ͢Δϊϋ͕ඞཁ
+BOL
+BOL
Slide 94
Slide 94 text
ϓϩδΣΫτ
j
Slide 95
Slide 95 text
ファーストビュー下にいくとき
必ずスクロールが一度
引っかかるような･･･
(※iPhone4にて)
本人
❓
Slide 96
Slide 96 text
ϑΝʔετϏϡʔNT ը໘ԼNT
Slide 97
Slide 97 text
ϑΝʔετϏϡʔNT ը໘ԼNT
border-radius
+
dashed border
Slide 98
Slide 98 text
νϡʔχϯάલNT νϡʔχϯάޙNT
border-radiusを
消してみた
Slide 99
Slide 99 text
$44ͷࣄ͗͢͠ҙ
CSSͰग़དྷΔ͜ͱ͔Βٯࢉͯ͠ෳࡶʹ͢Δͷة͏͍
⚠
Slide 100
Slide 100 text
ϓϩδΣΫτ2
p
Slide 101
Slide 101 text
この(グラデや画像が山盛りな)
ページを開いて暫くすると
ブラウザが落ちるんです！
X-(
同僚
❓
Slide 102
Slide 102 text
ޙ
༨༟ͳ͔ͬͨͷͰɺεϧʔؾຯରԠͰͨ͠
Slide 103
Slide 103 text
bodyに おまじないCSSを
適用したら直りました
:-)
同僚
ℹ
Slide 104
Slide 104 text
{}
!
!
!
!
body {
-webkit-backface-visibility:hidden;
}
͓·͡ͳ͍ͷ༰
Slide 105
Slide 105 text
0I
Σ(´Д`;)
Slide 106
Slide 106 text
{}
!
!
!
!
body {
-webkit-backface-visibility:hidden;
}
͓·͡ͳ͍ͷΖ͍ͷ༰
⬆ #0%:·Δ͝ͱ(16$PNQPTJUJOHͯ͠Δ
Slide 107
Slide 107 text
(165FYUVSF
更新があれば
描画データを
GPUに再転送
描画データを
キープしといて
GPU上で合成
広域に適用する
↓
常に描画内容が更新される
↓
GPUへの再転送コストが高くなる
↓
描画処理に副作用がでる可能性!!
Slide 108
Slide 108 text
(16ສೳༀͰͳ͍
ո͍͠ϓϩύςΟͰԿͱͳ࣏ͬͨ͘ = ෭࡞༻Ωέϯ
⚠
Slide 109
Slide 109 text
ϓϩδΣΫτ3
x
Slide 110
Slide 110 text
いいねボタン(仮称)につけた
アニメーションの開始に
ラグがあるんだけど…
:-(
上司
❓
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
܁Γฦ͞ΕͨϘλϯɺͯ͢ಉ͡ϨΠϠʔʹ͋Δ
શϘλϯ͕ಉ࣌ʹ$PNQPTJUJOH͞Ε͍ͯͨ
"OJNBUJPOͷτϦΨʔDMBTTʹ[JOEFYΛՃ͑ͨ
ͬͨ
ר͖ࠐΈʹΑͬͯ(16ͷςΫενϟసૹྔ͕ɹɹ
ଟ͘ͳͬͨ͜ͱͰϥά͕ൃੜͨ͠ʁʢԾઆʣ
▾
▾
▾
▾
Slide 113
Slide 113 text
࣌ʹରྍ๏ඞཁ
ؾ͍ͮͨͱ͖ʹ࣏͕͍ࠜ͠έʔεগͳ͘ͳ͍
⚠
Slide 114
Slide 114 text
Financial Times
http://coding.smashingmagazine.com/2013/05/23/building-the-new-
financial-times-web-app/
Slide 115
Slide 115 text
'MFYJCMF#PY-BZPVU.PEVMFͷར༻ʹΑͬͯ
-BZPVUॲཧͷίετ͕ߴ͘ͳͬͨࣄྫ
৽͍༷͠ͷ$44Λಋೖ͕ͨ͠
ϒϥβ࣮͕ख़͍ͯ͠ͳ͔ͬͨέʔε
Slide 116
Slide 116 text
Flexbox layout isn't slow
http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow
Slide 117
Slide 117 text
Apple
http://wesleyhales.com/blog/2013/10/26/Jank-Busting-Apples-Home-
Page/
Slide 118
Slide 118 text
USBOTMBUF;
ϋοΫ͕ɺଟͷඇΞΫςΟϒͳཁૉʹ
ద༻͞ΕΔ͜ͱͰ$PNQPTJUJOH͕ߴίετʹͳ͍ͬͯͨ
ཁૉʹඞཁेͳUSBOTMBUF;
ϋοΫ͕͋ͬͨͷͰ
ωετͨ͠ཁૉͷݸผϋοΫΛղআͯ͠վળͨ͠
Slide 119
Slide 119 text
Flickr
http://code.flickr.net/2013/06/04/adventures-in-jank-busting-parallax-
performance-and-the-new-flickr-home-page/
Slide 120
Slide 120 text
యܕతͳεΫϩʔϧύϥϥοΫε࣮ͷ
'14Λ5JNFJOFΛݩʹվળ͢Δࣄྫ
NBSHJO5PQCBDLHSPVOEQPTJUJPOʹΘͬͯ
USBOTMBUFEUSBOTMBUF;ʹΑΔ(16߹Ͱվળ
Slide 121
Slide 121 text
Pinterest
http://www.smashingmagazine.com/2013/06/10/pinterest-paint-
performance-case-study/
Slide 122
Slide 122 text
QPTJUJPOpYFEͳϔομʔ6*ʹର͢Δ
USBOTMBUF;
ద༻ʹΑΔ(16߹ͷద༻
֎ཁૉʹCPYTIBEPXཁૉʹCPSEFSSBEJVTΛ
͚ͯద༻͢Δ͜ͱͰɺ$44ͷඳըෛՙΛܰݮͨ͠
εΫϩʔϧ࣌ʹIPWFS͕Ԡ͢Δ͜ͱʹΑΔෛՙΛ
σΟϨΠΛ͔͚ͨΓɺදݱΛܰͯ͘͠ରԠͨ͠
Slide 123
Slide 123 text
·ͱΊ
$PODMVTJPO
Slide 124
Slide 124 text
w ·ͣλΠϜϥΠϯΛݟΔ͜ͱ͔Β࢝ΊΑ͏
w ύϥϥοΫεɹʹؾΛ͚ͭΑ͏
w $44͍͗͢ͳ͍Α͏ʹ͠Α͏
w (16$PNQPTJUJOH͍ॴ͕ΩϞʂ
w ઌਓͷܙ͓ͬͯ͜͏ʂ
͓͞Β͍
⚠
Slide 125
Slide 125 text
w ύϑΥʔϚϯεͷৗʹγϏΞ
w ࣮ߦڥͱڞʹ8FC։ൃͷ෯͕͕͍ͬͯΔ
w 8FCٕज़ͷͻͱͭͱͯ͠ϊϋΛਂΊΔ͖
w ࣗͳΓʹΩϟονΞοϓ͠Α͏
w ΑΓΑ͍8FCମݧΛʂ
·ͱΊ
Slide 126
Slide 126 text
Thank you
IUUQBIPNV
!BIPNV
HJUIVCDPNBIPNV
!
⌂
Slide 127
Slide 127 text
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/
ϫʔΫϚϯ