High Performance Web Frontend 2013 秋

第15回リクリセミナー「Frontrend in Osaka」 - Re:Creator's Kansai http://recreators.doorkeeper.jp/events/5240 で利用したスライドです。本編60分でした。
同年の7月に行ったWCAN Summer 2013の講演とは、Network周りの前振りを厚くしたり、Compute周りをより薄くしたりと、構成の配分に調整が加えられています。

Transcript

1. High Performance Web Frontend *5B51D?BMC
   #1>C19
   
   B?>DB5>4
   9>
   'C1;1 18?=E I25B75>D
   !>3
2. ×Ū
   ķ
   ๑NᴗO๑ 8DD@ 18?=E
3. Frontend Engineer ,%$ ++ "1F1+3B9@D B?GC5B
4.     Ɨ sIy†P‹Q bgh_[h`KBX .%;U" NM u_fh`Oqt  r|mP ab\idh^LQŒ
5. ¯ÂĨw­¯”ƶğ ůø  &5DG?B; # ?=@ED5  *5>45B
6. 
   ijŷ
   
   4)5*1%77)56 
   ƀÚ
   
   )7:35/ 
   ħō
   
   !)2()5 
   ŲŚ
   
   31487) 
   Ţŷ
   
   32'086-32 ŵwŁŠ
7. Î÷wßĊx |}.52#9D{Ɵ 8B?=5
   '@5B1
   9/<:4/
   ',1,<4 ℹ …~€PHSP
   $)&-7
   >$)&-7
   *35
   )9)034)56?
   w{ƒ‚ ,7741<%/85%+-7,8&-32:)&/-7 ()96,710
8. #perfmatters (5B6?B=1>35
   %1DD5BC
9. īÎw­¯”ƶğr jwƅůĘ ❓ =3314*'31&03+  :)&4)5*351%2')&%6-'6*357,)1%5/)7-2+7)%1
10. šÄ¬Æž½Äň[õÈf‰ ":D477,ciI¤´Ž±´˜hńêR  ĝ
    ŔńÌY]Vdc ‘€²±´˜øR 
    ÓµY]  -7:28:D477,:<2 80><4.=   ŕ<01:B;,207:,/=;00/   ;,<>44
