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 Slide

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

    View Slide

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

    View Slide

  4. ZFBSTBHPʜ
    Ѫ͢΂͖Web

    View Slide

  5. View Slide

  6. View Slide

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

    View Slide

  8. View Slide

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

    View Slide

  10. NT
    milli second

    View Slide


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

    View Slide

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

    View Slide

  13. "


    &

    -PBE %JTQMBZ 6TJOH $MPTF
    *OJUJBM

    View Slide


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

    "


    &

    -PBE %JTQMBZ 6TJOH $MPTF
    *OJUJBM

    View Slide

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

    View Slide

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

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

    View Slide

  17. '14ͷ͸ͳ͠
    '145JNFMJOF

    View Slide

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

    View Slide

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




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

    View Slide

  20. NTGNTG
    ʜ

    View Slide

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

    View Slide

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

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

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

    View Slide

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

    View Slide

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

    ˛
    ˝



    ▶ ▶

    View Slide

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

    ˛
    ˝



    ▶ ▶

    View Slide


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

    View Slide

  36. 5IF#VUUPO

    View Slide

  37. {}
    /* ͍ΘΏΔϘλϯ */
    !
    .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)
    }
    [email protected]

    View Slide

  38. {}
    /* ͍ΘΏΔϘλϯ */
    !
    .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)
    }
    [email protected]
    "QQMZ4UZMF
    -BZPVU
    1BJOU

    View Slide

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

    ˛
    ˝



    ▶ ▶

    View Slide

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

    ˛
    ˝



    ▶ ▶

    &

    View Slide






  41. View Slide










  42. View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    ˛
    ˝



    ▶ ▶

    View Slide

  48. {}
    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 Slide

  49. {}
    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 Slide

  50. {}
    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 Slide

  51. &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 Slide

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

    ˛
    ˝



    ▶ ▶


    View Slide

  53. 5
    %SBX

    *NBHF
    6
    4UZMFT
    3BTUFSJ[F

    %FDPEF
    3FTJ[F


    %JTQMBZ
    &

    View Slide

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

    View Slide

  55. http://css3exp.com/moon/

    View Slide

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

    View Slide

  57. OPOF


    CPYTIBEPX

    CPSEFSSBEJVT

    EPUUFECPSEFS

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

    View Slide

  58. OPOF


    CPYTIBEPX

    CPSEFSSBEJVT

    EPUUFECPSEFS

    TIBEPXEPUUFE

    TIBEPXSBEJVT

    SBEJVTEPUUFE

    BMMNJY

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

    View Slide

  59. 7
    "SFB ྖҬͷେ͖͞


    $PNQMFYJUZ ෳࡶ͞


    View Slide

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

    View Slide


  61. NT

    View Slide


  62. NT

    View Slide


  63. NT

    View Slide

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

    View Slide

  65. View Slide

  66. View Slide

  67. Ћ
    get more smoothness

    View Slide

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

    (16$PNQPTJUJOH

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  73. $PNQPTJUJOH-BZFS PO(16

    /PSNBM-BZFS FWFSZ$16

    View Slide

  74. (165FYUVSF

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

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

    View Slide





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

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

    View Slide


  76. ;▻
    PQBDJUZO

    >
    USBOTMBUF Y Z

    ?
    @
    TDBMF O



    SPUBUF OEFH

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

    View Slide

  77. "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 Slide

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

    View Slide

  79. View Slide

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

    View Slide

  81. View Slide

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

    View Slide

  83. View Slide


  84. SPUBUF
    Ξχϝʔγϣϯத

    View Slide


  85. BTTVNFE0WFSMBQ
    ॏͳͬͯΔͬΆ͍

    View Slide

  86. View Slide

  87. έʔεελσΟ
    $BTF4UVEZ

    View Slide

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

    View Slide

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

    4NPPUI

    View Slide

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

    '14

    '14

    View Slide

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

    '14

    '14

    View Slide

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

    View Slide

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

    +BOL

    +BOL

    View Slide

  94. ๭ϓϩδΣΫτ
    j

    View Slide



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

    View Slide

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

    View Slide

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

    border-radius
    +
    dashed border

    View Slide

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

    border-radiusを
    消してみた

    View Slide

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

    View Slide

  100. ๭ϓϩδΣΫτ2
    p

    View Slide



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

    View Slide

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

    View Slide



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

    View Slide

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

    View Slide

  105. 0I
    Σ(´Д`;)

    View Slide

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

    View Slide

  107. (165FYUVSF

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

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

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

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

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

    View Slide

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

    View Slide

  109. ๭ϓϩδΣΫτ3
    x

    View Slide



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

    View Slide

  111. View Slide

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

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




    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  123. ·ͱΊ
    $PODMVTJPO

    View Slide

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

    View Slide

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

    View Slide

  126. Thank you
    IUUQBIPNV
    !BIPNV
    HJUIVCDPNBIPNV
    !

    View Slide

  127. 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 Slide