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

Browser Computing Structure

0d605a3350dd7e91b8136aecffd5ceeb?s=47 Shogo Sensui
January 25, 2014

Browser Computing Structure

2014/1/25に開催されたFrontrend in FukuokaのBrowser Computing Structureのセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

January 25, 2014
Tweet

Transcript

  1. Browser Computing Structure Frontrend in Fukuoka @1000ch

  2. @1000ch

  3. Frontend Developer

  4. ໨࣍ มԽ͢ΔWebͱJavaScriptͷ໾ׂ ϒϥ΢β͕ԿΛ͍ͯ͠Δ͔Λ஌Δ ϒϥ΢β͕஗͘ͳΔݪҼΛ஌Δ ࠷దԽΞϓϩʔν

  5. มԽ͢ΔWebͱ JavaScriptͷ໾ׂ

  6. None
  7. • ςΩετϕʔεͷWebαΠτ • ίϯςϯπͷߋ৽͸ભҠ͕த৺ • ૷০͸<marquee>ͱ͔<blink>ͱ͔… ੩తͳWeb

  8. None
  9. • ඇಉظ௨৴ʹΑΔίϯςϯπͷߋ৽
 ʢGoogleϚοϓɾGoogleαδΣετ౳ʣ • JavaScript͕μΠφϛοΫͳWebαΠτͷ
 ՄೳੑΛHTMLʹ΋ͨΒͨ͠ ಈతͳWeb

  10. None
  11. • HTML5΍CSS3ͱ͍ͬͨɺ
 ٕज़ͷඪ४Խͱඈ༂తͳਐԽ • ϒϥ΢βͰग़དྷΔ͜ͱ͕૿͑ͨ
 (WebGLɾWebAudioɾWebSocket…) ϦονͳWeb

  12. JavaScriptͳ͠ʹ HTML5ΛޠΕͳ͍

  13. ରԠͷ೉͠͞ ϕϯμʔͷ਺×OSͷόʔδϣϯ ʹൺྫͯ͠૿Ճ͢Δ࣮૷ϦεΫ

  14. ͔֬ଘࡏ͢Δίετ ϚγϯεϖοΫʹࠨӈ͞ΕΔ্ʹ
 ϞόΠϧ୺຤ͩͱͳ͓͞Β͕ࠩݦஶ

  15. ύϑΥʔϚϯε͕ ٘ਜ਼ʹͳΓ͕ͪ

  16. Amazon 100msͷߴ଎Խ ച্1%૿Ճ Mozilla Google 2200msͷߴ଎Խ μ΢ϯϩʔυ15.4%૿Ճ 400msͷߴ଎Խ ݕࡧճ਺0.59%૿Ճ

  17. ύϑΥʔϚϯε͸
 ࠷΋ॏཁͳUXࢦඪ ύϑΥʔϚϯε͸WebαΠτͷ඼࣭Ͱ͋Δ ͔ͬ͜Αͯ͘΋஗͍αΠτʹϢʔβʔ͸ຬ଍͠ͳ͍

  18. ϒϥ΢β͕
 ԿΛ͍ͯ͠Δ͔Λ஌Δ

  19. σʔλͷཁٻͱμ΢ϯϩʔυ URLͷೖྗ΍ϖʔδભҠ౳ HTML ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ

  20. ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ σʔλͷཁٻͱμ΢ϯϩʔυ URL HTML΍CSSͷղੳͱඳը ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ

  21. ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ σʔλͷཁٻͱμ΢ϯϩʔυ URL HTML ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ

  22. ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ σʔλͷཁٻͱμ΢ϯϩʔυ URLͷೖྗ΍ϖʔδભҠ౳ HTML΍CSSͷղੳͱඳը ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ

  23. ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ σʔλͷཁٻͱμ΢ϯϩʔυ URLͷೖྗ΍ϖʔδભҠ౳ HTML΍CSSͷղੳͱඳը ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ

  24. σʔλͷཁٻͱμ΢ϯϩʔυ URL HTML ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ ϖʔδͷϩʔυ։͔࢝Β දࣔ͞ΕΔ·Ͱ

  25. σʔλͷཁٻͱμ΢ϯϩʔυ URL HTML ϨϯμʔπϦʔͷϨΠΞ΢τͱϖΠϯτ ϢʔβʔΞΫγϣϯͷԠ౴ ΫϦοΫ΍εΫϩʔϧͷΠϯλϥΫγϣϯ ϖʔδ͕දࣔ͞Ε͔ͯΒ ࣍ͷભҠ·Ͱͣͬͱ

  26. Render Compute Network ύϑΥʔϚϯεͷ3େཁૉ

  27. Render Compute Network ϖʔδදࣔ·ͰͷΠχγϟϧίετ →ϑΝʔετΠϯϓϨογϣϯ

  28. Render Compute Network εΫϩʔϧͷ׈Β͔͞΍ϖʔδԠ౴ →Ϣʔβʔͷ࢖͍৺஍

  29. Chrome DevTools ϒϥ΢βɺͦͯ͠࠷ڧͷ։ൃऀπʔϧ Firebug΋͍͍͚Ͳ΍ͬͺChrome Command + option + i

  30. Google Chrome Canary Chromeͷ։ൃऀ޲͚Ϗϧυ DevToolͷ৽ػೳΛ͍ͪૣ͘ࢼͤΔ ͨ·ʹෆ҆ఆ…

  31. DevTools > Network Network HTTPϦΫΤετͷ਺ ϦιʔεαΠζͷνΣοΫ όουϦΫΤετ͕ͳ͍͔Ͳ͏͔
 ωοτϫʔΫपΓͷ࠷దԽ

  32. DevTools > Timeline Render FPSͷ஋ͷνΣοΫ
 ϨΠΞ΢τ΍ϖΠϯτͷλΠϛϯά ΠϕϯτͷൃՐ΍GCͷ࣮ߦܗ੻ ϒϥ΢β͕ͲͷΑ͏ͳॲཧ Λ͍ͯ͠Δ͔େମΘ͔Δ

  33. DevTools > Profiles Compute JavaScriptͷ࣮ߦίετ ώʔϓྖҬʹஔ͔ΕΔΦϒδΣΫτ TimelineΑΓࡉ͔͍ϝϞϦͷঢ়ଶ εΫϦϓτपΓͷௐࠪ

  34. Compute ࠓ೔͸Computingͷ࿩

  35. Keep 60FPS • FPS = Frames Per Second • ϒϥ΢β͸1ඵؒʹ60ճϦϑϨογϡ͢Δ

    • 60FPSΛҡ࣋͢Δʹ͸1ϑϨʔϜͷॲཧΛ16.67ms ʹऩΊΔ (16.67ms=1000ms / 60FPs) • Ұൠతʹ30FPSग़͍ͯΕ͹׈Β͔Ͱ͋Δ
  36. ϒϥ΢βͷॲཧ Load Script Render Paint Load Script Render

  37. Load Script Render Paint der Paint Load Sc ϒϥ΢βͷॲཧ 16.67ms

  38. Paint Paint ಛʹॲཧ͕ͳ͍ͱ͖ 16.67ms

  39. 20FPSͷαϯϓϧ http://codepen.io/paulirish/full/nkwKs

  40. None
  41. 60FPSͷαϯϓϧ http://codepen.io/1000ch/full/KbLHh

  42. None
  43. ϒϥ΢β͕
 ஗͘ͳΔݪҼΛ஌Δ

  44. Case#1 ॏ͍ॲཧ ͕͔͔࣌ؒΔͱϖΠϯτ΋஗ΕΔ

  45. Script͕๩͍͠ͱ… Load Script Render Paint der Paint Load 16.67msʹऩ·Βͳ͍

  46. None
  47. None
  48. None
  49. Case#2 GC Scriptͷ࣮ߦΛࢭΊͯ͠·͏

  50. Garbage Collection? • JavaScriptͰ͸ɺϝϞϦͷׂ౰ͱղ์͕JavaScriptͷΤ ϯδϯʹΑͬͯࣗಈͰߦΘΕΔɻͦͷ࢓૊Έ͕Garbage CollectionͰ͋Δ • ࠷ۙͷߴਫ४ݴޠʹ΄ͱΜͲඋΘ͍ͬͯΔ • ͍Θ͹ϧϯόͷΑ͏ͳଘࡏ

    by @ahomu
  51. GCൃੜͷλΠϛϯά • ϒϥ΢βʹΑͬͯҰఆͷपظͰ࣮ߦ͞ΕΔଞɺϝϞϦ͕গ ͳ͘ͳ͖ͬͯͨΓɺෆཁͳϝϞϦ͕ग़ݱ͢Δͱ࣮ߦ͞ΕΔ • JavaScriptͰ͸࣮ߦͷλΠϛϯάΛ௚઀ίϯτϩʔϧ͢ Δज़͸ͳ͍

  52. Window A B D C E

  53. Window A B D C E

  54. Window A B D C E GCͷର৅ʹͳΔ

  55. GCͷؒ͸Script͕ࢭ·Δ Load Render Paint der Paint GC Load 16.67msʹऩ·Βͳ͍ Script

  56. None
  57. None
  58. None
  59. Case#3 ϝϞϦϦʔΫ Կ͔ͱѱӨڹΛٴ΅͢

  60. ϝϞϦϦʔΫ • ϝϞϦྖҬ͕ѹഭ͞ΕΔͱඞવతʹϒϥ΢βͷ࣮ߦ଎౓ ͸௿Լ͢Δ • ϝϞϦͷճऩ͸ϖʔδભҠ͔࣌ɺGarbage Collectionͷ ࣮ߦʹΑΓߦΘΕΔ • ϝϞϦϦʔΫͷ୅දతͳݪҼ͸…?

  61. Understand memory leaks http://www.ibm.com/developerworks/web/library/wa-jsmemory/

  62. ίϯιʔϧ ॥؀ࢀর Ϋϩʔδϟ λΠϚʔ

  63. ίϯιʔϧ ॥؀ࢀর Ϋϩʔδϟ λΠϚʔ

  64. function Timer() { this.timerId = setInterval(function() { console.log('This is timer

    log.'); }, 1000); } ! ! ! var timer = new Timer(); timer = null;
  65. function Timer() { this.timerId = setInterval(function() { console.log('This is timer

    log.'); }, 1000); } ! ! ! var timer = new Timer(); timer = null; ݺͼग़͠ݩΛഁغͯ͠΋ λΠϚʔ͕࣮ߦ͞Εଓ͚Δ
  66. function Timer() { this.timerId = setInterval(function() { console.log('This is timer

    log.'); }, 1000); this.stop = function() { clearInterval(this.timerId); }; } ! ! ! var timer = new Timer(); timer.stop(); timer = null;
  67. function Timer() { this.timerId = setInterval(function() { console.log('This is timer

    log.'); }, 1000); this.stop = function() { clearInterval(this.timerId); }; } ! ! ! var timer = new Timer(); timer.stop(); timer = null; λΠϚʔ͸
 ͪΌΜͱࢭΊΔ͜ͱʂ
  68. Ϋϩʔδϟ λΠϚʔ ίϯιʔϧ ॥؀ࢀর

  69. function Closure() { var value = 1000; return function() {

    return value; }; }
  70. function Closure() { var value = 1000; return function() {

    return value; }; } value͸ؔ਺͔Β ࢀর͞Εଓ͚ͯ͠·͏
  71. function Closure() { var value = 1000; return function() {

    var another = 2000; return another; }; }
  72. function Closure() { var value = 1000; return function() {

    var another = 2000; return another; }; } value͸ࢀর͞Εͳ͘ͳΔ ͷͰGCʹճऩ͞ΕΔ
  73. ॥؀ࢀর ίϯιʔϧ λΠϚʔ Ϋϩʔδϟ

  74. var family = []; ! var child = { age:

    10 container: family }; ! var parent = { child: child, container: family }; ! family.push(child); family.push(parent);
  75. var grandparent = { child: parent, container: family }; !

    family.push(parent);
  76. var grandparent = { child: parent, container: family }; !

    family.push(parent); ઇͩΔ·ࣜʹ૿͑ΔϝϞϦ
  77. A C B

  78. A C B

  79. A C

  80. A C ࢀর͕࢒ͬͯ͠·͍
 GCͰճऩ͞Εͳ͍

  81. A C B

  82. A C

  83. A C

  84. A C ࢀর͕ͳ͘ͳͬͨͷͰ ϝϞϦ͕։์͞ΕΔ

  85. ࢀরؔ܎ͷ੔ཧΛʂ ҰൠతͳϑϨʔϜϫʔΫ͸͜ͷΑ͏ͳ
 ΠϕϯτϦεφͷϞσϧʹै͍ͬͯΔ͜ͱ͕ଟ͍

  86. ίϯιʔϧ ॥؀ࢀর λΠϚʔ Ϋϩʔδϟ

  87. var object = { foo: 1, bar: 2 }; console.log(object);

    object = null;
  88. var object = { foo: 1, bar: 2 }; console.log(object);

    object = null; ίϯιʔϧ͔Βࢀর͞Ε GC͔Βճऩ͞Εͳ͍
  89. ϝϞϦͱͷਔٛͳ͖ઓ͍ • ͍͘Β࠷దԽͯ͠΋GC͸ࣗಈͰ࣮ߦ͞Εͯ͠· ͏ɻͦͷΠϯύΫτΛ೗Կʹখ͘͞ग़དྷΔ͔͕ॏཁ • ಛʹؾΛ࢖Θͳ͚Ε͹͍͚ͳ͍ͷ͸ϖʔδભҠΛ͠ ͳ͍ɺ͔ͭ׈Β͔͕͞ॏཁͳ৔߹(γϡʔςΟϯά ήʔϜͱ͔) • Script͔Βൃੜ͢ΔLoad΍Render΋๨Εͳ͍

  90. ࠷దԽΞϓϩʔν

  91. Profiles ະ։์ͷΦϒδΣΫτ΍ϝϞϦͷ࢖༻ঢ়ଶ ࢖͍৺஍ͷѱ͞Λݟಀ͞ͳ͍ εΫϩʔϧ͕Ҿ͔͔ͬΔ౳ Timeline 60FPS

  92. Profiles ະ։์ͷΦϒδΣΫτ΍ϝϞϦͷ࢖༻ঢ়ଶ ࢖͍৺஍ͷѱ͞Λݟಀ͞ͳ͍ εΫϩʔϧ͕Ҿ͔͔ͬΔ౳ TimelineͰωοΫΛݟ͚ͭΔ 60FPSͱ30FPSͷϘʔμʔΛ໨ҹʹ

  93. ProfilesͰৄ͘͠ղੳ͢Δ ະ։์ͷΦϒδΣΫτ΍ϝϞϦͷ࢖༻ঢ়ଶ ࢖͍৺஍ͷѱ͞Λݟಀ͞ͳ͍ εΫϩʔϧ͕Ҿ͔͔ͬΔ౳ Timeline 60FPS

  94. Collect JavaScript CPU Profile JavaScriptͷ࣮ߦʹ͔͔ͬͨ࣌ؒΛௐ΂Δ͜ͱ͕ग़དྷΔ

  95. Take Heap Snapshot ݱࡏͷϖʔδͰ࣮ߦ͞ΕɺώʔϓྖҬʹஔ͔Εͨ
 JavaScriptͷΦϒδΣΫτͷ਺Λௐ΂Δ͜ͱ͕ग़དྷΔ

  96. Record Heap Allocations JavaScriptͷ࣮ߦͱͱ΋ʹ࢖༻͞ΕΔϝϞϦͷ ׂ౰ͱղ์ͷঢ়ଶΛௐ΂Δ͜ͱ͕ग़དྷΔ

  97. JavaScriptͷ ߴ଎ԽηΦϦʔΛ஌Δ

  98. ArrayͷforEach()ΑΓforͰϧʔϓɹΞχϝʔγϣϯʹ͸ requestAnimationFrame()ɹ“use strict”;Λ࢖͏ɹ try/catchʢྫ֎ͷัଊʣ͸ॏ͍ɹparseInt()ΑΓՃݮԋ ࢉͰΩϟετ͢ΔɹDOMͷ୳ࡧ΍ૢ࡞͸࠷খݶʹɹ୹͍ؔ਺ͷ ΠϯϥΠϯԽɹeval()΍with()Λ࢖Θͳ͍ɹnew Date()Α Γdate.now()ɹධՁॱͷ޻෉ɹਖ਼نදݱͷΩϟογϡɹॏ͍ ॲཧͷඇಉظԽ(WebWorker)ɹArrayͷforEach()ΑΓfor Ͱϧʔϓɹ

    Ξχϝʔγϣϯʹ͸requestAnimationFrame()ɹ “use strict”;Λ࢖͏ɹtry/catchʢྫ֎ͷัଊʣ͸ॏ͍ɹ parseInt()ΑΓՃݮԋࢉͰΩϟετ͢ΔɹDOMͷ୳ࡧ΍ૢ࡞ ͸࠷খݶʹɹ୹͍ؔ਺ͷΠϯϥΠϯԽɹeval()΍with()Λ࢖ Θͳ͍ɹnew Date()ΑΓdate.now()ɹධՁॱͷ޻෉ɹਖ਼ن දݱͷΩϟογϡɹॏ͍ॲཧͷඇಉظԽ(WebWorker)ɹetc…
  99. JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/

  100. Don't Guess it, Test it! - Paul Lewis

  101. jsPerf http://jsperf.com

  102. GCΛආ͚Δ2ͭͷख๏

  103. ΦϒδΣΫτϓʔϧ ࢖Θͳ͘ͳͬͨطఆͷܕͷΦϒδΣΫτΛϓʔϧ͠ ͦͷܕͷΦϒδΣΫτΛ࠶ར༻͢Δ

  104. Object Pool

  105. Object Pool Object

  106. Object Pool Object

  107. Object Pool Object Object

  108. Object Pool Object Object

  109. Object Pool Object Object ੜ੒ͨ͠ΦϒδΣΫτΛ ࠶ར༻͢Δ͜ͱͰ ϝϞϦͷ࠶ׂ౰Λ཈͑Δ

  110. Object Pools http://beej.us/blog/data/object-pool/

  111. ελςΟοΫϝϞϦ ࢖༻͢ΔશͯͷΦϒδΣΫτΛ͋Β͔͡ΊॳظԽͯ͠ ࢖͏৔߹ʹ͸ͦͷΦϒδΣΫτ܈͔Βआ༻͢Δ

  112. Object Pool

  113. Object Pool Object Object Object Object

  114. Object Pool Object Object Object Object ΦϒδΣΫτͷੜ੒ճ਺Λ ݮΒ͢Ξϓϩʔν

  115. ʲ൪֎ฤʳV8Τϯδϯͷ ࠷దԽΛ્֐͠ͳ͍

  116. Design Elements https://developers.google.com/v8/design

  117. Fast Property Access JITίϯύΠϧ࣌ʹ੩తͳΫϥεΛ࡞੒͠ JSͷίʔυΛಈతʹࢀর͢ΔͷͰ͸ͳ͘ ੜ੒͞ΕͨΫϥε(hidden class)Λߴ଎ʹࢀর͢Δ

  118. Dynamic Machine Code Generation 1౓࣮ߦͨ͠ίʔυΛϚγϯίʔυʹίϯύΠϧ͠ ࣍ճҎ߱͸Ωϟογϡͨ͠΋ͷΛ࣮ߦ͢Δ (தؒόΠτίʔυ΋ΠϯλʔϓϦλ΋࢖Θͳ͍)

  119. Ϋϥεͷఆ͕ٛ͋ͬͨΒ… function Point(x, y) { this.x = x; this.y =

    y; }
  120. Ϋϥεͷఆ͕ٛ͋ͬͨΒ… function Point(x, y) { this.x = x; this.y =

    y; } JITίϯύΠϧ࣌ʹΫϥε ͷ੩తͳ࣮ଶΛੜ੒͢Δ function Point(x, y) { this.x = x; this.y = y; } Hidden Class
  121. Ϋϥεͷఆ͕ٛ͋ͬͨΒ… function Point(x, y) { this.x = x; this.y =

    y; } JITίϯύΠϧ࣌ʹΫϥε ͷ੩తͳ࣮ଶΛੜ੒͢Δ function Point(x, y) { this.x = x; this.y = y; } Hidden Class var point = new Point(); ͔࣍ΒίϯύΠϧࡁͷ ΫϥεΛࢀর͢ΔͷͰߴ଎
  122. Ϋϥεͷఆ͕ٛ͋ͬͨΒ… function Point(x, y) { this.x = x; this.y =

    y; } JITίϯύΠϧ࣌ʹΫϥε ͷ੩తͳ࣮ଶΛੜ੒͢Δ function Point(x, y) { this.x = x; this.y = y; } Hidden Class var point = new Point(); ͔࣍ΒίϯύΠϧࡁͷ ΫϥεΛࢀর͢ΔͷͰߴ଎
  123. ఆٛΛ్தͰมߋ͢Δͱ… Point.name = 'Name';

  124. function Point(x, y) { this.x = x; this.y = y;

    } Point.name = 'Name'; Hidden ClassΛ ࠶౓ੜ੒ͯ͠͠·͏ Hidden Class ఆٛΛ్தͰมߋ͢Δͱ… Point.name = 'Name';
  125. function Point(x, y) { this.x = x; this.y = y;

    } Point.name = 'Name'; Hidden ClassΛ ࠶౓ੜ੒ͯ͠͠·͏ Hidden Class ఆٛΛ్தͰมߋ͢Δͱ… Point.name = 'Name'; ϒϥ΢β͕࣮ߦ࣌ʹ࠷దԽͨ͠ίʔυΛ ͳΔ΂͘มߋ͠ͳ͍Α͏ʹ͢Δʂ
  126. ·ͱΊ

  127. ύϑΥʔϚϯε͸ඞਢ ؀ڥͷଟذԽ΋ߟྀ͢Δ

  128. ϒϥ΢βͷؾ࣋ͪΛ஌Δ͜ͱ͕ ࠷దԽ΁ͷୈҰา

  129. ۜͷ஄ؙ͸ଘࡏ͠ͳ͍ શͯ͸࠷దԽͷੵΈॏͶ

  130. Thank you! @1000ch http://github.com/1000ch http://1000ch.net

  131. Photo Credits • http://www.flickr.com/photos/66331098@N03/6041212579 • http://www.flickr.com/photos/danichro/7284517300 • http://www.flickr.com/photos/articnomad/16153058/ • http://www.flickr.com/photos/sfgirlbybay/2739327181/

    • http://www.flickr.com/photos/30859306@N00/3331140550 • http://www.flickr.com/photos/45540741@N06/7365063522/ • http://www.flickr.com/photos/chrissinjo/5368405044 • http://www.flickr.com/photos/cloudy-day/5319042359 • http://www.flickr.com/photos/57490760@N04/7218896186