11. ??7<5uą‹ŠtVku ¤´ŽŸƒ´¥²R ÕV‹—i Āħ­²†²ˆg ęVĕƌRLx ' 2::270A0-8,=>0<.09><,7-7:2=;:>5;  ?=492=4>0=;00/49A0-=0,<.3<,964923>87
12. äŐ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
13. .52wĀëu†np ƅůĘ[ĭuÿdpV‰ ℹ
14. ĉūŊþwĂĴë  #  +
15. ůÑwŮƊë   - 
16. (175
    (5B6?B=1>35
    $9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7
17. (175
    (5B6?B=1>35
    $9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7 2 D
    ¨Á¼ª ]V^±f·T 
18. (175
    (5B6?B=1>35
    $9653I3<5  0 + -  ␡ !:,/ 4=;7,C )=492 7:=0 94>4,7 2 D
    †§•] “»R€¢eL ♥
19. Network &+
    $??;E@ ,(
    ?>>53D9?> +5>4
    ,,(
    *5AE5CD *5359F5
    ,,(
    *5@?>C5 «¥¨ÃƗÅƀÚ
20.  0 + -  ␡ $?14 4=;7,C )=492 7:=0 94>4,7
21. ⇆ ,(
    ?>>53D9?> &+
    $??;E@ ,,(
    *5AE5CD
    L
    *5C@?>C5
    
    >  '
22.  #w¿¡ÆŸŒï`î‰ ,,(¿—“Ÿ¨w&5DG?B; 
    ‡­}²—R‹´œ´h
    
    rwÐw’îðÆgQQxúŊ{
    
    
    #5:4-
    %716
    %13.dÕkmZ 
    ýĩĘg»îðZxcYtNQŚ '
23. ⇆ ,(
    ?>>53D9?> &+
    $??;E@ ,,(
    *5AE5CD
    L
    *5C@?>C5
    
    >  '
24.  + &+ <95>D SGGG5H1=@<53?=npôæw +5BF5BwÖĠxsaƗT 21.49 ¯”ÃÆ©À¥—Ž¥±
25.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± SUÆQYŠœ‡tV`s œnpjWtÐw&+uŧVp‰‹T !$ &+űĽ
26.  + &+ <95>D ¯”ÃÆ©À¥—Ž¥± S     lnpcT !$ &+űĽ
27. ⇆ ,(
    ?>>53D9?> &+
    $??;E@ ,,(
    *5AE5CD
    L
    *5C@?>C5
    
    >  '
28.  + +5BF5B <95>D Sb^lcÆVT 21.49 ĦŤwƆĄ
29.  + +5BF5B <95>D StwŌqfZÆƗT $.7;.7 ĦŤwƆĄ
30.  + +5BF5B <95>D Saumxƒ ¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ ,,(¿—“Ÿ¨
31.  + +5BF5B <95>D ĦŤwƆĄ ,,(¿—“Ÿ¨ ,(
    G1I
    81>4C81;5
32. ⇆ ,(
    ?>>53D9?> &+
    $??;E@ ,,(
    *5AE5CD
    L
    *5C@?>C5
    
    >  '
33.  + +5BF5B <95>D S¿¡ÆŸ^lcÆVT 21.49 ĦŤwƆĄ Sm…nr~npvT $.7;.7 ,,(¿—“Ÿ¨ ¿—“Ÿ¨wáʼnĬƇ
34.  + +5BF5B <95>D SrˆUXg #ſ‰vT $.7;.7 ,,(ÁŸµÄŸ #
35.  + +5BF5B <95>D SUˆ[rWƒ ‚nrľčſnpVV†ƒT 21.49 ÁŸµÄŸïÚÊ ,,(ÁŸµÄŸ #
36.  + +5BF5B <95>D ÁŸµÄŸïÚÊ SeƒU  #ſ‰†T $.7;.7 ,,(ÁŸµÄŸ #
37.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË F‡½JP[WVÂG 21.49
38.  + +5BF5B <95>D ,,(ÁŸµÄŸ # ÁŸµÄŸïÚćË ,( +<?G
    +D1BD
39. •Æ¬Æ²¥©[â„fV 
    ĺ×h&:?9/
    (<4;RLwmY] 
    ®‡‚—dĹOeq
    
    ø×h&:?9/
    (<4;{ĭwŁYbMx 
    Ń¿R·âãfĔÜ^d&:?9/
    (<4;h
    
    
    ×øgć¼Yb„´œ´¢“˜RđgQXo 
40. 978(5B6?B=1>35 B?GC5B
    &5DG?B;9>7 .3480<,7,-=:<0477C.:8 -::6= 
41. m…nrƋdVqf†v 
42. xewŽ—½Äx ­¯”ƶğwĤĵë ✓
43. ÙXy
    šÄ§Ä¦
    
    ›¨wƁĐ AAA2::270.:8 ,9,7C>4.=
44. ĤĵrdpőĵیĈ ţŤdpžźf‰ ::
45. šÄ§Ä¦
    
    ›¨wƁĐ
    
    ƁĐwĨı AAA2::270.:8 ,9,7C>4.=
46. ƁĐwĨıƓÇƃƔ 
    ­€Œ†ª“¬{ĊĕZx 
    ®‘°‡—h×ø{čvZ 
    ®´{ÙĬZx 
    ''¡­—{ÇĕZx 
    ''d 'hĻnŀnŐ{ýňÌZx HHHHHHHHHHHHHHHH0>. ℹ
47. (175+@554
    !>C978DC /0@07:;0<=2::270.:8 =;00/ ;,20=;00/ 49=423>=
49. (175+@554
    !>C978DC
    *E<5C /0@07:;0<=2::270.:8 =;00/ /:.= 49=423>= <?70=
50. .52
    ­¯”ƶ𳟨±¾—§Ÿ 24>3?-.:8 > 6 =;00/ -7:- 8,=>0< /:.= -0=>;<,.>4.0=<?70=+49><:8/
51. o]wŽ—½Äx &5DG?B;śŝwûįċŘ ✓
52. ¿—“Ÿ¨wĪŒł‡f ;  Reduce number of HTTP requests ⬅ ⬅ ⬅ ⬅ ⬅ ⬅ ⬅ ?>31D5>1D5 ++
    +@B9D5C 1D1-*!
53. ¿¡ÆŸw› Œł‡f - Image - Optimized Minified, Gzipped = Text = %  $$€$ ▻ ▻▻ ▻ ▻▻
54. ~gxšŸ­wŨV ċ،űĽdpV^ ?
55.  0 + -  ␡ !:,/ 4=;7,C -C9>7 7:=0 94>4,7
56. 16.666... 
    =C  (+
57. (+r¿¯Á¥¼Áƨ ©œ¯ÔpbÞUhĖŏi ĝg ×®Ÿ°“¬Zx D  %'{¾a]pgi Ÿ°´§hÄē{ 8=cČm[x # %'
    1<,80
    ;0<
    =0.:9/
58. °¾‘œw ¯ÁÆ·ux ĴRtáʼn[Ŵ~npV‰  $?14 +3B9@D $1I?ED (19>D F5>D =C '! '!
59. ¯ÁÆ·áʼnwŇĜŒ ,9=5<9>5qŔŶf‰ ' (4807490
    
    <,80=
60. DEMO
61. ?=@1B5
    6B1=5C
    @5B
    C53?>4 1<,80=;0<=0.:9/,;;=;:>.:8
62. Render (19>D $1I?ED (- ħōáʼnuoVp
63. ??7<5
    8B?=5
    1>1BI ýùhăįR’ńUõĿXyx ʼnėĮ”´¯hŅÌqńM Mzsx#423>7C
    ?47/ŗĆûüùŘ ŠL\IšMHWYcŸL\I
64. Heavy Painting ƅV´Ä¨
65. ´Ä¨šŸ¨w ůø -  Big Image Heavy CSS ",)
     #
    %2(
     #
    ,)%76,))7 )5*351%2')
    ,)'/0-67
    *35
    7,)
    3&-0)
    $)&
66. ă\VōÝr¿› -
67. *.u‰ōÝ¿› wšŸ¨ # + ▻ 3*=<1-90
    
68. éÒh†ˆx›Æ¬Æ›©qŸ^ # ⬅  + ⬇ +5BF5B
69. ƏűÝĐëu†‰› ÿ  ▪ ▻ īĂ ÀcIŏġiÀgfx
70. įĔuŜşc[ėůt¿¡ÆŸƗ  ▪ •†—ĦĖÁ ‹§›¯ †´žŽ¬}¯ H H H  )´” ífehIJœ ▪
71. ƅV++wƂçäŌ 
72. sŠ[ƅV±Â­§Z ŔŶdt[‡Œf '
73. , !&+
    .
    $,
    '&
    , 
    %''& .== 0B;.:8 8::9
74. DEMO
75. 2 C
    57,.
    *,,.2.7*9.- D
    ,536581914/ C
    4*+2.
    ,54914:5:8 D
    6*/.
    7.6*14914/
76. 2 +5=80*-5<kŽTQ[Z "*/.
    6*149
    913.
    M£¡
77. ++šŸ¨wIJų
    G9D8
    va ì
78. +;91
    52E775B ôĖçąhŋĶrIĸÿŗ¡±Ÿ|¯ŘRıOx
79. 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 *22
    31=  
    38 @BDRK)&8++)5jPvoKBWAp‡PceZ]KQTJLxDl}FYRG
80. 454.
     +5=80*-5< 
     +57-.77*-1:8  -599.-+57-.7 
     80*-5<-599.- 
     80*-5<7*-1:8  
     7*-1:8-599.- 
     *22
    31= 
     ⬅ ⬅ ⬅ 3,@07:2,C?8?=,>:.:8 /0@07:; ;0<1:<8,9.0 0 .==+<09/0<492+A4>3+=64,+/0-?220<3>87
81. ¹¬ÀxņuítV ª˜€řķ¸dQŒÅYR_ ?¿I@–Œ²iěQgáÚZx íiÑįcLyjIM`\ĖÁgZx ëďI#0>A:<6‰—dàĞ ":-470
    /0@4.0=
    ,<0
    7:A
    =;0. +
82. ++wbäŌxŲōŏu D
83. Layout Thrashing ěùdtVÁŽ‘¨áʼnwťˆŽd
84. ­¾¾¥—ŸqUˆ[mt ÁŽ‘¨áʼnwöƍ ⚠ :9E>
    C:?
    >,76
    ,-:?>
    4>
    
85. ůŞwÁŽ‘¨ƓàƄŦÅ¿¯ÂÆr‚Ɣ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 ¶¬SY ³®k¾²SaTÂ
86. 917>?C9>7
    6?B354
    CI>38B?>?EC
    <1I?EDC ()9)034)56+33+0)'31',531)()9)034)573306(3'6()13673318',0%<387
87. DEMO
88. 2 DDMº°SY ‹À\¤– ⚠
89. öƍwÀƱwÊq ŹanpV‰ar ❓ :<.0/
    'C9.3<:9:?=
    7,C:?>
90. ÁÄ£¿Ä˜w¯ÂÆ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻
91. đĵĚüwůļ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 ‘”Œ[L `SI\
92. àŲŚuÔWÁŽ‘¨ "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ 2 ƒ_Yb\I[ jLelj
93. ēåÁŽ‘¨
    awƇQŸ—¿±¨x°Â¥— "1F1+3B9@D ,%$ ++ ++'% '% *5>45B ,B55 $1I?ED (19>D   ▻ ▻ ▻ ▻ ▻ ▻ ƘÍÍÍÍÍÍÍÍÍƘ ƖP?B354
    $1I?EDPƕ ƙ/0/0/0/0/0/0/0ƙ
94. Ÿ¾¥Ä˜ÁŽ‘¨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Â
95. ņĈw±Â­§zw *514 .B9D5qŎŋ ⚠
96. 2 ©¦«—k ¸Kg
97. 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); }
98. JK Ćāu¶¸táʼn --- 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#$- 
99. Ÿ¾¥Ä˜ÁŽ‘¨
    à "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Â
100. 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')
101. GPU ƐĿwšŸ¨
102. B1@893C
     (B?35CC9>7
     ->9D 5,A464;0/4,:<2 A464 <,;34.=+%<:.0==492+)94>
103. aaxņu.52#9D 8B?=9E=µÆ¨wŵ ℹ
104. Žª¸Æ½Är ´Ä¨u‰(- ❓
105. µž½Äwŗê
106. řĠãw´Ä¨
107. ¢¶ÆŽª¸Æ½Äwýó
108. ĺ¯ÁÆ·bruŽ¬¬¬u
109. ++
     >9=1D9?>C
     x tiń‡Zuê^wZ  948,>4:9
     -,=0/
     7,C0<
     ;<:8:>4:9
110. óĞÁ»Æ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 
111. óĞÁ»ÆÈq§—Ÿ¤ºŒêZf 2 qxrB ◅ ◅ ◅ ()9)034)56+33+0)'31)9)276-36)66-326   9)03'-7<'32*'319)03'-7<  48&0-'6',)(80)()7%-0 
112. (-u§—Ÿ¤ºŒ Żſdpáʼn 2 mv~]¯M tnqs{ "&]­¥‚ "&]­¥‚ ▻ - ▻ wpo| NR ´ ¹› EYVPnzQ #kK ˆ„Ol}KCXŠ
113. „ˆf]‰rżV ⚠ —®…´gfx¡±•~{ňĕZxd ôĖĦh·ÂÒRÉĄĘgöÖZxVdRLx RILmwéMĤØgňĕZxd %)lhŇľłRĽVw Ÿƒ´¥²º¶gafRx ==429
     >480
     7,C0<
     ;<:8:>4:9
114. óĞÁ»Æ[ěùhg ŋĞcŠ‰ÌĩrċŘ  ..4/09>,7
     7,C0<
     .<0,>4:9
115. DEMO
116. DEMO
117. Compute "1F1+3B9@D 1B2175
     ?<<53D9?> %5=?BI
     $51; ŅŚÅ¿¡ÆŸ
118.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶
119.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶
120. "1F1+3B9@D (-
     (B?Ƒ<5B ' ÄēhäıgQQ`]úŊ
121. DEMO
122.  –³ÆžšÁ—½Ä "1F1+3B9@Dwĉū ¸¹¿¿Æ— ⏱ ▶
123. ,9=5<9>5
     
     %5=?BI '2:53D
     ?E>D5BC ' ¨©®r„ Ž‡—øhóğ
124. DEMO
125. ÞúŏuöƍwU‰ ­¢ÆÄwŠÏ ' (4807490hĈì{ĉòċUĵx
126. wa]ˆĸ­¢ÆÄ hŒêRŔZTx 49.0;>4:90B;7,490/.:8
127. 
     
     –³ÆžšÁ—½Ä
     
     rx „ Ž‡—h·ĴfÎĐQv ¨©®őÛ{ĸ÷Zxăā F
     ¯²œhuNgåÃhŠ¦{ H
     İËcÏōYbUyx«”  ,<-,20
     :770.>4:9
128. [ĉūcŠpV‰Ƈ ÐwáʼnxÜĶf‰ ⚠
129. [ =CwÊwĪèŒ ģnpVnpd~W  $,7169 *>5:9 "*149 =C
     ?F5B CD1BD
130. (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 ℹ
131. ƉĹ­¢ÆÄ Š¦R×ÏXyfM -7:290A<074..:8   ?=492.3<:80/0@07:;0<>::7=>:ŕ9/808:<C70,6=
132. ¸¹¿¿Æ—rx ĸ÷XyfM¨©®őÛRĎmw ïJgģSőÛRčxĒļ F
     'gPMbiLxĠhİďĒļ H
     Š¦ißfwæfwĎmxqh "08:<C
     !0,6= ℹ
133. ✓
     Ýø‰´¡hijŎfĪnÒM ✓
     ÈŌČn$"h£²—®™´ ✓
     „ Ž‡—ŊhñĔÎĐ ✓
     .:9=:707:2feguxÅÊ .:/492=8,=34928,2,D490.:8  A<4>4921,=>808:<C0Ŗ.409>5,@,=.<4;> 0>.
134. *53?B4
     51@
     <<?31D9?>C ' ½Ç”´¯{ĥÍgWĨ¹
135. DEMO
136. 2 °ÀÆ
     yz}‰f’Y„ ˜ÁÆ
     ‰f’Yµ™ b
137. Conclusion ~r
138. ŠÏdkòůŞuoVp ă~ZuĥˆŽˆ 
139. .52­¯”ƶğŒñ‰ ůŞ  &5DG?B; # ?=@ED5  *5>45B
140.  &5DG?B; AţŤŏuŲŃf{d Aûįwċ،Ėďf‰
141.  *5>45B A++wƂŭƎuŀě AÁŽ‘¨wŎŋ‚ŀě A(-áʼnxĝƅuġW
142. # ?=@ED5 AĻudf]t^p'# A¦ÆÀŒØXyŰp A™Æ·rZx®Žtöƍ
143. ,9=5<9>5xŖ¦ÆÀ ũRtöƍŒŎŰq\‰ M
144. (0(534&3;86)5'327)27'318  7%0/6()973306  -2();,710 2 "$ 2 "& 2 ˜¨ 2  2 yz}
145. A.52ĢŬwŻŌ[Ď[‰ AĉūŊþwĂĴë Aåƈr­¯”ƶğ + >F #
146. .52ĢŬqğVŤ`‰t‡ f_u€{\ƒ ?
147. )E5CD9?>C
     
     8DD@ 18?=E
     
     18?=E
     
     79D8E23?= 18?=E ⌂
148.  ,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