Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Frontend Rendering Performance Knowledge & Tips

Ayumu Sato
November 30, 2013

Web Frontend Rendering Performance Knowledge & Tips

YouTube: https://www.youtube.com/watch?v=cBT1Are3jXE

HTML5 Conference 2013 http://events.html5j.org/conference/2013/11/ で利用したスライドです。本編45分。

パフォーマンス全般 ( Network, Render, Compute ) については High Performance Web Frontend 2013 秋 https://speakerdeck.com/ahomu/high-performance-web-frontend-2013-qiu もご参考ください。

Ayumu Sato

November 30, 2013
Tweet

More Decks by Ayumu Sato

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. ZFBSTBHPʜ
    Ѫ͢΂͖Web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. NT
    milli second

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  10. "


    &

    -PBE %JTQMBZ 6TJOH $MPTF
    *OJUJBM

    View full-size slide


  11.   スムーズで
    快適な操作感

    "


    &

    -PBE %JTQMBZ 6TJOH $MPTF
    *OJUJBM

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  14. '14ͷ͸ͳ͠
    '145JNFMJOF

    View full-size slide

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

    View full-size slide

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




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

    View full-size slide

  17. ($ 4DSJQU
    -BZPVU
    1BJOU
    &WFOU
    NT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ˛
    ˝



    ▶ ▶

    View full-size slide

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

    ˛
    ˝



    ▶ ▶

    View full-size slide


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

    View full-size slide

  24. {}
    /* ͍ΘΏΔϘλϯ */
    !
    .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

    View full-size slide

  25. {}
    /* ͍ΘΏΔϘλϯ */
    !
    .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

    View full-size slide

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

    ˛
    ˝



    ▶ ▶

    View full-size slide

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

    ˛
    ˝



    ▶ ▶

    &

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  31. ɹ͕࿈ଓͨ͠
    ྑ͘ͳ͍ঢ়ଶ

    View full-size slide

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

    ˛
    ˝



    ▶ ▶

    View full-size slide

  33. {}
    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 full-size slide

  34. {}
    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

    View full-size slide

  35. {}
    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&ʜ

    View full-size slide

  36. &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 full-size slide

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

    ˛
    ˝



    ▶ ▶


    View full-size slide

  38. 5
    %SBX

    *NBHF
    6
    4UZMFT
    3BTUFSJ[F

    %FDPEF
    3FTJ[F


    %JTQMBZ
    &

    View full-size slide

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

    View full-size slide

  40. http://css3exp.com/moon/

    View full-size slide

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

    View full-size slide

  42. OPOF


    CPYTIBEPX

    CPSEFSSBEJVT

    EPUUFECPSEFS

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

    View full-size slide

  43. OPOF


    CPYTIBEPX

    CPSEFSSBEJVT

    EPUUFECPSEFS

    TIBEPXEPUUFE

    TIBEPXSBEJVT

    SBEJVTEPUUFE

    BMMNJY

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

    View full-size slide

  44. 7
    "SFB ྖҬͷେ͖͞


    $PNQMFYJUZ ෳࡶ͞


    View full-size slide

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

    View full-size slide

  46. Topcoat
    http://bench.topcoat.io/

    View full-size slide

  47. Ћ
    get more smoothness

    View full-size slide

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

    (16$PNQPTJUJOH

    View full-size slide

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

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

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. $PNQPTJUJOH-BZFS PO(16

    /PSNBM-BZFS FWFSZ$16

    View full-size slide

  54. (165FYUVSF

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

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

    View full-size slide





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

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

    View full-size slide


  56. ;▻
    PQBDJUZO

    >
    USBOTMBUF Y Z

    ?
    @
    TDBMF O



    SPUBUF OEFH

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

    View full-size slide

  57. "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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  61. SPUBUF
    Ξχϝʔγϣϯத

    View full-size slide


  62. BTTVNFE0WFSMBQ
    ॏͳͬͯΔͬΆ͍

    View full-size slide

  63. έʔεελσΟ
    $BTF4UVEZ

    View full-size slide

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

    View full-size slide

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

    4NPPUI

    View full-size slide

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

    '14

    '14

    View full-size slide

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

    '14

    '14

    View full-size slide

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

    View full-size slide

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

    +BOL

    +BOL

    View full-size slide

  70. ๭ϓϩδΣΫτ
    j

    View full-size slide



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

    View full-size slide

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

    View full-size slide

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

    border-radius
    +
    dashed border

    View full-size slide

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

    border-radiusを
    消してみた

    View full-size slide

  75. $44ͷ࢓ࣄ͗͢͠஫ҙ
    CSSͰग़དྷΔ͜ͱ͔Βٯࢉͯ͠ෳࡶʹ͢Δͷ΋ة͏͍

    View full-size slide

  76. ๭ϓϩδΣΫτ2
    p

    View full-size slide



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

    View full-size slide

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

    View full-size slide



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

    View full-size slide

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

    View full-size slide

  81. 0I
    Σ(´Д`;)

    View full-size slide

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

    View full-size slide

  83. (165FYUVSF

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

    描画データを
    キープしといて
    GPU上で合成
    広域に適用する

    常に描画内容が更新される

    GPUへの再転送コストが高くなる

    描画処理に副作用がでる可能性!!

    View full-size slide

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

    View full-size slide

  85. ๭ϓϩδΣΫτ3
    x

    View full-size slide



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

    View full-size slide

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

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




    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  98. ·ͱΊ
    $PODMVTJPO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  101. Thank you
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    !

    View full-size slide

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

    View full-size slide