High Performance Web Frontend 2013 秋

Slide 1

Slide 1 text

High Performance Web Frontend *5B51D?BMC#1>C19B?>DB5>49>'C1;1 18?=E I25B75>D!>3

Slide 2

Slide 2 text

×Ūķ๑NᴗO๑ 8DD@ 18?=E

Slide 3

Slide 3 text

Frontend Engineer ,%$ ++ "1F1+3B9@D B?GC5B

Slide 4

Slide 4 text

Ɨ sIyPQ bgh_[h`KBX .%;U" NM u_fh`Oqt r|mP ab\idh^LQ

Slide 5

Slide 5 text

¯ÂÄ¨w¯Æ¶Ä ůø  &5DG?B; # ?=@ED5  *5>45B

Slide 6

Slide 6 text

ĳŷ4)5*1%77)56 ƀÚ)7:35/ ħō!)2()5 ŲŚ31487) Ţŷ32'086-32 ŵwŁ

Slide 7

Slide 7 text

Î÷wßĊx |}.52#9D{Æ 8B?=5'@5B19/<:4/',1,<4 ℹ ~PHSP$)&-7>$)&-7*35)9)034)56?w{ ,7741<%/85%+-7,8&-32:)&/-7()96,710

Slide 8

Slide 8 text

#perfmatters (5B6?B=1>35%1DD5BC

Slide 9

Slide 9 text

īÎw¯Æ¶Är jwƅůĘ ❓ =3314*'31&03+ :)&4)5*351%2')&%6-'6*357,)1%5/)7-2+7)%1

Slide 10

Slide 10 text

