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

Browser Computing Structure

Shogo Sensui
January 25, 2014

Browser Computing Structure

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

Shogo Sensui

January 25, 2014
Tweet

More Decks by Shogo Sensui

Other Decks in Programming

Transcript

  1. Browser Computing
    Structure
    Frontrend in Fukuoka
    @1000ch

    View Slide

  2. @1000ch

    View Slide

  3. Frontend Developer

    View Slide

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

    View Slide

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

    View Slide

  6. View Slide

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

    View Slide

  8. View Slide

  9. • ඇಉظ௨৴ʹΑΔίϯςϯπͷߋ৽

    ʢGoogleϚοϓɾGoogleαδΣετ౳ʣ
    • JavaScript͕μΠφϛοΫͳWebαΠτͷ

    ՄೳੑΛHTMLʹ΋ͨΒͨ͠
    ಈతͳWeb

    View Slide

  10. View Slide

  11. • HTML5΍CSS3ͱ͍ͬͨɺ

    ٕज़ͷඪ४Խͱඈ༂తͳਐԽ
    • ϒϥ΢βͰग़དྷΔ͜ͱ͕૿͑ͨ

    (WebGLɾWebAudioɾWebSocket…)
    ϦονͳWeb

    View Slide

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

    View Slide

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

    View Slide

  14. ͔֬ଘࡏ͢Δίετ
    ϚγϯεϖοΫʹࠨӈ͞ΕΔ্ʹ

    ϞόΠϧ୺຤ͩͱͳ͓͞Β͕ࠩݦஶ

    View Slide

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

    View Slide

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

    View Slide

  17. ύϑΥʔϚϯε͸

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

    View Slide

  18. ϒϥ΢β͕

    ԿΛ͍ͯ͠Δ͔Λ஌Δ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ωοτϫʔΫपΓͷ࠷దԽ

    View Slide

  32. DevTools > Timeline
    Render
    FPSͷ஋ͷνΣοΫ

    ϨΠΞ΢τ΍ϖΠϯτͷλΠϛϯά
    ΠϕϯτͷൃՐ΍GCͷ࣮ߦܗ੻
    ϒϥ΢β͕ͲͷΑ͏ͳॲཧ
    Λ͍ͯ͠Δ͔େମΘ͔Δ

    View Slide

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

    View Slide

  34. Compute
    ࠓ೔͸Computingͷ࿩

    View Slide

  35. Keep 60FPS
    • FPS = Frames Per Second
    • ϒϥ΢β͸1ඵؒʹ60ճϦϑϨογϡ͢Δ
    • 60FPSΛҡ࣋͢Δʹ͸1ϑϨʔϜͷॲཧΛ16.67ms
    ʹऩΊΔ (16.67ms=1000ms / 60FPs)
    • Ұൠతʹ30FPSग़͍ͯΕ͹׈Β͔Ͱ͋Δ

    View Slide

  36. ϒϥ΢βͷॲཧ
    Load Script Render Paint Load Script Render

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. View Slide

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

    View Slide

  42. View Slide

  43. ϒϥ΢β͕

    ஗͘ͳΔݪҼΛ஌Δ

    View Slide

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

    View Slide

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

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. Window
    A
    B
    D
    C
    E

    View Slide

  53. Window
    A
    B
    D
    C
    E

    View Slide

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

    View Slide

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

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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;

    View Slide

  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;
    λΠϚʔ͸

    ͪΌΜͱࢭΊΔ͜ͱʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. function Closure() {
    var value = 1000;
    return function() {
    var another = 2000;
    return another;
    };
    }
    value͸ࢀর͞Εͳ͘ͳΔ
    ͷͰGCʹճऩ͞ΕΔ

    View Slide

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

    View Slide

  74. var family = [];
    !
    var child = {
    age: 10
    container: family
    };
    !
    var parent = {
    child: child,
    container: family
    };
    !
    family.push(child);
    family.push(parent);

    View Slide

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

    View Slide

  76. var grandparent = {
    child: parent,
    container: family
    };
    !
    family.push(parent);
    ઇͩΔ·ࣜʹ૿͑ΔϝϞϦ

    View Slide

  77. A
    C B

    View Slide

  78. A
    C B

    View Slide

  79. A
    C

    View Slide

  80. A
    C
    ࢀর͕࢒ͬͯ͠·͍

    GCͰճऩ͞Εͳ͍

    View Slide

  81. A
    C B

    View Slide

  82. A
    C

    View Slide

  83. A
    C

    View Slide

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

    View Slide

  85. ࢀরؔ܎ͷ੔ཧΛʂ
    ҰൠతͳϑϨʔϜϫʔΫ͸͜ͷΑ͏ͳ

    ΠϕϯτϦεφͷϞσϧʹै͍ͬͯΔ͜ͱ͕ଟ͍

    View Slide

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

    View Slide

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

    View Slide

  88. var object = {
    foo: 1,
    bar: 2
    };
    console.log(object);
    object = null;
    ίϯιʔϧ͔Βࢀর͞Ε
    GC͔Βճऩ͞Εͳ͍

    View Slide

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

    View Slide

  90. ࠷దԽΞϓϩʔν

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  95. Take Heap Snapshot
    ݱࡏͷϖʔδͰ࣮ߦ͞ΕɺώʔϓྖҬʹஔ͔Εͨ

    JavaScriptͷΦϒδΣΫτͷ਺Λௐ΂Δ͜ͱ͕ग़དྷΔ

    View Slide

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

    View Slide

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

    View Slide

  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…

    View Slide

  99. JavaScript Garden
    http://bonsaiden.github.io/JavaScript-Garden/ja/

    View Slide

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

    View Slide

  101. jsPerf
    http://jsperf.com

    View Slide

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

    View Slide

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

    View Slide

  104. Object Pool

    View Slide

  105. Object Pool
    Object

    View Slide

  106. Object Pool
    Object

    View Slide

  107. Object Pool
    Object
    Object

    View Slide

  108. Object Pool
    Object
    Object

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  112. Object Pool

    View Slide

  113. Object Pool
    Object Object
    Object Object

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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();
    ͔࣍ΒίϯύΠϧࡁͷ
    ΫϥεΛࢀর͢ΔͷͰߴ଎

    View Slide

  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();
    ͔࣍ΒίϯύΠϧࡁͷ
    ΫϥεΛࢀর͢ΔͷͰߴ଎

    View Slide

  123. ఆٛΛ్தͰมߋ͢Δͱ…
    Point.name = 'Name';

    View Slide

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

    View Slide

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

    View Slide

  126. ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  131. Photo Credits
    • http://www.flickr.com/photos/[email protected]/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/[email protected]/3331140550
    • http://www.flickr.com/photos/[email protected]/7365063522/
    • http://www.flickr.com/photos/chrissinjo/5368405044
    • http://www.flickr.com/photos/cloudy-day/5319042359
    • http://www.flickr.com/photos/[email protected]/7218896186

    View Slide