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

Web Frontend Performance Tuning TIPS *n

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
January 25, 2014

Web Frontend Performance Tuning TIPS *n

Frontrend in Fukuoka http://frontendfrogs.org/frontrend/ で使用したスライドです。本編45分。

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

January 25, 2014
Tweet

Transcript

  1. 1FSGPSNBODF 5VOJOH5*14 O 'SPOUSFOEJO'VLVPLB "ZVNV4BUP!BIPNV ! GSPOUSFOE@GGB

  2. ࠤ౻า ͞ͱ͏ ͋ΏΉ

  3. ϋϯυϧωʔϜ BIPNV !

  4. IUUQBIPNV ڵຯ΋ͬͯͩͬͨ͘͞Βθώ

  5. ຊ୊

  6. 1BHF4QFFE PS :4MPX ීஈɺݟͯΔํʁ

  7. ͋Δ੍࡞ͱ͓٬͞Μͱ ͔͍͍ͬ͜αΠτ

  8. " # ௒͔͍͍ͬ͜ αΠτͭ͘ΕͨΘʔ ! ͓٬͞Μ΋େຬ଍ͩΘʔ ੍࡞ऀ

  9. $ # ࠓɺग़ઌͳΜͰ͚͢Ͳ αΠτ։͚ͳ͘ͳ͍Ͱ͔͢ʁ ͓٬͔Βి࿩

  10. " # ͋Εʔ ΅͘ͷ1$Ͱ͸։͚·͢Αʁ ! ͍΍͊ɺ͔͍͍ͬ͜ͳ͊ ੍࡞ऀ

  11. $ # ͦ͏Ͱ͔͢ ! ͱ͜ΖͰίϯόʔδϣϯ ্͕Βͳ͍ΜͰ͚͢Ͳ ͳΜͱ͔ͳΓ·ͤΜʁ ͓٬͔Βి࿩

  12. " # ͑ʔɺࠔͬͨͳ͊ ! ͡Ό͋΋ͬͱ ը૾ͱ͔࢖ͬͯ ͔ͬ͜Α͘͠·͠ΐ͏ ੍࡞ऀ

  13. $ # Θ͔Γ·ͨ͠ ! ɾɾɾ ͓٬͔Βి࿩

  14. ϞόΠϧͰॏͯ͘։͚ͳ͍ ։͍ͯ΋εΫϩʔϧ͕ॏ͍ɾΧΫΧΫ Ϣʔβʔʹ཭୤͞Εͯ͠·͏ ίϯόʔδϣϯʹࢸΒͳ͍

  15. ʊਓਓਓਓਓਓਓਓਓʊ ʼɹಥવͷܖ໿ऴྃɹʻ ʉ:?:?:?:?:?:?:?:ʉ

  16. ͦ͏ͳΒͳ͍ͨΊʹ ஌͓͖͍ͬͯͨ5*14Λ ঺հ͠·͢

  17. ύϑΥʔϚϯεͷಈػ ߟ͑ํͱಋೖ 5JQT O ωοτϫʔΫίετ ϨϯμϦϯά εΫϦϓτॲཧ ΠϯλϥΫγϣϯ ·ͱΊ

  18. *OUSPEVDUJPO ߟ͑ํͱಋೖ

  19. 'SPOUFOE 1FSGPSNBODF ϑϩϯτΤϯυͱύϑΥʔϚϯεͷؔ܎

  20. IUUQXXXTUFWFTPVEFSTDPNCMPHUIFQFSGPSNBODFHPMEFOSVMF

  21. 4UFWF 4PVEFST ʠ PG UIF FOEVTFS SFTQPOTF UJNF JT TQFOU

    PO UIF GSPOUFOEʡ
  22. None
  23. ▻▻▻▻▻ & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS

    * )5.-
  24. & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS *

    )5.- MJOLISFGGPPDTTʜ TDSJQUTSDCBSKTʜ JNHTSDRVYKQHʜ
  25. & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS *

    )5.- ◅◅◅◅◅ (&5GPPDTT (&5CBSKT (&5RVYKQH ◅◅◅◅◅ ◅◅◅◅◅
  26. & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS *

    )5.- ▻▻▻▻▻ ▻▻▻▻▻ ▻▻▻▻▻ * $44 * +4 , +1(
  27. & ' #BDLFOE %# 8FC"QQ ( ) 'SPOUFOE #SPXTFS *

    )5.- ▻▻▻▻▻ ▻▻▻▻▻ ▻▻▻▻▻ * $44 * +4 , +1( ϑϩϯτΤϯυͷ੹೚
  28. Ћ ΋͏ͻͱͭŋŋŋ

  29. *OUFSBDUJPO69 ϢʔβʔͱΠϯλʔϑΣʔεͷର࿩

  30. εΫϩʔϧ͕஗͍ ΧΫΧΫ͢ΔαΠτ ␡

  31. ϘλϯΛԡͯ͠΋ ൓Ԡ͕ͳ͍αΠτ ␡

  32. ݟӫ͑͢Δ͚Ͳ ΠϥΠϥ͢ΔαΠτ ␡

  33. ࢖༻ײɾ৺஍Α͞΋ ޿ٛͷύϑΥʔϚϯε ✓

  34. ϑϩϯτͷ޻෉Ͱ վળͰ͖Δ͜ͱ͸͢Δ ✓

  35. 5*14ΛूΊͨཧ༝

  36. IUUQTEFWFMPQFSTHPPHMFDPNTQFFEEPDTJOTJHIUTSVMFT

  37. IUUQEFWFMPQFSZBIPPDPNQFSGPSNBODFSVMFTIUNM

  38. ͙͢ʹ࢖͑ͯ ཁ఺Λ͓͑͞΍͍͢

  39. 5*14ˠཧ༝Λ஌Δ

  40. ࣌ͱ৔߹ʹΑͬͯ ൑அͰ͖ΔΑ͏ʹ͢Δ

  41. /FUXPSLJOH O ωοτϫʔΫίετ

  42. 3FEVDF 3FRVFTUT4J[F ϦΫΤετͷ਺ͱϑΝΠϧαΠζΛݮΒ͢

  43. "CPWFUIFGPME ϑΝʔετϏϡʔΛ଎͘ݟͤΔ

  44. ✓ ❓ ⚠ ը૾Ϧιʔε͸ඞͣ ࠷దԽͯ͠αΠζΛ཈͑Δ ը࣭Λอͪͳ͕ΒσʔλαΠζͷѹॖޮ཰Λ ߴΊͨΓɺ༨෼ͳ৘ใΛ࡟আͨ͠Γ͢Δ ! ! ௿ίετɾߴϦλʔϯͳରࡦͳͷͰ

    ͜Ε͕΍Εͯͳ͍ͱɺ͔ͳΓϞολΠͳ͍
  45. ✓ ❓ ⚠ ςΩετϦιʔεʹ͸ ࠷খԽΛద༻͢Δ ͍ΘΏΔ.JOJGZॲཧɹεϖʔε΍վߦͳͲΛ औΓআ͍ͯɺϑΝΠϧαΠζΛখ͘͢͞Δ ! ! ߋ৽͢ΔͨͼʹखಈͰ΍Βͳ͍

    ඞͣπʔϧΛ࢖ͬͯࣗಈԽ͢Δ
  46. IUUQBMQIBQJYFMTDPNQSFQSPT

  47. IUUQJODJEFOUDPNDPEFLJU

  48. IUUQHSVOUKTDPN

  49. ✓ ❓ ⚠ $444QSJUFTͱ %BUB63*Λ༗ޮʹ࢖͏ ը૾Λຕʹ·ͱΊͨΓɺ$44ͷதʹจࣈྻͰ ຒΊࠐΉ͜ͱͰɺϦΫΤετ਺Λઅ໿Ͱ͖Δ ! ! ໨҆,#Ҏ಺Ͱ͓͞·ΔΑ͏ʹͯ͠

    ͻͱͭͷϑΝΠϧΛେ͖͗͘͢͠ͳ͍Α͏஫ҙ
  50. %BUB63* $444QSJUFT , , , , ,, ,,, , ,

    , , , , , , , , , , , , , , * $44 , , , , , , div { width: 100px; height: 50px; border-radius: 3px; … .. .
  51. ⬅ όΠφϦσʔλΛ จࣈྻͱͯ͠ຒΊࠐΉ * $44 background-image: url(“data:image/ jpeg;base64,/9j4AAQSkZJRgABAQAA AQABAAD2wBDAAMCAggICAgICAgI CAgICAgICAgICAgICAgICAgICAgICA

    gICAgICAgICAgICAoICAgICQoKCAg MDAoIDAgICQj2wBDAQMEBAYFBgo GBgoNDAwNDQ0NDQwMDQ0MDA0 MDQ0MDAwMDQwMDAwMDAwMDA wMDAwMDAwMDAwMDAwMDAwMD AwMDAzwAARCADIAMgDAREAAhEB AxEB8QAHQAAAgEFAQEAAAAAAAA AAAAAAQIAAwQFBgcICfEAEUQAAIB AgMEBwMJBgUDBQAAAAECAAMRB BIhBQYxQQcIE1FhcZEiMoEjQlJicqGx wfAUM4KissIVNFPR8WOSoyRDc4Ph8 QAGwEAAgIDAQAAAAAAAAAAAAAA AAECAwQFBgf/xAAvEQACAgEEAg…
  52. ΋͠.#΋͋Δͱʜ .#ಡΈࠐ·ΕΔ·Ͱ ελΠϧ͕ద༻͞Εͳ͍ %BUB63*ͷը૾΋දࣔ͞Εͳ͍ ʘ ?P? ʗ * $44 ,

    , , , , , div { width: 100px; height: 50px; border-radius: 3px; … .. .
  53. ✓ ❓ ⚠ ͢΂ͯͷը૾Λ3FUJOB޲͚ʹ YͰ༻ҙ͠ͳͯ͘΋Α͍ େ͖͘ݟͤͳ͍͍ͯ͘αϜωΠϧը૾͸ ͦ΋ͦ΋YͰे෼ͳ͜ͱ͕ଟ͍ ! ! ςΩετը૾΍ΩʔϏδϡΞϧ͸

    ͕͢͞ʹY͡Όͳ͍ͱਏ͍
  54. ✓ ❓ ⚠ &YQJSFTͳͲͷϔομʔͱ H[JQѹॖΛඞͣద༻͢Δ &YQJSFTϔομʔͰΩϟογϡΛ׆༻ͯ͠ H[JQͷઃఆͰసૹྔΛ͓͑͞Δ ! ! ඇৗʹॳาత͕ͩɺݟಀͯ͠͠·͏ͱ

    μϝʔδ͕େ͖͍ͷͰඞͣνΣοΫ͍ͨ͠
  55. IUUQEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT

  56. XXXHPPHMFDPNBOBMZUJDT

  57. IUUQXXXXFCQBHFUFTUPSH

  58. 3FOEFSJOH O ϨϯμϦϯά

  59. "WPJE$PNQMFYJUJFT ෳࡶʹ͠ͳ͍

  60. ✓ ❓ ⚠ ϨΠΞ΢τɾ࠶഑ஔ͕ ஗Εͯൃੜ͠ͳ͍Α͏ʹ͢Δ Ϩεϙϯγϒͳը૾΋ղ૾౓͝ͱʹ IFJHIU͚ͩͰ΋ܾΊΕ͹ΨίͬͯͳΒͳ͍ ! ! ྫ͑͹JNHͷXJEUI

    IFJHIU͕ͳ͍ͱ ը૾ಡΈࠐΈ࣌ʹΨΫͬͱͳͬͯ͠·͏
  61. ✓ ❓ ⚠ ߴίετͳ$44͸ ৻ॏʹऔΓѻ͏ CPYTIBEPX΍CPSEFSSBEJVTͳͲͷ ͍ΘΏΔ$44͸ඳըίετ͕௿͘ͳ͍ ! ! ૊Έ߹ΘͤΔͱɺඳըύε͕ෳࡶʹͳΔͷͰ

    ಛʹඳըύϑΥʔϚϯε͕ྼԽ͠΍͍͢
  62. # ͜ΕΛͷ ج४ͱ͢Δ

  63. # 

  64. # 

  65. ✓ ❓ ⚠ (16ΞΫηϥϨʔγϣϯ͕ ద༻͞ΕΔ$44Λར༻͢Δ USBOTMBUFEͳͲ(16ΞΫηϥϨʔγϣϯ͕ ద༻͞ΕΔ$44Λ࢖͏ͱ׈Β͔ʹಈ͘ ! ! ͓·͡ͳ͍ͱͯ͠࢖͍͗͢Δͱ

    Ωπ͍ͬ͠΃ฦ͕͋͠Δ
  66. None
  67. None
  68. IUUQTEFWFMPQFSTHPPHMFDPNFWFOUTJPTFTTJPOT

  69. $PNQPTJUJOH-BZFS PO(16 /PSNBM-BZFS FWFSZ$16

  70. (165FYUVSF # ߋ৽͕͋Ε͹ ඳըσʔλΛ (16ʹ࠶సૹ # ඳըσʔλΛ Ωʔϓ͠ͱ͍ͯ (16্Ͱ߹੒

  71. ◅ ◅ ◅ # ޿͍ൣғΛ ࠶ඳը͠ͳ͍͔Β εϜʔζ # ϨΠϠʔؙ͝ͱΛ ૢ࡞ͤ͞Δ͚ͩͰ

    αΫαΫҠಈ
  72. 4DSJQUJOH O εΫϦϓτॲཧ

  73. 5IJOL $PNQVUJOH ϒϥ΢βͷؾ࣋ͪʹͳͬͯॻ͘

  74. ✓ ❓ ⚠ K2VFSZͷηϨΫλΛ ͖ͪΜͱΩϟογϡ͢Δ K2VFSZʹηϨΫλΛ౉ͯ͠ཁૉΛબ୒͢Δͱ͖ ୳ࡧ݁ՌΛฦ͢ͷͰɺͦΕΛΩϟογϡ͢Δ ! ! Ωϟογϡ͠ͳ͍ͱɺຖճηϨΫλΛ૸Βͤͯ

    ཁૉΛ୳ࡧ͍ͯ͠Δ͜ͱʹͳͬͯ͠·͏
  75. ! $(‘#list’).append(‘<li>Item1</li>’); $(‘#list’).append(‘<li>Item2</li>’); $(‘#list’).append(‘<li>Item3</li>’); $(‘#list’).append(‘<li>Item4</li>’); $(‘#list’).append(‘<li>Item5</li>’); ! <ul id=“list”></ul>

  76. var $list = $(‘#list’); $list.append(‘<li>Item1</li>’); $list.append(‘<li>Item2</li>’); $list.append(‘<li>Item3</li>’); $list.append(‘<li>Item4</li>’); $list.append(‘<li>Item5</li>’); !

    <ul id=“list”></ul>
  77. var $list = $(‘#list’); $list.append(‘<li>Item1</li>’); $list.append(‘<li>Item2</li>’); $list.append(‘<li>Item3</li>’); $list.append(‘<li>Item4</li>’); $list.append(‘<li>Item5</li>’); !

    <ul id=“list”></ul>
  78. var $list = $(‘#list’); // ͪΐͬͱۃ୺Ͱ͕͢… $list.append(‘<li>Item1</li>’ + ’<li>Item2</li>’ +

    ‘<li>Item3</li>’ + ‘<li>Item4</li>’ + ‘<li>Item5</li>’); ! <ul id=“list”></ul>
  79. ✓ ❓ ⚠ Πϕϯτ͸%FMFHBUFΛ ࢖ͬͯ·ͱΊΔ ୔ࢁ͋Δɾಈతʹ૿͑ΔՄೳੑ͕͋Δཁૉ΁ͷ Πϕϯτ͸ɺ%FMFHBUF ҕৡ Λ࢖͏ !

    ਺ඦηϧ͋ΔΤΫηϧ෩ͳϑϩϯτ࣮૷Λ૝૾ʜ
  80. // ͨ͘͞Μͷ TD ΁ɺݸผʹΠϕϯτΛషΔ $(‘table td’).on(‘click’, function() { // do

    something }); ! // ͻͱͭͷ table ʹΠϕϯτΛషΔ $(‘table’).on(‘click’, ‘td’, function() { // do something });
  81. // ͨ͘͞Μͷ TD ΁ɺݸผʹΠϕϯτΛషΔ $(‘table td’).on(‘click’, function() { // do

    something }); ! ! <table> <tr> <td>ηϧ1</td> <td>ηϧ2</td> <td>ηϧ3</td> </tr> </table> #    2
  82. // ͻͱͭͷ TABLE ʹΠϕϯτΛషΔ $(‘table’).on(‘click’, ‘td’, function() { // do

    something }); ! ! <table> <tr> <td>ηϧ1</td> <td>ηϧ2</td> <td>ηϧ3</td> <tr> </table> #     ! 2
  83. ✓ ❓ ⚠ TDSPMM SFTJ[FͷΠϕϯτΛ ؒҾ͍ͯॲཧ͢Δ UISPUUMF ɹ࿈ଓݺͼग़͠ΛOϛϦඵͷपظʹؒҾ͍࣮ͯߦ ! EFCPVODF

    ɹOϛϦඵҎ಺ͷ࿈ଓݺͼग़͠Λແࢹͯ͠ ɹݺͼग़͕͓͠͞·ͬͨΒ࣮ߦ
  84. /* Underscore.JS */ ! // scroll ʹ߹ΘͤͯҐஔΛߋ৽͢ΔԿ͔ var throttled =

    _.throttle(updatePos, 100); $(window).scroll(throttled); ! // resize ʹ൓Ԡͯ͠ϨΠΞ΢τ͠௚͢Կ͔ var lazyLayout = _.debounce(calcLayout,300); $(window).resize(lazyLayout);
  85. UISPUUMFNT EFCPVODFNT NT͝ͱʹൃՐ͢ΔΠϕϯτ

  86. ✓ ❓ ⚠ ҙຯͷബ͍ϕϯνϚʔΫʹ ࿭Θ͞Εͳ͍ɾؾʹ͠ͳ͍ ࠣࡉ͗͢ΔύϑΥʔϚϯεΑΓ͸ ه๏ͷ౷ҰੑɾՄಡੑ͕༏ઌ͞ΕΔ΂͖ ! ! ଎͍ɾ஗͍ͷϕϯνϚʔΩϯά͸ඇৗʹେࣄ

    ͚ͲɺͦͷॲཧΛίʔϧ͢Δස౓Λߟ͑Δ
  87. ✓ ❓ ⚠ ϝϞϦϦʔΫͷճආ +4Τϯδϯͷ࠷దԽߟྀ <&>.*/ #SPXTFS$PNQVUJOH4USVDUVSF ! ৄ͘͠͸ɺ͜ͷ࣍ͷ࣍ͷηογϣϯͰʂ !

    Ͱ΋ͪΐͬͱ͚ͩʜ
  88. IUUQXXXIUNMSPDLTDPNFOUVUPSJBMTQFSGPSNBODFNZTUFSZ

  89. function updateSprites(dt) { for (var sprite in sprites) { sprite.position.x

    += 0.5 * dt; // 20 more lines of arithmetic computation. } }
  90. function updateSprites(dt) { for (var sprite in sprites) { updateSprite(sprite,

    dt); } } ! function updateSprite(sprite, dt) { sprite.position.x += 0.5 * dt; // 20 more lines of arithmetic computation. } ϧʔϓ಺ͷॲཧΛผؔ਺ʹ෼཭͢Δ͜ͱͰ ࠷దԽ͕ద༻͞ΕΔΑ͏ʹͳͬͨ Β͍͠
  91. *OUFSBDUJPO O ΠϯλϥΫγϣϯ

  92. JO.PCJMF ओʹϞόΠϧܥͷ࿩

  93. ✓ ❓ ⚠ ஗Ԇϩʔυ࣌ͷ ௿ղ૾౓ϓϨʔεϗϧμʔ σϑΥϧτͰαΠζٯࢉ,#ͷ௿ղ૾౓ εΫϩʔϧ஗ԆͰຊདྷͷߴղ૾౓ʹ͔͑͞͠ ! ! ωοτϫʔΫతʹϦΫΤετ਺͸΋ͪΖΜ૿͑Δ

    ͚ͲɺମײΛ্͛ΒΕΔͱ͜Ͱ͸࢖͏΂͖
  94. ✓ ❓ ⚠ ϩʔσΟϯάදࣔ͸ NT଴ͬͯग़͢ ͦΕҎԼͰ͋Ε͹ɺϩʔσΟϯάද͕ࣔ໌໓ͯ͠ ͠·͏͚ͩͰٯʹݟӫ͕͑ྑ͘ͳ͍ ͜͏͍͏εϐφʔܥͷ΍ͭ

  95. var timer; ! $(document).on(‘ajaxSend’, function(){ timer = setTimeout(function() { $(‘#loading’).show();

    }, 300); }); ! $(document).on(‘ajaxComplete’, function(){ clearTimeout(timer); $(‘#loading').hide(); });
  96. ✓ ❓ ⚠ λοϓ࣌ͷঢ়ଶදݱΛ పఈతʹ͚ͭΔ ϒϥ΢βඪ४ͷUBQIJHIMJHIUDPMPSͰ΋Α͍͠ UPVDITUBSU_FOEͰDMBTTΛண୤ͯ͠΋Α͍ ! ! UBQIJHIMJHIUDPMPSΛSHCB

        ʹ ઃఆͨ͠··ແ൓Ԡͳ6*ʹ͢Δͷ͸࠷ѱ
  97. // λον։࢝࣌ʹɺis-activeΫϥεΛ෇༩͢Δ $(document).on('touchstart','a',function() { $(this).addClass('is-active'); }); ! // λονऴྃ࣌ʹɺis-activeΫϥεΛղআ͢Δ $(document).on('touchend',

    'a', function() { $(this).removeClass('is-active'); }); ! // ݫີʹ͸ɺUIͷछྨʹΑͬͯɺΫϥεண୤ͷͱ͖ʹ // σΟϨΠΛ͔͚ͯνϡʔχϯά͠ͳ͍ͱࣗવʹͳΒͳ͍
  98. ✓ ❓ ⚠ ը໘શମͷτϥϯδγϣϯ͸ ίεύѱ͍ͷͰආ͚Δ ΍Ε͹Ͱ͖Δ͕ɺ޿͍ൣғΛαϙʔτ͢Δʹ͸ ݕূίετɾෆ۩߹ରԠίετ͕ߴ͍ ! ! K2VFSZ.PCJMFͰ͢ΒͰ஍ຯʹͳΓ

    ͷσϞ͸ߋʹফۃతͳײ͡ʹͳ͍ͬͯΔ
  99. ✓ ❓ ⚠ ϞόΠϧʹ͓͚ΔDMJDLͷ NTσΟϨΠΛ஌Δ ϞόΠϧϒϥ΢β͸μϒϧλοϓͷ൑ఆͷͨΊ λοϓ͔ͯ͠ΒDMJDLͷൃੜ͕NT஗Ԇ͢Δ ! ϥΠϒϥϦΛ࢖ͬͯվળ͢Δ͜ͱ͸Ͱ͖Δ ୯ͳΔUPVDITUBSU

    UPVDIFOEͰ͸աහ͗͢Δ
  100. IUUQVQEBUFTIUNMSPDLTDPNNTUBQEFMBZHPOFBXBZ

  101. IUUQXXXTJUFQPJOUDPNXBZTQSFWFOUNTDMJDLEFMBZNPCJMFEFWJDFT

  102. IUUQTEFWFMPQFSTHPPHMFDPNTQFFEQBHFTQFFEJOTJHIUT

  103. λοϓαΠζ͕খ͍͞ͱ͍͏ܯࠂ

  104. $PODMVTJPO ·ͱΊ

  105. ΤϯδχΞϦϯά ͇ ΠϯλϥΫγϣϯ

  106. ΤϯδχΞϦϯάͷ ͢΂ͯΛ஌Δ͜ͱ͸ ೉͍͠

  107. ΠϯλϥΫγϣϯͷ ͢΂ͯΛݕূ͢Δ͜ͱ΋ ೉͍͠

  108. ྆ऀͷྑ͍όϥϯεΛ ୳ΔϑϩϯτΤϯυ

  109. 5IBOLT IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂

  110. 1IPUPTCZʜ ΫϨϤϯIUUQXXXGMJDLSDPNQIPUPTMBGGZL *OUSPEVDUJPOIUUQXXXGMJDLSDPNQIPUPTKJOUFSXBT /FUXPSLJOHIUUQXXXGMJDLSDPNQIPUPTLFXM 3FOEFSJOHIUUQXXXGMJDLSDPNQIPUPTKEIBODPDL 4DSJQUJOHIUUQXXXGMJDLSDPNQIPUPTOZVIVIVV *OUBSBDUJPOIUUQXXXGMJDLSDPNQIPUPTTUPLFENFEJBQIPUPHSBQIZ $PODMVTJPOIUUQXXXGMJDLSDPNQIPUPTTBBE