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>C19B?>DB5>49>'C1;1
   18?=E
   I25B75>D!>3
   

   View Slide

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

   View Slide

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

   View Slide

4. 
   
   
   
   
   
   
   
   
   Ɨ
   sIy†P‹Q
   bgh_[h`KBX
   .%;U" NM
   u_fh`Oqt
   
   r|mP
   ab\idh^LQŒ
   

   View Slide

5. ¯ÂĨw­¯”ƶğ ůø
   
   &5DG?B;
   #
   ?=@ED5
   
   *5>45B
   

   View Slide

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

   View Slide

7. Î÷wßĊx
   |}.52#9D{Ɵ
   8B?=5'@5B19/

   View Slide

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

   View Slide

9. īÎw­¯”ƶğr
   jwƅůĘ
   ❓
   =3314*'31&03+
   :)&4)5*351%2')&%6-'6*357,)1%5/)7-2+7)%1
   

   View Slide

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

    View Slide

11. ??7<5uą‹ŠtVku
    ¤´ŽŸƒ´¥²R
    ÕV‹—i
    Āħ­²†²ˆg
    ęVĕƌRLx
    '
    2::270A0-8,=>0-7:2=;:>5;
    
    
    ?=492=4>0=;00/49A0-=0,

    View Slide

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

    View Slide