Ä¬Æ½Äň[õÈf ":D477,ciI¤´±´hńêR ĝŔńÌY]Vdc ²±´øR ÓµY]  -7:28:D477,:<2 80><4.= ŕ<01:B;,207:,/=;00/ ;,<>44

Slide 11

Slide 11 text

??7<5uątVku ¤´´¥²R ÕVi Āħ²²g ęVĕƌRLx ' 2::270A0-8,=>0<.09><,7-7:2=;:>5; ?=492=4>0=;00/49A0-=0,<.3<,964923>87

Slide 12

Slide 12 text

äŐuĕƌÉX ::270d"4.<:=:1>i ¤´±´R ĝņUfx]k ´gd`b hčęg afRxĚĢ{ĜY]  3>>; <,/,<:<0477C.:8 -492,9/2::270,2<00=7:A;,23>87

Slide 13

Slide 13 text

.52wĀëunp ƅůĘ[ĭuÿdpV ℹ

Slide 14

Slide 14 text

ĉūŊþwĂĴë  #  +

Slide 15

Slide 15 text

ůÑwŮƊë   - 

Slide 16

Slide 16 text

(175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7

Slide 17

Slide 17 text

(175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7 2 D¨Á¼ª ]V^±f·T 

Slide 18

Slide 18 text

(175(5B6?B=1>35$9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7 2 D§] »R¢eL ♥

Slide 19

Slide 19 text

Network &+$??;E@ ,(?>>53D9?> +5>4 ,,(*5AE5CD *5359F5 ,,(*5@?>C5 «¥¨ÃÆÅƀÚ

Slide 20

Slide 20 text

 0 + -  ␡ $?14 4=;7,C )=492 7:=0 94>4,7

Slide 21

Slide 21 text

⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

Slide 22

Slide 22 text

#w¿¡Æï`î ,,(¿¨w&5DG?B; }²R´´h rwÐwîðÆgQQxúŊ{ #5:4-%716%13.dÕkmZ ýĩĘg»îðZxcYtNQŚ '

Slide 23

Slide 23 text

⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

Slide 24

Slide 24 text

 + &+ <95>D SGGG5H1=@<53?=npôæw +5BF5BwÖĠxsaƗT 21.49 ¯ÃÆ©À¥¥±

Slide 25

Slide 25 text

 + &+ <95>D ¯ÃÆ©À¥¥± SUÆQYœtV`s œnpjWtÐw&+uŧVpT !$ &+űĽ

Slide 26

Slide 26 text

 + &+ <95>D ¯ÃÆ©À¥¥± S lnpcT !$ &+űĽ

Slide 27

Slide 27 text

⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

Slide 28

Slide 28 text

 + +5BF5B <95>D Sb^lcÆVT 21.49 ĦŤwƆĄ

Slide 29

Slide 29 text

 + +5BF5B <95>D StwŌqfZÆƗT $.7;.7 ĦŤwƆĄ

Slide 30

Slide 30 text

 + +5BF5B <95>D Saumxƒ ¿¡Æ^lcÆVT 21.49 ĦŤwƆĄ ,,(¿¨

Slide 31

Slide 31 text

 + +5BF5B <95>D ĦŤwƆĄ ,,(¿¨ ,( G1I 81>4C81;5

Slide 32

Slide 32 text

⇆ ,(?>>53D9?> &+$??;E@ ,,(*5AE5CDL*5C@?>C5>  '

Slide 33

Slide 33 text

 + +5BF5B <95>D S¿¡Æ^lcÆVT 21.49 ĦŤwƆĄ Smnr~npvT $.7;.7 ,,(¿¨ ¿¨wáŉĬƇ

Slide 34

Slide 34 text

 + +5BF5B <95>D SrUXg#ſvT $.7;.7 ,,(ÁµÄ #

Slide 35

Slide 35 text

 + +5BF5B <95>D SU[rWƒ nrľčſnpVVƒT 21.49 ÁµÄïÚÊ ,,(ÁµÄ #

Slide 36

Slide 36 text

 + +5BF5B <95>D ÁµÄïÚÊ SeU#ſT $.7;.7 ,,(ÁµÄ #

Slide 37

Slide 37 text

 + +5BF5B <95>D ,,(ÁµÄ # ÁµÄïÚćË F½JP[WVÂG 21.49

Slide 38

Slide 38 text

 + +5BF5B <95>D ,,(ÁµÄ # ÁµÄïÚćË ,( +

Slide 39

Slide 39 text

Æ¬Æ²¥©[âfV ĺ×h&:?9/(<4;RLwmY] ®dĹOeq ø×h&:?9/(<4;{ĭwŁYbMx Ń¿R·âãfĔÜ^d&:?9/(<4;h ×øgć¼Yb´´¢RđgQXo 

Slide 40

Slide 40 text

978(5B6?B=1>35 B?GC5B&5DG?B;9>7 .3480<,7,-=:<0477C.:8 -::6=

Slide 41

Slide 41 text

mnrƋdVqfv 

Slide 42

Slide 42 text

xew½Äx ¯Æ¶ÄwĤĵë ✓

Slide 43

Slide 43 text

ÙXyÄ§Ä¦¨wƁĐ AAA2::270.:8 ,9,7C>4.=

Slide 44

Slide 44 text

ĤĵrdpőĵÛĈ ţŤdpžźf ::

Slide 45

Slide 45 text

Ä§Ä¦¨wƁĐƁĐwĨı AAA2::270.:8 ,9,7C>4.=

Slide 46

Slide 46 text

ƁĐwĨıƓÇƃƔ ª¬{ĊĕZx ®°h×ø{čvZ ®´{ÙĬZx ''¡{ÇĕZx ''d 'hĻnŀnŐ{ýňÌZx HHHHHHHHHHHHHHHH0>. ℹ

Slide 47

Slide 47 text

(175+@554!>C978DC /0@07:;0<=2::270.:8 =;00/ ;,20=;00/ 49=423>=

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

(175+@554!>C978DC*E<5C /0@07:;0<=2::270.:8 =;00/ /:.= 49=423>= 70=

Slide 50

Slide 50 text

.52¯Æ¶Ä³¨±¾§ 24>3?-.:8 > 6 =;00/ -7:- 8,=>0< /:.= -0=>;<,.>4.0=70=+49><:8/

Slide 51

Slide 51 text

o]w½Äx &5DG?B;śŝwûįċŘ ✓

Slide 52

Slide 52 text

¿¨wĪłf ;  Reduce number of HTTP requests ⬅ ⬅ ⬅ ⬅ ⬅ ⬅ ⬅ ?>31D5>1D5 +++@B9D5C 1D1-*!

Slide 53

Slide 53 text

¿¡Æw łf - Image - Optimized Miniﬁed, Gzipped = Text = % $$$ ▻ ▻▻ ▻ ▻▻

Slide 54

Slide 54 text

~gxwŨV ċŘűĽdpV^ ?

Slide 55

Slide 55 text

 0 + -  ␡ !:,/ 4=;7,C -C9>7 7:=0 94>4,7

Slide 56

Slide 56 text

16.666... =C (+

Slide 57

Slide 57 text

(+r¿¯Á¥¼ÁÆ¨ ©¯ÔpbÞUhĖŏi ĝg ×®°¬Zx D %'{¾a]pgi °´§hÄē{8=cČm[x # %'1<,80;0<=0.:9/

Slide 58

Slide 58 text

°¾w¯ÁÆ·ux ĴRtáŉ[Ŵ~npV $?14 +3B9@D $1I?ED (19>D F5>D =C '! '!

Slide 59

Slide 59 text

¯ÁÆ·áŉwŇĜ ,9=5<9>5qŔŶf ' (4807490<,80=

Slide 60

Slide 60 text

DEMO

Slide 61

Slide 61 text

?=@1B56B1=5C@5BC53?>4 1<,80=;0<=0.:9/,;;=;:>.:8

Slide 62

Slide 62 text

Render (19>D $1I?ED (- ħōáŉuoVp

Slide 63

Slide 63 text

??7<58B?=51>1BI ýùhăįRńUõĿXyx ŉėĮ´¯hŅÌqńM Mzsx#423>7C?47/ŗĆûüùŘ L\IMHWYcL\I

Slide 64

Slide 64 text

Heavy Painting ƅV´Ä¨

Slide 65

Slide 65 text

´Ä¨¨wůø -  Big Image Heavy CSS ",) #%2( #,)%76,))7 )5*351%2'),)'/0-67*357,)3&-0)$)&

Slide 66

Slide 66 text

ă\VōÝr¿ -

Slide 67

Slide 67 text

*.uōÝ¿ w¨ # + ▻ 3*=<1-90

Slide 68

Slide 68 text

éÒhxÆ¬Æ©qŸ^ # ⬅  + ⬇ +5BF5B

Slide 69

Slide 69 text

ƏűÝĐëu ÿ  ■ ▻ īĂÀcIŏġiÀgfx

Slide 70

Slide 70 text

įĔuŜşc[ėůt¿¡ÆƗ  ■ ĦĖÁ §¯ ´¬}¯ H H H )´ ífehĲœ ■

Slide 71

Slide 71 text

ƅV++wƂçäŌ 

Slide 72

Slide 72 text

s[ƅV±Â§Z ŔŶdt[Œf '

Slide 73

Slide 73 text

, !&+.$,'&, %''& .== 0B;.:8 8::9

Slide 74

Slide 74 text

DEMO

Slide 75

Slide 75 text

2 C57,.*,,.2.7*9.- D,536581914/ C4*+2.,54914:5:8 D6*/.7.6*14914/

Slide 76

Slide 76 text

2 +5=80*-5

Slide 77

Slide 77 text

++¨wĲųG9D8va ì

Slide 78

Slide 78 text

+;9152E775B ôĖçąhŋĶrIĸÿŗ¡±|¯ŘRıOx

Slide 79

Slide 79 text

454. 38 +5=80*-5< 38 +57-.77*-1:8 38 -599.-+57-.7 38 80*-5<-599.- 38 80*-5<7*-1:8 38 7*-1:8-599.- 38 *2231= 38 @BDRK)&8++)5jPvoKBWApPceZ]KQTJLxDl}FYRG

Slide 80

Slide 80 text

454. +5=80*-5< +57-.77*-1:8 -599.-+57-.7 80*-5<-599.- 80*-5<7*-1:8 7*-1:8-599.- *2231= ⬅ ⬅ ⬅ 3,@07:2,C?8?=,>:.:8 /0@07:; ;0<1:<8,9.0 0 .==+<09/0<492+A4>3+=64,+/0-?220<3>87

Slide 81

Slide 81 text

¹¬ÀxņuítV ªřķ¸dQŒÅYR_ ?¿I@²iěQgáÚZx íiÑįcLyjIM`\ĖÁgZx ëďI#0>A:<6dàĞ ":-470/[email protected]=,<07:A=;0. +

Slide 82

Slide 82 text

++wbäŌxŲōŏu D

Slide 83

Slide 83 text

Layout Thrashing ěùdtVÁ¨áŉwťŽd

Slide 84

Slide 84 text

¾¾¥qU[mt Á¨áŉwöƍ ⚠ :9E>C:?>,76,-:?>4>

Slide 85

Slide 85 text

ůŞwÁ¨ƓàƄŦÅ¿¯ÂÆrƔ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 ¶¬SY ³®k¾²SaTÂ

Slide 86

Slide 86 text

917>?C9>76?B354CI>38B?>?EC<1I?EDC ()9)034)56+33+0)'31',531)()9)034)573306(3'6()13673318',0%<387

Slide 87

Slide 87 text

DEMO

Slide 88

Slide 88 text

2 DDMº°SY À\¤ ⚠

Slide 89

Slide 89 text

öƍwÀÆ±wÊq ŹanpVar ❓ :<.0/'C9.3<:9:?=7,C:?>

Slide 90

Slide 90 text

ÁÄ£¿Äw¯ÂÆ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻

Slide 91

Slide 91 text

đĵĚüwůļ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 [L `SI\

Slide 92

Slide 92 text

àŲŚuÔWÁ¨ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 _Yb\I[ jLelj

Slide 93

Slide 93 text

ēåÁ¨awƇQ¿±¨x°Â¥ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ ƘÍÍÍÍÍÍÍÍÍƘ ƖP?B354$1I?EDPƕ ƙ/0/0/0/0/0/0/0ƙ

Slide 94

Slide 94 text

¾¥ÄÁ¨wŎŋ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ 2 OhÂ 2 OhÂ 2 OhÂ 2 OhÂ 2 OhÂ

Slide 95

Slide 95 text

ņĈw±Â§zw *514 .B9D5qŎŋ ⚠

Slide 96

Slide 96 text

2 ©¦«k ¸Kg

Slide 97

Slide 97 text

JK öƍwÀÆ± // animation loop function update(timestamp) { for (var m = 0; m < movers.length; m++) { // Layout invalidated movers[m].style.left = ( (Math.sin( // Layout forced movers[m].offsetTop + timestamp / 1000 ) + 1) * 500 ) +'px'; } raf = window.requestAnimationFrame(update); }

Slide 98

Slide 98 text

JK Ćāu¶¸táŉ --- 1st loop --- R offsetTop up to date W style.left dirty flag on --- 2nd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 3rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 4rd loop --- R offsetTop dirty...recalculate needed W style.left dirty flag on --- 5th loop --- ... .. 2 HWVLe kXPid 2 UJLE¶¬ S\I[Â :::<3878&)'31:%7',9#$-

Slide 99

Slide 99 text

¾¥ÄÁ¨à "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ ÅÅ ÄD57,.-*>5:9DÃ Æ()()()()()()()Æ 2 OhÂ 2 OhÂ 2 OhÂ 2 OhÂ 2 OhÂ

Slide 100

Slide 100 text

JK öƍut±Â§Å¸¡¥© Element clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft offsetTop offsetWidth scrollHeight scrollLeft scrollTop scrollWidth innertText outerText getBoundingClientRects etc... MouseEvent layerX layerY offsetX offsetY Window scrollBy scrollTo scrollX scrollY getComputedStyle Frame, Document & Image height widh /)00)+386'31. 0%<3874)5*351%2')

Slide 101

Slide 101 text

GPU ƐĿw¨

Slide 102

Slide 102 text

B1@893C(B?35CC9>7->9D 5,A464;0/4,:<2 A464 <,;34.=+%<:.0==492+)94>

Slide 103

Slide 103 text

aaxņu.52#9D 8B?=9E=µÆ¨wŵ ℹ

Slide 104

Slide 104 text

ª¸Æ½Är ´Ä¨u(- ❓

Slide 105

Slide 105 text

µ½Äwŗê

Slide 106

Slide 106 text

řĠãw´Ä¨

Slide 107

Slide 107 text

¢¶Æª¸Æ½Äwýó

Slide 108

Slide 108 text

ĺ¯ÁÆ·bru¬¬¬u

Slide 109

Slide 109 text

++>9=1D9?>Cx tińZuê^wZ  948,>4:9-,=0/7,C0<;<:8:>4:9

Slide 110

Slide 110 text

óĞÁ»Æu§¤ºwh ()9)034)56+33+0)'31)9)276-36)66-326 9)03'-7<'32*'319)03'-7< 48&0-'6',)(80)()7%-0

Slide 111

Slide 111 text

óĞÁ»ÆÈq§¤ºêZf 2 qxrB ◅ ◅ ◅ ()9)034)56+33+0)'31)9)276-36)66-326 9)03'-7<'32*'319)03'-7< 48&0-'6',)(80)()7%-0

Slide 112

Slide 112 text

(-u§¤º Żſdpáŉ 2 mv~]¯M tnqs{ "&]¥ "&]¥ ▻ - ▻ wpo| NR ´ ¹ EYVPnzQ #kK Ol}KCX

Slide 113

Slide 113 text

f]rżV ⚠ ®´gfx¡±~{ňĕZxd ôĖĦh·ÂÒRÉĄĘgöÖZxVdRLx RILmwéMĤØgňĕZxd %)lhŇľłRĽVw ´¥²º¶gafRx ==429>4807,C0<;<:8:>4:9

Slide 114

Slide 114 text

óĞÁ»Æ[ěùhg ŋĞcÌĩrċŘ  ..4/09>,77,C0<.<0,>4:9

Slide 115

Slide 115 text

DEMO

Slide 116

Slide 116 text

DEMO

Slide 117

Slide 117 text

Compute "1F1+3B9@D 1B2175?<<53D9?> %5=?BI$51; ŅŚÅ¿¡Æ

Slide 118

Slide 118 text

 ³ÆÁ½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ ⏱ ▶

Slide 119

Slide 119 text

 ³ÆÁ½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ ⏱ ▶

Slide 120

Slide 120 text

"1F1+3B9@D (-(B?Ƒ<5B ' ÄēhäıgQQ`]úŊ

Slide 121

Slide 121 text

DEMO

Slide 122

Slide 122 text

 ³ÆÁ½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ ⏱ ▶

Slide 123

Slide 123 text

Slide 124

Slide 124 text

DEMO

Slide 125

Slide 125 text

ÞúŏuöƍwU ¢ÆÄwŠÏ ' (4807490hĈì{ĉòċUĵx

Slide 126

Slide 126 text

wa]ĸ¢ÆÄ hŒêRŔZTx 49.0;>4:90B;7,490/.:8

Slide 127

Slide 127 text

Slide 128

Slide 128 text

[ĉūcpVƇ ÐwáŉxÜĶf ⚠

Slide 129

Slide 129 text

[=CwÊwĪè ģnpVnpd~W $,7169 *>5:9 "*149 =C?F5B CD1BD

Slide 130

Slide 130 text

(B5<31D5~kx '2:53D(??<tswċŘ &8-0(2):+%1)6'31+%5&%+)'300)'735*5-)2(0<'3() :::,710 53'/6'31)278735-%0664))(67%7-'1)143306 ℹ

Slide 131

Slide 131 text

ƉĹ¢ÆÄ ¦R×ÏXyfM -7:290A<074..:8 ?=492.3<:80/0@07:;0<>::7=>:ŕ9/808:

Slide 132

Slide 132 text

Slide 133

Slide 133 text

✓Ýø´¡hĳŎfĪnÒM ✓ÈŌČn$"h£²®´ ✓ ŊhñĔÎĐ ✓.:9=:707:2feguxÅÊ .:/492=8,=34928,2,D490.:8 A<4>4921,=>808:5,@,=.<4;> 0>.

Slide 134

Slide 134 text

*53?B4 51@ <31D9?>C ' ½Ç´¯{ĥÍgWĨ¹

Slide 135

Slide 135 text

DEMO

Slide 136

Slide 136 text

2 °ÀÆyz}fY ÁÆfYµ b

Slide 137

Slide 137 text

Conclusion ~r

Slide 138

Slide 138 text

ŠÏdkòůŞuoVp ă~ZuĥŽ 

Slide 139

Slide 139 text

.52¯Æ¶Äñ ůŞ  &5DG?B; # ?=@ED5  *5>45B

Slide 140

Slide 140 text

 &5DG?B; AţŤŏuŲŃf{d AûįwċŘĖďf

Slide 141

Slide 141 text

 *5>45B A++wƂŭƎuŀě AÁ¨wŎŋŀě A(-áŉxĝƅuġW

Slide 142

Slide 142 text

# ?=@ED5 AĻudf]t^p'# A¦ÆÀØXyŰpî AÆ·rZx®töƍ

Slide 143

Slide 143 text

,9=5<9>5xŖ¦ÆÀ ũRtöƍŎŰq\ M

Slide 144

Slide 144 text

(0(534&3;86)5'327)27'318 7%0/6()973306 -2();,710 2 "$ 2 "& 2 ¨ 2 2 yz}

Slide 145

Slide 145 text

A.52ĢŬwŻŌ[Ď[ AĉūŊþwĂĴë Aåƈr¯Æ¶Ä + >F #

Slide 146

Slide 146 text

.52ĢŬqğVŤ`t f_uîš{\ƒ ?

Slide 147

Slide 147 text

)E5CD9?>C 8DD@ 18?=E 18?=E 79D8E23?= 18?=E ⌂

Slide 148

Slide 148 text

,774:::-'/5'314,37367&-6%%'6 ,774:::-'/5'314,373667)9)2()4303 ,774:::-'/5'314,3736)4636 ,774:::-'/5'314,3736.3,22-):%0/)5 ,774:::-'/5'314,3736%0)6/ ,774:::-'/5'314,3736 ,774:::-'/5'314,37360%',0%2,%5(< ,774:::-'/5'314,3736169+ ,774:::-'/5'314,3736861-66-32 ,774:::-'/5'314,3736.(,%2'3'/ ,774:::-'/5'314,37367,6/<7 ,774:::-'/5'314,3736,%26)0 %3:>:<0/4>=G