Browser Computing Structure

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