13. .52wĀëu†np
    ƅůĘ[ĭuÿdpV‰
    ℹ
    

    View Slide

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

    View Slide

15. ůÑwŮƊë
    
     -
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. 
    +
    &+
    <95>D
    ¯”ÃÆ©À¥—Ž¥±
    SUÆQYŠœ‡tV`s
    œnpjWtÐw&+uŧVp‰‹T
    !$
    &+űĽ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 
    +
    +5BF5B
    <95>D
    Saumxƒ
    ¿¡ÆŸ^lcÆVT
    21.49
    ĦŤwƆĄ ,,(¿—“Ÿ¨
    

    View Slide

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

    View Slide

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

    View Slide

33. 
    +
    +5BF5B
    <95>D
    S¿¡ÆŸ^lcÆVT
    21.49
    ĦŤwƆĄ
    Sm…nr~npvT
    $.7;.7
    ,,(¿—“Ÿ¨
    ¿—“Ÿ¨wáʼnĬƇ
    

    View Slide

34. 
    +
    +5BF5B
    <95>D
    SrˆUXg#ſ‰vT
    $.7;.7
    ,,(ÁŸµÄŸ
    #
    

    View Slide

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

    View Slide

36. 
    +
    +5BF5B
    <95>D
    ÁŸµÄŸïÚÊ
    SeƒU#ſ‰†T
    $.7;.7
    ,,(ÁŸµÄŸ
    #
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. m…nrƋdVqf†v
    
    

    View Slide

42. xewŽ—½Äx
    ­¯”ƶğwĤĵë
    ✓
    

    View Slide

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

    View Slide

44. ĤĵrdpőĵیĈ
    ţŤdpžźf‰
    ::
    

    View Slide

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

    View Slide

46. ƁĐwĨıƓÇƃƔ
    ­€Œ†ª“¬{ĊĕZx
    ®‘°‡—h×ø{čvZ
    ®´{ÙĬZx
    ''¡­—{ÇĕZx
    ''d 'hĻnŀnŐ{ýňÌZx
    HHHHHHHHHHHHHHHH0>.
    ℹ
    

    View Slide

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

    View Slide

48. View Slide

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

    View Slide

50. .52­¯”ƶ𳟨±¾—§Ÿ
    24>3?-.:8 > 6 =;00/ -7:- 8,=>0< /:.= -0=>;4.0=70=+49>

    View Slide

51. o]wŽ—½Äx
    &5DG?B;śŝwûįċŘ
    ✓
    

    View Slide

52. ¿—“Ÿ¨wĪŒł‡f
    ;
    
    Reduce number of HTTP requests
    ⬅
    ⬅
    ⬅
    ⬅
    ⬅
    ⬅
    ⬅
    ?>31D5>1D5
    +++@B9D5C
    1D1-*!
    

    View Slide

53. ¿¡ÆŸw› Œł‡f
    -
    Image
    -
    Optimized
    Minified, Gzipped
    =
    Text
    =
    %
    $$€$
    ▻
    ▻▻
    ▻
    ▻▻
    

    View Slide

54. ~gxšŸ­wŨV
    ċ،űĽdpV^
    ?
    

    View Slide

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

    View Slide

56. 16.666...
    
    
    
    =C
    (+
    

    View Slide

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

    View Slide

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

    View Slide

59. ¯ÁÆ·áʼnwŇĜŒ
    ,9=5<9>5qŔŶf‰
    '
    (4807490

    View Slide

60. DEMO
    

    View Slide

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

    View Slide

62. Render
    (19>D
    $1I?ED
    (-
    ħōáʼnuoVp
    

    View Slide

63. ??7<58B?=51>1BI
    ýùhăįR’ńUõĿXyx
    ʼnėĮ”´¯hŅÌqńM
    Mzsx#423>7C?47/ŗĆûüùŘ
    ŠL\IšMHWYcŸL\I
    

    View Slide

64. Heavy Painting
    ƅV´Ä¨
    

    View Slide

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

    View Slide

66. ă\VōÝr¿›
    -
    

    View Slide

67. *.u‰ōÝ¿› wšŸ¨
    # +
    ▻
    3*=<1-90
    
    
    

    View Slide

68. éÒh†ˆx›Æ¬Æ›©qŸ^
    #
    ⬅
    
    +
    ⬇
    +5BF5B
    

    View Slide

69. ƏűÝĐëu†‰› ÿ
    
    ■ ▻
    īĂÀcIŏġiÀgfx
    

    View Slide

70. įĔuŜşc[ėůt¿¡ÆŸƗ
    
    ■
    •†—ĦĖÁ
    ‹§›¯
    †´žŽ¬}¯
    H H
    H
    )´”
    ífehIJœ
    ■
    

    View Slide

71. ƅV++wƂçäŌ
    
    

    View Slide

72. sŠ[ƅV±Â­§Z
    ŔŶdt[‡Œf
    '
    

    View Slide

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

    View Slide

74. DEMO
    

    View Slide

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

    View Slide

76. 2
    +5=80*-5"*/.6*149913.M£¡
    

    View Slide

77. ++šŸ¨wIJųG9D8va ì
    

    View Slide

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

    View Slide

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

    View Slide

80. 454.
    
    
    
    +5=80*-5<
    
    +57-.77*-1:8
    
    -599.-+57-.7
    
    80*-5-599.-
    
    
    80*-57*-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-?2203>87
    

    View Slide

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

    View Slide

82. ++wbäŌxŲōŏu
    D
    

    View Slide

83. Layout Thrashing
    ěùdtVÁŽ‘¨áʼnwťˆŽd
    

    View Slide

84. ­¾¾¥—ŸqUˆ[mt
    ÁŽ‘¨áʼnwöƍ
    ⚠
    :9E>C:?>,76,-:?>4>
    

    View Slide

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

    View Slide

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

    View Slide

87. DEMO
    

    View Slide

88. 2
    DDMº°SY
    ‹À\¤–
    ⚠
    

    View Slide

89. öƍwÀƱwÊq
    ŹanpV‰ar
    ❓
    :

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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ƙ
    

    View Slide

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Â
    

    View Slide

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

    View Slide

96. 2
    ©¦«—k
    ¸Kg
    

    View Slide

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);
    }
    

    View Slide

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#$-
    

    View Slide

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Â
    

    View Slide

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')
     

     View Slide

101. GPU
     ƐĿwšŸ¨
     

     View Slide

102. B1@893C(B?35CC9>7->9D
     5,A464;0/4,:<2 A464
     

     View Slide

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

     View Slide

104. Žª¸Æ½Är
     ´Ä¨u‰(-
     ❓
     

     View Slide

105. µž½Äwŗê
     

     View Slide

106. řĠãw´Ä¨
     

     View Slide

107. ¢¶ÆŽª¸Æ½Äwýó
     

     View Slide

108. ĺ¯ÁÆ·bruŽ¬¬¬u
     

     View Slide

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

     View Slide

110. óĞÁ»Æu§—Ÿ¤ºŒwh‰
     ()9)034)56+33+0)'31)9)276-36)66-326
     
     
     9)03'-7'319)03'-7<
     48&0-'6',)(80)()7%-0
     

     View Slide

111. óĞÁ»ÆÈq§—Ÿ¤ºŒêZf
     2
     qxrB
     ◅
     ◅
     ◅
     ()9)034)56+33+0)'31)9)276-36)66-326
     
     
     9)03'-7'319)03'-7<
     48&0-'6',)(80)()7%-0
     

     View Slide

112. (-u§—Ÿ¤ºŒ
     Żſdpáʼn
     2
     mv~]¯M
     tnqs{
     "&]­¥‚
     "&]­¥‚ ▻ - ▻
     wpo|
     NR
     ´
     ¹›
     EYVPnzQ #kK
     ˆ„Ol}KCXŠ
     

     View Slide

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

     View Slide

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

     View Slide

115. DEMO
     

     View Slide

116. DEMO
     

     View Slide

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

     View Slide

118.  –³ÆžšÁ—½Ä
     "1F1+3B9@Dwĉū
     ¸¹¿¿Æ—
     ⏱
     ▶
     

     View Slide

119.  –³ÆžšÁ—½Ä
     "1F1+3B9@Dwĉū
     ¸¹¿¿Æ—
     ⏱
     ▶
     

     View Slide

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

     View Slide

121. DEMO
     

     View Slide

122.  –³ÆžšÁ—½Ä
     "1F1+3B9@Dwĉū
     ¸¹¿¿Æ—
     ⏱
     ▶
     

     View Slide

123. ,9=5<9>5%5=?BI
     '2:53D?E>D5BC
     '
     ¨©®r„ Ž‡—øhóğ
     

     View Slide

124. DEMO
     

     View Slide

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

     View Slide

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

     View Slide

127. –³ÆžšÁ—½Ä
     rx
     „ Ž‡—h·ĴfÎĐQv
     ¨©®őÛ{ĸ÷Zxăā
     F¯²œhuNgåÃhŠ¦{
     HİËcÏōYbUyx«”
     
     ,:770.>4:9
     

     View Slide

128. [ĉūcŠpV‰Ƈ
     ÐwáʼnxÜĶf‰
     ⚠
     

     View Slide

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

     View Slide

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
     ℹ
     

     View Slide

131. ƉĹ­¢ÆÄ
     Š¦R×ÏXyfM
     -7:290A<074..:8
     
     ?=492.3

     View Slide

132. ¸¹¿¿Æ—rx
     ĸ÷XyfM¨©®őÛRĎmw
     ïJgģSőÛRčxĒļ
     F 'gPMbiLxĠhİďĒļ
     HŠ¦ißfwæfwĎmxqh
     "08:

     View Slide

133. ✓Ýø‰´¡hijŎfĪnÒM
     ✓ÈŌČn$"h£²—®™´
     ✓„ Ž‡—ŊhñĔÎĐ
     ✓.:9=:707:2feguxÅÊ
     .:/492=8,=34928,2,D490.:8
     
     A<4>4921,=>808:

     View Slide

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

     View Slide

135. DEMO
     

     View Slide

136. 2
     °ÀÆyz}‰f’Y„
     ˜ÁƉf’Yµ™ b
     

     View Slide

137. Conclusion
     ~r
     

     View Slide

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

     View Slide

139. .52­¯”ƶğŒñ‰ ůŞ
     
     &5DG?B;
     #
     ?=@ED5
     
     *5>45B
     

     View Slide

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

     View Slide

141. 
     *5>45B
     A++wƂŭƎuŀě
     AÁŽ‘¨wŎŋ‚ŀě
     A(-áʼnxĝƅuġW
     

     View Slide

142. #
     ?=@ED5
     AĻudf]t^p'#
     A¦ÆÀŒØXyŰp
     A™Æ·rZx®Žtöƍ
     

     View Slide

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

     View Slide

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

     View Slide

145. A.52ĢŬwŻŌ[Ď[‰
     AĉūŊþwĂĴë
     Aåƈr­¯”ƶğ
     +
     >F
     #
     

     View Slide

146. .52ĢŬqğVŤ`‰t‡
     f_u€{\ƒ
     ?
     

     View Slide

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

     View Slide

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
     

     View Slide