Browser Computing Structure

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

Transcript

1. Browser Computing Structure Frontrend in Fukuoka @1000ch
2. @1000ch
3. Frontend Developer
4. ໨࣍ มԽ͢ΔWebͱJavaScriptͷ໾ׂ ϒϥ΢β͕ԿΛ͍ͯ͠Δ͔Λ஌Δ ϒϥ΢β͕஗͘ͳΔݪҼΛ஌Δ ࠷దԽΞϓϩʔν
5. มԽ͢ΔWebͱ JavaScriptͷ໾ׂ
7. • ςΩετϕʔεͷWebαΠτ • ίϯςϯπͷߋ৽͸ભҠ͕த৺ • ૷০͸<marquee>ͱ͔<blink>ͱ͔… ੩తͳWeb
9. • ඇಉظ௨৴ʹΑΔίϯςϯπͷߋ৽
 ʢGoogleϚοϓɾGoogleαδΣετ౳ʣ • JavaScript͕μΠφϛοΫͳWebαΠτͷ
 ՄೳੑΛHTMLʹ΋ͨΒͨ͠ ಈతͳWeb
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
41. 60FPSͷαϯϓϧ http://codepen.io/1000ch/full/KbLHh
43. ϒϥ΢β͕
 ஗͘ͳΔݪҼΛ஌Δ
44. Case#1 ॏ͍ॲཧ ͕͔͔࣌ؒΔͱϖΠϯτ΋஗ΕΔ
45. Script͕๩͍͠ͱ… Load Script Render Paint der Paint Load 16.67msʹऩ·Βͳ͍
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
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