$30 off During Our Annual Pro Sale. View Details »

ブラウザ/ Browser

ブラウザ/ Browser

2023年度リクルート エンジニアコース新人研修の講義資料です

Recruit
PRO

August 10, 2023
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. Browser
    2023/04/10 @ Recruit

    View Slide

  2. Twitter: @yosuke_furukawa


    GitHub: yosuke-furukawa

    View Slide

  3. Browser
    • ஌ͬͯΔΑ͏Ͱ஌Βͳ͍


    • ΢ΣϒΞϓϦέʔγϣϯΛ࡞Δ࣌ʹඞͣ࢖͏
    ΋ͷͷɺத਎͕Ͳ͏ͳͬͯΔ͔Λઆ໌ͯ͘͠
    ͍ͩ͞ͱݴΘΕΔͱͲ͏ͨ͠Β͍͍͔Θ͔Β
    ͳ͍΋ͷ


    • ࠓճ͸ͦΜͳϒϥ΢βʹ৮ΕΑ͏ͱࢥ͍·͢

    View Slide

  4. Browse + er


    ோΊΔ΋ͷ

    View Slide

  5. ຊߨٛͷͶΒ͍
    • օ͞Μʹϒϥ΢βͷத਎Λೝࣝͯ͠΋Β͍ɺ಄ͷதʹ
    ஍ਤΛ࡞ͬͯ΋Β͏ɻ


    • ϒϥ΢βͷ஍ਤΛ࡞্ͬͨͰ͜ͷ͋ͱͷߨٛʢύ
    ϑΥʔϚϯεɺηΩϡϦςΟɺJavaScript/
    TypeScriptʣΛड͚ͯ΋Β͏͜ͱͰཧղ౓ΛਂΊΔɻ


    • HTTP/HTMLͳͲͷجૅతͳ෦෼͸ޙ൒ϋϯζΦϯͰ
    ;ΕΔɻ

    View Slide

  6. લ൒ Agenda
    • ϒϥ΢βͷػೳ


    • ϒϥ΢βͷ࢓૊Έ


    • ϨϯμϦϯάΤϯδϯ


    • JavaScript Τϯδϯ


    • ωοτϫʔΫ


    • σʔλετϨʔδ

    View Slide

  7. ϒϥ΢βͷػೳ

    View Slide

  8. ϒϥ΢βͷػೳ
    🔒IUUQTFYBNQMFDPN

    View Slide

  9. ϒϥ΢βͷػೳ
    🔒IUUQTFYBNQMFDPN
    ໭Δ ਐΉ
    Ϧϩʔυɾதࢭ
    ΞυϨεόʔ

    View Slide

  10. ϒϥ΢βͷػೳ
    • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ


    • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ
    ͠ɺཤྺʹͨ·Δ


    • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ


    • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ


    • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ
    *NBHF

    View Slide

  11. ϒϥ΢βͷػೳ
    • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕
    ѱ͍ɻ


    • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞
    ΕͨΒɾɾɾɾʁ


    • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ
    ͔ͬͨΒɾɾʁ


    • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁ

    View Slide

  12. ϒϥ΢βͷػೳ
    • ϒϥ΢βͷجຊػೳΛյ͢Α͏ͳΞϓϦέʔγϣϯ͸ମݧ͕
    ѱ͍ɻ


    • ໭ͬͨ࣌ʹ΋ͱ΋ͱ͍ͨεΫϩʔϧҐஔ͡Όͳ͍৔ॴʹ໭͞
    ΕͨΒɾɾɾɾʁ


    • εΫϩʔϧ͢ΔࡍʹΨλΨλͯ͠εϜʔεͳૢ࡞͕ग़དྷͳ
    ͔ͬͨΒɾɾʁ


    • Enter ΩʔͰૹ৴Ͱ͖ͳ͍ϑΥʔϜΛ࡞ͬͯ͠·ͬͨΒɾɾɾʁ
    શ෦ѱ͍ϢʔβʔΤΫεϖϦΤϯε

    View Slide

  13. ϒϥ΢βͷػೳ
    • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ
    յͯ͠͸͍͚ͳ͍ɻ


    • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ


    • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ


    • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ

    View Slide

  14. ϒϥ΢βͷػೳ
    • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ
    յͯ͠͸͍͚ͳ͍ɻ


    • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ


    • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ


    • ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ
    ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋

    ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ

    View Slide

  15. ϒϥ΢βͷ࢓૊Έ

    View Slide

  16. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF

    View Slide

  17. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ϒϥ΢βͷΠϯλϑΣʔε
    ΞυϨεόʔͱ͔໭ΔϘλϯͱ͔

    View Slide

  18. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ϒϥ΢βͷ֩
    ޙͰ঺հ͢Δ༷ʑͳߏ੒ཁૉͱௐఀ͢Δ

    View Slide

  19. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕
    )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ

    View Slide

  20. ϒϥ΢βͷߏ଄
    • ϨϯμϦϯάΤϯδϯ


    • HTML΍CSS͸ͦͷ··Ͱ͸ਓ͕ؒಡΊΔ΋ͷ
    ʹͳΒͳ͍ɻ


    • σʔλΛܭࢉ͠ɺਓ͕ؒݟ͑Δܗʹදݱ͢Δ
    ͜ͱΛϨϯμϦϯάͱݺͿ

    View Slide

  21. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    ωοτϫʔΫ૚ɺ)551ϦΫΤετͨ͠
    Γɺ)5514ͰϦΫΤετͨ͠Γ

    View Slide

  22. ϒϥ΢βͷߏ଄
    • ωοτϫʔΫ


    • HTML ΍ CSS ΍ JavaScript ͱ͍ͬͨίϯςϯπΛμ΢ϯϩʔυͨ͠ΓɺΞο
    ϓϩʔυ͢Δ࢓૊Έ


    • ϒϥ΢βͷσʔλަ׵ͷ࢓૊Έ͸ʮσʔλͷཁٻʢϦΫΤετʣʯͱʮཁٻ
    ʹରͯ͠ͷԠ౴ʢϨεϙϯεʣʯͱ͍͏̎ͭͷγϯϓϧͳ΍ΓऔΓʹΑͬͯ
    ߦΘΕ͍ͯΔ



    View Slide

  23. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    +BWB4DSJQU࣮ߦΤϯδϯWͱ͔
    4QJEFS.POLFZͱ͔+4$ͱ͔

    View Slide

  24. ϒϥ΢βͷߏ଄
    • JavaScript Τϯδϯ


    • JavaScript ͸ίϯςϯπΛಈతʹมߋ͢Δͱ͍ͬͨඇৗʹॏཁͳॲཧΛߦ
    ͏෦෼


    • ʮJust In Time ίϯύΠϥ(JITίϯύΠϥ)ʯͱݺ͹ΕΔಈతʹίʔυΛղ
    ੳ͢ΔࣄͰੑೳΛิ͍ͬͯΔ



    View Slide

  25. ϒϥ΢βͷߏ଄
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    +BWB4DSJQU
    &OHJOF
    %BUB
    4UPSBHF
    σΟεΫʹอଘ͢ΔϨΠϠ
    $PPLJFͱ͔MPDBMTUPSBHFͱ͔͕֘౰

    View Slide

  26. ϒϥ΢βͷߏ଄
    • σʔλετϨʔδ


    • σʔλΛӬଓతʹอଘ͢Δ෦෼


    • ࣮͸ history ΋ cookie ΋ localstorage ΋શ෦
    σʔλετϨʔδ෦෼ʹอଘ͞Ε͍ͯΔ

    View Slide

  27. ϒϥ΢βͷߏ଄
    • ͜ͷϚοϓΛུ֓ͱͯ͠಄ʹೖΕ͓͍ͯͯ΄͍͠ɻ


    • HTML/CSSΛ࣮ߦͯ͠Δ৔ॴ͕Ͳ͔͜


    • JavaScript ͸Engine͕෼͔ΕͯΔͱ͔


    • ωοτϫʔΫ෦෼ͰσʔλΛ͖͍࣋ͬͯͯΔͱ͔


    • Cookie ͷσʔλΛอଘͯ͠Δͷ͸σʔλετϨʔδͱ͔

    View Slide

  28. ϒϥ΢βͷྺ࢙

    View Slide

  29. ϒϥ΢βͷྺ࢙
    • ͍͖ͳΓ͜͏͍͏ߏ੒ཁૉʹͳͬͨΘ͚Ͱ͸
    ͳ͍ɻ


    • ͜ͷߏ੒ཁૉʹͳΔ·Ͱʹḷͬͨྺ࢙ΛৼΓ
    ฦΔ͜ͱͰҰ୴ཧղΛਂΊΔ


    • ͱ͸͍͑ͨͩͷྺ࢙ͳͷͰɺ໾ʹཱͭ஌ࣝͱ
    ͍͏ΑΓ͸ʮ΁ʔʯͬͯฉ͍ͯͯ͘Εͯྑ͍

    View Slide

  30. ࠷ॳظͷϒϥ΢β
    • WorldWideWebϒϥ΢β


    • Ұ൪࠷ॳͷϒϨΠΫεϧʔ͸ϋΠύʔςΩετͱΠϯ
    λʔωοτΛ૊Έ߹Θͤͨ͜ͱʹΑͬͯੜ·ΕΔɻ


    • ૊Έ߹Θͤͨਓ͸༗໊ͳςΟϜɾόʔφʔζɾϦʔ



    View Slide

  31. ࠷ॳظͷϒϥ΢β
    • WorldWideWeb


    • URLදࣔ΋ͳ͍ɺ໭ΔɾਐΉͱ͔ͷϘλϯ΋
    ͳ͍

    View Slide

  32. ࠷ॳظͷϒϥ΢β
    • WorldWideWeb
    6TFS*OUFSGBDF
    #SPXTFS&OHJOF
    3FOEFSJOH
    &OHJOF
    /FUXPSL
    %BUB
    4UPSBHF
    )5.- )551
    )JTUPSZ

    View Slide

  33. 1990೥୅: ϒϥ΢βઓ૪
    • ͦͷதͰҰ൪ਓؾʹͳͬͨͷ͕ʮMosaicʯͱ͍͏ϒϥ΢β


    • ςΩετͱҰॹʹΠϯϥΠϯͰը૾Λදࣔ͢Δͱ͍͏ϒϨ
    ΠΫεϧʔΛىͨ͜͠ɻ



    View Slide

  34. 1990೥୅: ϒϥ΢βઓ૪
    • จॻͷ಺༰ͱ૷০Λ෼͚ͯఆٛͰ͖ΔΑ͏ʹ͠Α͏ͱ͍͏
    ํ਑ʹͳ͍ͬͯ͘ɻ


    • ࠷ॳظͷϒϥ΢β͸಺༰ͱ૷০͸෼͔Εͯͳ͔ͬͨɻ


    • CSS ͕஀ੜ͠ɺ࢓༷͕ਐΜͰ͍͘Α͏ʹͳΔɻ


    • ͜ͷࠒ͔Β HTML / CSS ͷଘࡏ͕Ͱ͖Δɻ

    View Slide

  35. 1990೥୅: ϒϥ΢βઓ૪
    • ϏοάΧϯύχʔ΋໧͍ͬͯͳ͍ɻ


    • IBM͕ WebExplorer Λ։ൃ͠ɺͦͷޙ Microsoft ͕
    Internet Explorer Λ։ൃ͢Δɻ


    • Mosaic ͸ NetScape ձࣾΛ্ཱͪ͛ɺ Navigator ͱ͍͏໊
    લͰ։ൃ͢Δɻ


    • ୈҰ࣍ϒϥ΢βઓ૪͕ຄൃ͢Δɻ

    View Slide

  36. 1990೥୅: ϒϥ΢βઓ૪
    • JavaScript ΋͜ͷࠒ͔Β։ൃ͞Εͩ͢ʢ1995೥ʣ


    • HTTP Cookie ͳͲͷ࢓૊Έ΋։ൃ͞ΕΔ


    • HTTPS ͳͲͷ҉߸Խͷ࢓૊Έ΋͜ͷࠒ͔Β



    View Slide

  37. 1990೥୅: ϒϥ΢βઓ૪
    • 1990೥୅ޙ൒ʹ͸େମͷύʔπ͕ἧͬͯ͘Δ

    View Slide

  38. 1990೥୅: ϒϥ΢βઓ૪
    • ػೳͷ֦ॆ͕ਐΜͰ͍͘ҰํͰϒϥ΢βઓ૪͸൵ܶ΋΋ͨΒͨ͠ɻ


    • աܹͳࠩผԽͱػೳ֦ॆ͕ਐΉதͰಠ֦ࣗுʹ͸͠Δ͜ͱ΋૿͑ͯ
    ͍͘


    • JScript ͱݺ͹ΕΔ΄ͱΜͲ JavaScript ͱಉ͡Α͏ͳػೳΛ࣋ͬͨ
    εΫϦϓτݴޠ͕ Internet Explorer ʹ࣮૷͞ΕΔ


    • JavaScript Ͱ Style ΛܾΊΒΕΔ JavaScript Style Sheet ΋ఏҊ͞
    ΕΔ͕ɺ࢓༷ܾΊ͖Εͳ͍͏ͪʹऴΘΔͳͲɻ

    View Slide

  39. 1990೥୅: ϒϥ΢βઓ૪
    • ࠷ऴతʹୈҰ࣍ϒϥ΢βઓ૪͸Microsoft͕উར͢Δ


    • OSʹϒϥ΢β͕ಉࠝ͞ΕΔࣄͰ NetScape ͷϒϥ΢βΑΓ
    ΋Ϣʔβʔ਺Λ৳͹͠ɺՉ઎ঢ়ଶ͕࡞ΒΕͯ͠·͏ɻ


    • NetScape ଆ͸Ϣʔβʔ਺ͷ֫ಘʹ͸ࣦഊͨ͠΋ͷͷɺ
    OSS Խͯ͠ϒϥ΢βͷٕज़Λޙੈʹ࢒͠ɺ Mozilla ͱ͍͏
    اۀʹܗΛม͑ͯଘଓ͢Δ

    View Slide

  40. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • Mozilla ͕ຬΛ࣋ͯ͠ FireFox Λ։ൃͯ͠ɺϦϦʔε͢Δɻ


    • ࠓ·Ͱ Internet Explorer Ұڧঢ়ଶ͕ͩͬͨɺ࢓༷ʹ஧࣮Ͱ͋Γɺߴ଎ʹಈ͖ɺ
    λϒػೳ΍֦ுػೳΛඋ͑ͨ FireFox ͕Ϣʔβʔ਺Λൈ͘


    • 2000೥୅ޙ൒ʹͳΔͱϓϨΠϠʔ͕มΘΔɻ


    • ·ͣ Google ͕ JavaScript ͱಈతͳ HTTP ϦΫΤετʢ͍ΘΏΔ Ajaxʣ Λ૊Έ
    ߹ΘͤΔࣄͰ͜Ε·ͰͷHTMLɺ CSSɺ JavaScript ͱ͍͏ٕज़͚ͩͰΠϯλϥΫ
    ςΟϒͳΞϓϦέʔγϣϯΛ΢Σϒ্Ͱ࡞ΕΔ͜ͱΛ࣮ફ͢Δɻ


    • ࣍ʹ Google ͕ Chrome ΛϦϦʔε͢Δɻ

    View Slide

  41. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • 2000೥୅ͷલ൒͔Βޙ൒ʹ͔͚ͯى͖ͨͷ͸ɺ΢Σϒ্ͰΠϯλϥ
    ΫςΟϒͳΞϓϦέʔγϣϯΛ࡞Δͱ͍͏ٕज़తͳύϥμΠϜγϑτ


    • ϒϥ΢β্Ͱ JavaScript Λத৺ʹΞϓϦέʔγϣϯΛ࡞Δػձ͕૿͑
    ͨɻ


    • ݁Ռͱͯ͠ɺΞϓϦέʔγϣϯͷ࣮ߦ଎౓ʹ௚݁͢Δ JavaScript ͷ࣮
    ߦ؀ڥʹ΋ݟ௚͕͠ೖΔɻ


    • ֤ϒϥ΢βͷJavaScript Engineʹ JITίϯύΠϥ ͱݺ͹ΕΔ࣮ߦதʹ
    ࠷దԽ͢Δػೳ͕ಋೖ͞Ε͍ͯ͘

    View Slide

  42. 2000೥୅: Google Chrome ͷ
    ొ৔ɺεϚʔτϑΥϯͷొ৔
    • ϒϥ΢β͕୯ͳΔ΢ΣϒϖʔδͷӾཡ͚ͩͰ͸ͳ
    ͘ɺΞϓϦέʔγϣϯج൫ͱͯ͠ͷํ޲ʹਐΉɻ
    +*5

    View Slide

  43. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • 2010೥͔Β͸ΞϓϦέʔγϣϯΛ΢ΣϒͰΑΓޮ
    ཰తʹɺ৽͘͠࡞Ζ͏ͱ͢ΔϒʔϜ͕౸དྷͨ͠ɻ


    • ϒϥ΢βʹ΋εϚʔτϑΥϯͰݟΕΔΞϓϦέʔ
    γϣϯΛ࡞ΔྲྀΕ͕౸དྷͨ͠ɻ


    • ͜ͷ͋ͨΓ͔ΒωΠςΟϒΞϓϦͱϒϥ΢β྆ํ
    Ͱಉ͡Α͏ͳػೳΛఏڙ͢ΔΑ͏ʹͳΔ

    View Slide

  44. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • ΞϓϦέʔγϣϯͷ࡞Γํ͕ωΠςΟϒΞϓϦͷ࡞Γํʹۙ͘ͳͬͯ
    ͍ͬͨɻ


    • ΫϥΠΞϯτ಺Ͱ LocalStroage ΍ Session Stroage ͱ͍ͬͨΫϥΠΞ
    ϯτͷετϨʔδΛ࢖͓͏ͱͨ͠ΓɺΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ
    ϒϥ΢β͕ਐԽ͍ͯͬͨ͠ɻ


    • ͜ͷࠒʹ Network ʹ΋ਐԽ͕๚ΕΔɻϒϥ΢β͕ར༻͢Δίϯςϯπ
    ͕ΑΓϦονʹͳΓɺΞϓϦέʔγϣϯ΋Ͱ͖Δ͜ͱ͕૿͍͑ͯ͘ͱɺ
    ωοτϫʔΫͷར༻཰্͕͕͍ͬͯ͘


    • HTTP/2 ͱ͍ͬͨޮ཰తʹϦΫΤετ͢Δํ๏͕ग़ͯ͘Δɻ

    View Slide

  45. 2010೥୅: HTML5ϒʔϜͱε
    ϚʔτϑΥϯωΠςΟϒΞϓϦ
    • ΑΓޮ཰తʹ࣮ߦͰ͖ΔΑ͏ʹɺΞϓϦέʔγϣϯ
    ΑΓͷػೳ͕૿͍͑ͯ͘
    +*5
    )551
    MPDBMTUPSBHF

    View Slide

  46. ϒϥ΢βྺ࢙·ͱΊ
    • ͜ͷΑ͏ʹΞϓϦέʔγϣϯΛ࡞Δํ๏͕֬
    ཱ͞Ε͍ͯͬͨΓɺ৽͍ٕ͠ज़తͳస׵͕ى
    ͖Δͱͦͷ౎౓ϒϥ΢β͸ٕज़తͳਐԽΛ਱
    ͖͛ͯͨɻ


    • ࠓ೔ͷϞμϯͳϒϥ΢β͸͜ͷΑ͏ͳٕज़త
    ਐԽ͕೔ਐ݄าͰߦΘΕ͍ͯΔɻ

    View Slide

  47. ϒϥ΢βΛյͯ͠͸͍͚ͳ͍

    View Slide

  48. HistoryΛյͯ͠͸͍͚ͳ͍
    • ϒϥ΢βͷػೳʹ͸ʮ໭ΔʯͱʮਐΉʯͱ͍ͬͨӾཡཤྺΛલʹ
    ໭͠ɺਐΊΔػೳ͕͋Δɻ


    • Ӿཡཤྺ͸ཤྺͰ͋Γɺ໭ΔΛԡͨ͠ͱ͖ʹ͸جຊతʹલͷঢ়ଶ
    ʹ໭Δ͜ͱ͕๬·͍͠ɻ


    • ͔͠͠ͳ͕Βɺ͍͔ͭ͘ͷ΢ΣϒΞϓϦέʔγϣϯͰ͸ɺʮ໭
    ΔʯΛԡͨ࣌͠ʹ໭Εͳ͍ΞϓϦέʔγϣϯ͕ଘࡏ͢Δɻ


    • ΋͘͠͸໭Ζ͏ͱͨ࣌͠ʹҰ෦ͷঢ়ଶ͚ͩ໭͢͜ͱ͕Ͱ͖Δ͕ɺ
    ׬શʹલͷঢ়ଶΛ࠶ݱͰ͖ͳ͍ΞϓϦέʔγϣϯ΋ଘࡏ͢Δɻ

    View Slide

  49. HistoryΛյͯ͠͸͍͚ͳ͍
    • ௚લʹߦͬͨίϝϯτ͕ফ͑ͯΔྫ

    View Slide

  50. HistoryΛյͯ͠͸͍͚ͳ͍
    • ໭ΔϘλϯ͕ແޮʹͳ͍ͬͯΔྫ

    View Slide

  51. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍
    • ը໘ΛεΫϩʔϧ͢Δ͜ͱʹΑͬͯΨλΨλͱ
    ࢥͬͨҐஔʹεΫϩʔϧͰ͖ͳ͍ࣄ͕͋Δɻ


    • ͜ͷεΫϩʔϧͷΨλπΩͷ͜ͱΛʮεΫϩʔ
    ϧδϟϯΫʯͱݺͿɻ



    View Slide

  52. εΫϩʔϧΛյͯ͠͸͍͚ͳ͍
    • εΫϩʔϧҐஔ͕໭Βͳ͍ྫ

    View Slide

  53. ϑΥʔϜΛյͯ͠͸͍͚ͳ͍
    • λϒͰભҠͰ͖ͳ͍


    • ΤϯλʔΩʔͰૹ৴Ͱ͖ͳ͍

    View Slide

  54. ϨϯμϦϯάΤϯδϯ

    View Slide

  55. ϨϯμϦϯάΤϯδϯ
    • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ
    ඳը͢Δ
    HTML ϖʔδ
    ϨϯμϦϯά

    View Slide

  56. ϨϯμϦϯάΤϯδϯ
    • ίϯςϯπʢHTMLͳͲ) Λड͚औͬͯ಺༰Λ
    ඳը͢Δ
    HTML ϖʔδ
    ϨϯμϦϯά
    ͜͜ʹࢸΔ·ͰʹυϥϚ͕ͨ͘͞Μ͋Δɻ

    View Slide

  57. ϨϯμϦϯάΤϯδϯ
    • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ


    • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ
    આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ
    πΛඳը͢Δɻ
    (SBQIJD
    *OUFSGBDF
    3FOEFS

    View Slide

  58. ϨϯμϦϯάΤϯδϯ
    • ࢦఆ͞ΕͨίϯςϯπΛඳը͢Δ΋ͷ


    • ͜͜Ͱ͸ओʹ HTML Λඳը͢Δ࣌ͷྲྀΕͰղ
    આ͢Δ͕ɺຊདྷ͸ HTML ʹґΒͣɺίϯςϯ
    πΛඳը͢Δɻ
    (SBQIJD
    *OUFSGBDF
    3FOEFS
    ಛʹ͜͜ΛਂງΓ͢Δ

    View Slide

  59. ϨϯμϦϯάϓϩηε
    • HTML ͷϨϯμϦϯά͸ "ಈతʹ" ϨϯμϦϯ
    ά͢Δɻ


    • JavaScript ΍ϢʔβʔೖྗɺΞχϝʔγϣϯ
    ͳͲͰϨϯμϦϯά͕ߋ৽͞ΕΔɻ
    *OJUJBM3FOEFS ߋ৽ ߋ৽ ߋ৽ ߋ৽

    View Slide

  60. ϨϯμϦϯάϓϩηε
    • ίϯςϯπ͕ಈతʹߋ৽͞ΕΔͱ͍͏͜ͱ͕
    ΢Σϒͷಛ௃


    • ͦͷͨΊʹ͍͔ͭ͘ͷதؒදݱΛ͍࣋ͬͯΔ
    IUNM
    IUNM
    %0. 4UZMFE
    1BSTF 4UZMF -BZPVU

    1BJOU

    View Slide

  61. HTML Parse
    EJW
    QIFMMPQ
    QXPSMEQ
    EJW
    1BSTF
    %*7

    1
    5&95
    1
    5SFF
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    • λάΛωετͯ͠දݱ


    • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠

    දݱ͞ΕΔɻ

    View Slide

  62. DOM
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    • Document Object Model


    • ϒϥ΢β಺ͰͷHTMLͷ಺෦දݱ


    • ͔ͭ JavaScript Ͱૢ࡞Ͱ͖Δσʔλߏ଄
    var div = document.body.
    fi
    rstChild;
    var p2 = div.childNodes[1];
    p2.appendChild(document.createElement("span"));
    +BWB4DSJQU
    &OHJOF
    CJOEJOHT

    View Slide

  63. Style
    • DOM Λ࡞ͬͨΒͦΕʹ Style Λ
    ౰͍ͯͯ͘



    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    p { color: red }
    IFMMP
    XPSME
    4UZMF

    View Slide

  64. Style
    • ΍Δ͜ͱ͸େ͖͘෼͚ͯ̎ͭ


    • ηϨΫλϚονϯά


    • ΧεέʔσΟϯά

    View Slide

  65. Style
    • ηϨΫλ


    • ελΠϧΛ౰ͯΔࡍͷ௚઀తͳϧʔϧΛهड़
    ͯ͠಺༰ΛؚΊͨ΋ͷ
    p { color: red; } #test { border: red 2px solid; }
    .foo { background-color: skyblue; }

    View Slide

  66. Style
    • CSS (Cascading Style Sheets)


    • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ

    ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ


    • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ


    • ඃͬͨΒৄࡉ౓Ͱܾ·Δ
    EJWOPU GPP
    QOUIPGUZQF O
    \
    DPMPSSFE
    ^
    Q\
    DPMPSCMVF
    ^

    View Slide

  67. Style
    • ηϨΫλϚονϯά


    • ֤ཁૉͷCSSͷηϨΫλΛҰͭҰͭݟ͍ͯͬͯελΠϧΛ൓ө͢Δ


    • Πϝʔδͱͯ͠͸ΞϯέʔτೖྗϑΥʔϜʹ͍ۙ



    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left:
    ✔family: serif
    bottom:
    style:
    size:
    top:
    left:
    bottom:

    View Slide

  68. Style
    • CSS ৄࡉ౓ (ڧ͍ॱͷྫ)


    • styleଐੑͰͷࢦఆ


    • ηϨΫλͷ ID ͷ਺


    • ηϨΫλͷଐੑͷ਺


    • ηϨΫλͷཁૉ໊ͷ਺
    \^BCDETQFDJ
    fi
    DJUZ
    MJ\^BCDETQFDJ
    fi
    DJUZ
    MJ
    fi
    STUMJOF\^BCDETQFDJ
    fi
    DJUZ
    VMMJ\^BCDETQFDJ
    fi
    DJUZ
    VMPMMJ\^BCDETQFDJ
    fi
    DJUZ
    I\^BCDETQFDJ
    fi
    DJUZ
    VMPMMJSFE\^BCDETQFDJ
    fi
    DJUZ
    MJSFEMFWFM\^BCDETQFDJ
    fi
    DJUZ
    YZ\^BCDETQFDJ
    fi
    DJUZ
    TUZMFBCDETQFDJ
    fi
    DJUZ
    http://taligarsiel.com/Projects/howbrowserswork1.htm#Speci
    fi
    ty

    View Slide

  69. Style
    • ΧεέʔσΟϯά


    • ΞϯέʔτೖྗϑΥʔϜͷதͰۭཝΛݟ͚ͭͯิ͏ॲཧ


    • ਌ͷཁૉ͕͍࣋ͬͯͨΒࢠʹద༻͍ͯ͘͠



    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left:
    ✔family: serif
    bottom:
    style:
    size:
    top:
    left:
    bottom:
    ຒ·ͬͯͳ͍ͱ͜ΖΛνΣοΫ
    .BSHJO 'POU
    $PMPS 1BEEJOH

    ✔ 255,255,255,0
    top: 20px
    left: 20px
    ✔family: serif
    bottom: 30px
    style: normal
    size: 10
    top: 20px
    left: 20px
    bottom: 20px







    ਌͔Β΋Β͑Δͱ͜Ζ͸आΓͯ͘Δ

    View Slide

  70. Style
    EJWOPU GPP
    QOUIPGUZQF O
    \
    DPMPSSFE
    ^
    Q\
    DPMPSCMVF
    ^
    1BSTF3VMF 4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ

    View Slide

  71. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT

    View Slide

  72. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    4UZMF3VMFT
    4UZMF3VMFT
    4UZMF3VMFT
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    ϧʔϧΛ%0.ʹద༻ͯ͠$PNQVUFE4UZMFΛ࡞Δ

    View Slide

  73. Style
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMFT
    $PNQVUFE4UZMF\
    GPOU8FJHIU
    NBSHJO-FGU

    PVUMJOF

    USBOTGPSN
    CBDLHSPVOE
    ^
    ϑΥϯτ΍എܠͳͲͷελΠϧ৘ใΛ%0.ʹ෇༩͢Δ

    View Slide

  74. Layout
    • ҰͭҰͭͷཁૉ͸ελΠϧΛ΋͍ͬͯͯ΋ɺͦ
    Ε͕Ͳ͜ʹ഑ஔ͞ΕΔ͔ɺͲΕ͘Β͍ͷαΠζ
    ͳͷ͔ɺͱ͍͏৔ॴͷ৘ใ͸͍࣋ͬͯͳ͍ɻ


    • HTMLͷߏ଄ͱ Style ͷ৘ใΛجʹ৔ॴͱαΠζ
    Λܭࢉ͢Δॲཧ͕ Layout


    • ਌͔Β࠶ؼతʹḷͬͯ Layout ॲཧΛߦ͏

    View Slide

  75. Layout
    • ਌͔ΒࢠͲ΋ʹ࠶ؼతʹܭࢉΛ
    ͍ͯ͘͠


    • ࢠͲ΋ͷߴ͞ɾ෯Λܭࢉͨ͠Β
    ਌͸ࢠͲ΋ͷྦྷੵ͞Εͨߴ͞ɾ
    ෯ͱࣗ෼ࣗ਎ͷߴ͞ɾ෯ʹϚʔ
    δϯΛՃ͑ͯߴ͞Λܭࢉ͢Δ
    %PDVNFOU
    )5.-
    #PEZ
    %JW
    1
    5&95
    1
    5&95
    ߴ͞ɾ෯ɾҐஔΛܭࢉ

    View Slide

  76. Paint
    • ඳը͢ΔҐஔͱαΠζ͕ܾ·ͬͨޙɺͲͷॱ
    ൪Ͱඳը͢Δ͔ΛܾΊΔॲཧ


    • DOMͷॱংͰ͸ͳ͘ɺޙΖ͔ΒલʹͪΌΜͱ
    ඳը͠ͳ͍ͱࢥͬͨͱ͓ΓʹϨϯμϦϯά͞
    Εͳ͍ɻ
    CBDLHSPVOE
    fl
    PBUJOH GPSFHSPVOE PVUMJOF

    View Slide

  77. Paint
    • DOMͷཁૉͷॱ൪Ͱ͸ͳ͘ɺ z-index ౳Λ
    ࢖ͬͯޙΖͷཁૉͱલͷཁૉΛೖΕସ͑Δ͜
    ͱ͕Ͱ͖Δɻ


    <br/>.yellow { z-index: 2; ... }<br/>.green { z-index: 1; ... }<br/>

    View Slide

  78. Composite & Render
    • Ͱ͖͕͋ͬͨ΋ͷΛඞཁͳ෦෼͚ͩඳը͢ΔΑ͏ʹ
    Ωϟϓνϟʔͯ͠άϥϑΟοΫϥΠϒϥϦʹ౉͢


    • Πϝʔδͱͯ͠͸શ෦ܭࢉ͠ऴΘͬͯϨΠΞ΢τ΋ऴ
    ΘͬͯલܠͱഎܠऴΘͬͨͷͰɺͦΕΛҰຕͷϓϦϯ
    τ͢ΔࣸਅʹऔΔΈ͍ͨͳΠϝʔδ



    (SBQIJD
    *OUFSGBDF

    View Slide

  79. ΍ͬͪΌ͍͚ͳ͍͜ͱ
    • document.write() ͱݺ͹ΕΔAPIΛ࢖Θͳ͍


    • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍

    View Slide

  80. document.write()Λ࢖Θͳ͍
    )5.-
    %0.
    4UZMF
    -BZPVU
    EPDVNFOUXSJUF

    EPDVNFOUHFU&MFNFOU#Z*E


    FMFNUFYU$POUFOU

    View Slide

  81. document.write()Λ࢖Θͳ͍
    )5.-
    %0.
    4UZMF
    -BZPVU
    EPDVNFOUXSJUF

    EPDVNFOUHFU&MFNFOU#Z*E


    FMFNUFYU$POUFOU
    EPDVNFOUXSJUFࣗ਎͸௚ײతͰศར͕ͩɺ࣮͸)5.-͔Βࠩ
    ͠ସ͑ͯ͠·͏ɺͦͷͨΊɺࠓ·Ͱͷ%0.4UZMF
    -BZPVUͷྲྀΕ͕΍Γ௚͠ʹͳΔɻ࢖͏΂͖Ͱ͸ͳ͍ɻ

    View Slide

  82. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
    const ul = document.createElement("ul");
    for (let i=0;i<10000;i++) {
    // ϧʔϓ಺Ͱຖճ append ͠ͳ͍ɻ
    let li = document.createElement("li");
    li.textContent = "test" + i;
    ul.appendChild(li);
    }

    View Slide

  83. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
    EPDVNFOU
    IUNM
    CPEZ
    VM
    BQQFOE
    GPS MFUJJJ
    \
    MFUMJEPDVNFOUDSFBUF&MFNFOU MJ

    MJUFYU$POUFOUUFTUJ
    VMBQQFOE$IJME MJ

    ^
    4UZMF
    -BZPVU1BJOU
    MJ 4UZMF
    -BZPVU1BJOU
    MJ 4UZMF
    -BZPVU1BJOU
    MJ 4UZMF
    -BZPVU1BJOU
    MJ
    ࢠཁૉ͕௥Ճ͞ΕΔ౓ʹStyleॲཧ͕ಈ͘

    View Slide

  84. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
    const ul = document.getElementById("foo");
    const fr = document.createDocumentFragment();
    for (let i =0;i <100000;i++) {
    let li = document.createElement("li");
    i.textContent = `${i}`;
    // fragment ʹରͯ͠ೖΕ͓ͯ͘
    fr.appendChild(li);
    }
    ul.appendChild(fr);

    View Slide

  85. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
    EPDVNFOU
    IUNM
    CPEZ
    VM
    BQQFOE
    MFUVMEPDVNFOUHFU&MFNFOU#Z*E GPP

    MFUGSEPDVNFOUDSFBUF%PDVNFOU'SBHNFOU

    GPS MFUJJJ
    \
    MFUMJEPDVNFOUDSFBUF&MFNFOU MJ

    JUFYU$POUFOUA\J^A
    GSBQQFOE$IJME MJ

    ^
    VMBQQFOE$IJME GS

    Ұ୴ϑϥάϝϯτΛ࡞͔ͬͯΒ·ͱΊͯ


    ௥ه͢ΔɻҰ౓͚͔ͩ͠Styleॲཧ͸૸Βͳ͍
    MJ MJ MJ MJ
    4UZMF
    -BZPVU1BJOU

    View Slide

  86. ϨϯμϦϯάΤϯδϯ·ͱΊ
    • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ


    • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽
    Ͱ͖Δ


    • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉΛஔ͔͘ͱ͍
    ͏ Layout Λܭࢉ͢Δ


    • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ


    • document.write() ͸࢖Θͳ͍


    • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍

    View Slide

  87. JavaScript Τϯδϯ

    View Slide

  88. JavaScript Τϯδϯ
    • JavaScript Λ࣮ߦ͢ΔΤϯδϯ


    • ࠷ۙͷΤϯδϯ͸େମ Just In Time ίϯύΠϥ͕͍ͭ
    ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ
    Λݟͯߴ଎Խ͞ΕΔ


    • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ


    • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ

    View Slide

  89. ͬ͘͟Γ֓ཁͱͯ͠ͷಈ͖
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    TVN

    ύʔαʔ
    ΠϯλϓϦλ
    +*5ίϯύΠϥ
    JavaScript ந৅ߏจ໦



    &YDBBFDBF!
    $SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G
    -EB/BNFE1SPQFSUZS <> <>
    όΠτίʔυ
    ػցޠ
    ౷ܭ৘ใ
    ࠷దԽ ୤࠷దԽ

    View Slide

  90. JavaScript Τϯδϯ
    • JavaScriptͷධՁ


    • ϝϞϦ؅ཧ


    • Πϕϯτϧʔϓ

    View Slide

  91. JavaScriptͷධՁ
    • ύʔαʔ


    • ΠϯλϓϦλ


    • JITίϯύΠϥ

    View Slide

  92. ύʔαʔ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    TVN

    >
    fi
    FS
    >
    < QBSFO
    >
    fi
    FS
    >
    fi
    FS
    >
    UPLFOJ[F
    "45
    >
    fi
    FS
    >
    < QBSFO
    >
    fi
    FS
    >
    fi
    FS
    >
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJ
    fi
    FSTVN
    QBSBNT
    *EFOUJ
    fi
    FSC
    *EFOUJ
    fi
    FSB

    View Slide

  93. ύʔαʔ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    TVN

    >
    fi
    FS
    >
    < QBSFO
    >
    fi
    FS
    >
    fi
    FS
    >
    UPLFOJ[F
    "45
    >
    fi
    FS
    >
    < QBSFO
    >
    fi
    FS
    >
    fi
    FS
    >
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJ
    fi
    FSTVN
    QBSBNT
    *EFOUJ
    fi
    FSC
    *EFOUJ
    fi
    FSB
    +BWB4DSJQU΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ
    "CTUSBDU4ZOUBY5SFFͱ͍͏ߏ଄ɻ

    View Slide

  94. ΠϯλʔϓϦλ
    1SPHSBN
    'VODUJPO%FDMBSBUJPO
    *EFOUJ
    fi
    FSTVN
    QBSBNT
    *EFOUJ
    fi
    FSC
    *EFOUJ
    fi
    FSB
    *OUFSQSFUFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE!

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <> <>
    YDBBFDE!GC4UBSS
    4YDBBFDE!C-EB;FSP
    &YDBBFDEB!CC5FTU-FTT5IBO0S&RVBMB <>
    YDBBFDEE!B+VNQ*G'BMTF<> YDBBFDF!

    4YDBBFDEG!C-EB;FSP
    YDBBFDF!4UBSB
    YDBBFDF!C+VNQ<> YDBBFDG!

    4YDBBFDF!GC-EBSS
    &YDBBFDF!DD5FTU(SFBUFS5IBO0S&RVBMB <>
    YDBBFDF!B+VNQ*G'BMTF<> YDBBFDFF!

    "45͔ΒCZUFDPEFʹ্ͨ͠Ͱ࣮ߦ͢Δɻ
    3FTVMU

    View Slide

  95. JITίϯύΠϥ
    *OUFSQSFUFS +*5ίϯύΠϥ
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize

    View Slide

  96. JITίϯύΠϥ
    *OUFSQSFUFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize
    *OUFSQSFUFSͷ࣮ߦ࣌৘ใΛجʹ+*5$PNQJMFSͰ࠷దԽ͢Δ
    +*5ίϯύΠϥ

    View Slide

  97. JIT ίϯύΠϥ
    *OUFSQSFUFS
    &YDBBFDBF!$SFBUF6ONBQQFE"SHVNFOUT
    YDBBFDBG!G4UBSS
    4YDBBFDC!G-EB/BNFE1SPQFSUZS <> <>
    YDBBFDC!G4UBSS
    YDBBFDC!C-EB;FSP
    &YDBBFDC!G5FTU&RVBM4USJDUS <>
    YDBBFDCC!B+VNQ*G'BMTF<> YDBBFDE
    !

    4YDBBFDCE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDD!G4UBSS
    YDBBFDD!C-EB;FSP
    YDBBFDD!G4UBSS
    &YDBBFDD!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDDB!G4UBSS
    &YDBBFDDD!BGGG$BMM1SPQFSUZS UIJT S
    S <>
    4YDBBFDE!BB3FUVSO
    4YDBBFDE!-EB/BNFE1SPQFSUZUIJT <>
    <>
    YDBBFDE!GC4UBSS





    bytecode Optimized machine code
    Optimize
    Deoptimize
    ΋͠΋ਪఆ஋͕֎Ε͍ͯͨΒඇ࠷దԽ͕૸Δɻ
    +*5ίϯύΠϥ

    View Slide

  98. JIT ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ

    View Slide

  99. JIT ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    ͜Ε͕+*5ίϯύΠϥͰݴ͏ͱ͜Ζͷ࠷దԽॲཧ

    View Slide

  100. JIT ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN

    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ
    Δ͔ʁ

    View Slide

  101. JIT ίϯύΠϥ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ਺ࣈΛ଍ؔ͢਺
    TVN

    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ
    Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ
    ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
    GVODUJPOTVN B C
    \
    SFUVSOBC
    ^
    ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢
    TVN

    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ
    Δ͔ʁ
    CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ

    ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ

    View Slide

  102. JIT Λࡴ͢ཁҼҰཡ (v8)
    • ܕ৘ใͷෆҰக


    • not int32 (integer ͡Όͳ͔ͬͨ)


    • not a string (จࣈྻ͡Όͳ͔ͬͨ)


    • not an array index (഑ྻͷఴࣈ͡Ό
    ͳ͔ͬͨ)


    • etc
    https://github.com/v8/v8/blob/master/src/deoptimizer/deoptimize-reason.h
    • ༧ظͤ͵ૢ࡞


    • cow array's elements changed

    (ίϐʔͨ͠഑ྻ͕มߋ͞Εͨ)


    • division by zero (θϩআࢉ)


    • Out of bounds (഑ྻͷൣғ௒͑)


    • etc

    View Slide

  103. JIT Λࡴ͢ཁҼҰཡ (v8)
    • ܕ৘ใͷෆҰக


    • not int32 (integer ͡Όͳ͔ͬͨ)


    • not a string (จࣈྻ͡Όͳ͔ͬͨ)


    • not an array index (഑ྻͷఴࣈ͡Ό
    ͳ͔ͬͨ)


    • etc
    https://github.com/v8/v8/blob/master/src/deoptimizer/deoptimize-reason.h
    • ༧ظͤ͵ૢ࡞


    • cow array's elements changed

    (ίϐʔͨ͠഑ྻ͕มߋ͞Εͨ)


    • division by zero (θϩআࢉ)


    • Out of bounds (഑ྻͷൣғ௒͑)


    • etc
    ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ
    ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ

    View Slide

  104. JavaScript ͷϝϞϦ؅ཧ
    • جຊతʹԿ͔͠ΒͷΦϒδΣΫτΛ࡞ͬͨΒ
    ϝϞϦ͕֬อ͞ΕΔ


    • ϝϞϦʹೖ͍ͬͯΔΦϒδΣΫτ͸͍Βͳ͘
    ͳͬͨΒ࡟আ͞ΕΔ


    • ͦͷಈ͖ʹ͍ͭͯղઆ͢Δ

    View Slide

  105. ώʔϓྖҬ
    Ψϕʔδί
    ϨΫλ
    ࢖͍ͬͯͳ͍෺Λ


    ݟ͚ͭͯճऩ͢Δ
    JavaScriptΨϕʔδίϨΫγϣϯ

    View Slide

  106. ϚʔΫΞϯυεΠʔϓ
    SPPU

    ✔ ✔ ✔
    ✔ ✔ ✔
    ౸ୡෆՄೳ

    => ճऩՄೳ
    ౸ୡՄೳ

    => ੜ͖ͯΔՄೳੑ͕ߴ͍

    View Slide

  107. SPPU
    ຊདྷෆཁ͕ͩ root ͔Β

    ౸ୡՄೳͳॴʹ͋Δ
    ϚʔΫΞϯυεΠʔϓ

    View Slide

  108. SPPU
    ຊདྷෆཁ͕ͩ root ͔Β

    ౸ୡՄೳͳॴʹ͋Δ
    ϚʔΫΞϯυεΠʔϓ
    ͜ͷঢ়گ͕ϝϞϦϦʔΫͱݺ͹ΕΔঢ়گ

    View Slide

  109. Πϕϯτϧʔϓ
    • JavaScript ʹ͸ಉظతͳॲཧͱඇಉظతͳॲཧͷ2छྨ
    ͕ଘࡏ͢Δɻ


    • ୯७ͳԋࢉͳΒಉظతͳॲཧʹ౰ͨΔ


    • HTTPϦΫΤετ΍λΠϚʔʹΑΔॲཧ͸ඇಉظతͳॲཧ
    ʹ౰ͨΔ


    • ඇಉظతͳॲཧͱಉظతͳॲཧΛ࣮ࠞͥͯߦ͢ΔͨΊͷ
    ػߏ͕ΠϕϯτϧʔϓͰ͋Δ

    View Slide

  110. Πϕϯτϧʔϓɹ

    View Slide

  111. Πϕϯτϧʔϓ
    • ಉظతͳॲཧͷ৔߹

    View Slide

  112. Πϕϯτϧʔϓ
    • ඇಉظతͳॲཧͷ৔߹

    View Slide

  113. Πϕϯτϧʔϓ
    • ඇಉظతͳॲཧͷ৔߹

    View Slide

  114. ωοτϫʔΫ

    View Slide

  115. ωοτϫʔΫ
    • ௨৴Λߦ͍ɺཁٻ͞ΕͨίϯςϯπΛμ΢ϯ
    ϩʔυͨ͠Γɺ·ͨσʔλΛΞοϓϩʔυ͠
    ͨΓ͢Δɻ


    • HTTP(S)௨৴Λߦ͏ϨΠϠͰɺۙ೥͸ HTTP/3
    ͳͲ͕༗ޮʹͳΓͭͭ͋Δɻ

    View Slide

  116. ωοτϫʔΫ

    View Slide

  117. ωοτϫʔΫ
    • URLΛೖྗ͔ͯ͠Βϖʔδ͕දࣔ͞ΕΔ·ͰͷྲྀΕ

    View Slide

  118. URL
    • εΩʔϜ: ϦΫΤετૹ৴͢ΔࡍͷϓϩτίϧΛࢦఆ͢Δཁૉɺ http ΍ https ͳͲͷϓ
    ϩτίϧͷ໊લΛهड़͢Δɻ


    • υϝΠϯ໊: ެ։͞Ε͍ͯΔϗετͷॅॴΛࣔ͢ཁૉ


    • ϙʔτ: υϝΠϯ಺ͷϦιʔεʹΞΫηε͢ΔͨΊͷ൪߸ɺ80 (HTTP) ΍ 443 (HTTPS)
    ͳͲ


    • ύε: υϝΠϯ಺ͷϦιʔεͷ৔ॴ


    • ύϥϝʔλ: `?` ͔Β࢝·ΔɺϦιʔεʹରͯ͠औಘ΍ߋ৽ͳͲͷૢ࡞Λ͢Δ࣌ʹΫϥΠ
    Ξϯτ͔Βࢦఆͯ͠αʔόʹ౉͢͜ͱͰɺಛผͳॲཧΛͤ͞Δ͜ͱ͕Ͱ͖Δɻ


    • ΞϯΧʔ: `#` ͔Β࢝·ΔɻϦιʔε಺෦ͷίϯςϯπͷҐஔΛࢦ͢ɻ

    View Slide

  119. ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ
    • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ


    • αʔό͕઀ଓΛ଴͍ͬͯͯ


    • ͦ͜ʹ઀ଓΛཁٻ͠


    • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏
    Public IP / PORT Listen
    Data Transfer

    View Slide

  120. DNS໊લղܾ
    • υϝΠϯωʔϜΛIPΞυϨεʹม׵͢Δ

    View Slide

  121. DNS໊લղܾ
    • IP ͸ DNSαʔό͔Βڭ͑ͯ΋Β͏ɻ


    • https://example.com ʹΞΫηε͠Α͏ͱͨ͠৔߹ɺҰ౓΋ΞΫηε͞Εͯͳ͔ͬͨΒ
    DNS Lookup (໊લ͔ΒIPΞυϨεΛҾ͘ߦҝ)͕ߦΘΕΔɻ


    • DNS Lookup ͸ͦͷϦΫΤετઌͷυϝΠϯʹԠͯ͡౎౓ൃੜ͢ΔͷͰɺ 3rd party
    domain ͕ϖʔδ಺ʹ͋Δ৔߹͸ʢҰ౓΋๚໰͞Εͯͳ͔ͬͨΒʣͦͷ࣌఺Ͱൃੜ͢
    Δɻ
    EJHFYBNQMFDPN
    01514&6%04&$5*0/
    &%/4WFSTJPO
    fl
    BHTVEQ
    26&45*0/4&$5*0/
    FYBNQMFDPN */ "
    "/48&34&$5*0/
    FYBNQMFDPN */ "

    View Slide

  122. PORT ͸ʁ
    • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ


    • http ͳΒ 80 ൪ɺ https ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ


    • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ


    • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀
    ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ
    ΋ଟ͍ɻ

    View Slide

  123. ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • (؆ུԽͷͨΊ) TCP Λϕʔεʹ࿩͢ͱɺ֘౰ͷαʔόʹ͍͖ͳ
    Γ઀ଓ͢ΔͷͰ͸ͳ͘ɺ3ճͷ઀ଓ֬ೝΛܦͯ઀ଓ͢Δɻ


    • ͜ͷ઀ଓ֬ೝͷ͜ͱΛ 3 way handshake ͱݺͿɻ
    ͭͳ͛ΔΑʔ (SYN)
    ͍͍Αʔ ͬͪ͜΋ͭͳ͛ΔΑʔ(SYN-ACK)
    ͡Ό͋ͭͳ͙Ͷʔ (ACK)

    View Slide

  124. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ

    (Client Certi
    fi
    cate)
    ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳ
    ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ
    ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍)
    ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)
    ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi
    fi
    cate)
    ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi
    fi
    cate)

    View Slide

  125. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ

    (Client Certi
    fi
    cate)
    ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ
    • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸ HTTPS ͳ
    ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ
    ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍)
    ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello)
    ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi
    fi
    cate)
    ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange)
    Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi
    fi
    cate)
    )5514௨৴͸5$1ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ
    ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ

    View Slide

  126. ؓ࿩ٳ୊ TLS/1.3
    • TLS/1.3 Ͱ͸࠷ॳͷ઀ଓ࣌ʹϥ΢ϯυτϦοϓΛݮΒ͢ࢼΈΛ͍ͯ͠Δɻ


    • 0-RTT ͱݺ͹ΕΔ࢓૊ΈͰ͸͍͖ͳΓ Client ͕ Hello Λඈ͹ͯ͠σʔλΛ
    ૹΔ͜ͱ΋Մೳʹɻ
    Making the web faster with HTTP/3 by kazuho

    https://vimeo.com/485450984

    View Slide

  127. σʔλͷ΍ΓऔΓ
    • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ


    • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ


    • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ
    ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1ͷղઆ)



    1045JOEFYIUNM)551

    BDDFQUUFYUIUNM
    BDDFQUFODPEJOHH[JQ EF
    fl
    BUF CS
    BDDFQUMBOHVBHFFO64 FOR KBR

    DBDIFDPOUSPMOPDBDIF
    DPPLJFGPPCBSCB[

    GPPCBSIPHFGVHB
    ϦΫΤετߦ
    ϦΫΤετϔομʔ
    ϦΫΤετϘσΟ σʔλ಺༰

    View Slide

  128. σʔλͷ΍ΓऔΓ
    • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢


    • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ
    ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ
    )5510,
    "HF
    $BDIF$POUSPMNBYBHF
    $POUFOU5ZQFUFYUIUNMDIBSTFU65'
    %BUF.PO "QS(.5
    $POUFOU-FOHUI
    EPDUZQFIUNM
    IUNM
    IFBE

    εςʔλεߦ
    Ϩεϙϯεϔομ
    ϨεϙϯεϘσΟ

    View Slide

  129. ίϯςϯτ
    ϔομϑΟʔϧυ
    τϨʔϥʔϑΟʔϧυ
    ίϯςϯτ
    ϔομϑΟʔϧυ
    τϨʔϥʔϑΟʔϧυ
    ։࢝ߦ
    HTTP/1.1 HTTP/2, HTTP/3

    View Slide

  130. σʔλͷ΍ΓऔΓ
    • 200ܥ: ੒ޭɺσʔλͷຊମ͕͋Ε͹ૹΔ


    • 300ܥ: ϦμΠϨΫγϣϯϝοηʔδ


    • 400ܥ: ΫϥΠΞϯτΤϥʔ


    • 500ܥ: αʔόΤϥʔ

    View Slide

  131. 4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    σʔλͷ΍ΓऔΓ
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modi
    fi
    ed

    View Slide

  132. 4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    σʔλͷ΍ΓऔΓ
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modi
    fi
    ed
    )551্Ͱσʔλͷ΍ΓऔΓ͕ߦΘΕɺͦΕ͕ϨϯμϦϯάϓ
    ϩηε΍+4Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ

    View Slide

  133. 4FSWFS
    ͪͳΈʹ)551ͷ৔߹ɺΫϥΠΞϯτ͔
    Βαʔόʹ͸࠷େ઀ଓ·Ͱ͔͠ૹΕͳ͍ɻ
    σʔλͷ΍ΓऔΓ

    View Slide

  134. 4FSWFS
    ҰݸͰ΋஗͍ͱղܾ͞ΕΔ·Ͱ͔ͭ͠࢖͑ͳ͍
    σʔλͷ΍ΓऔΓ

    View Slide

  135. 4FSWFS
    )551ͩͱͭͷίωΫγϣϯ
    ͷதͰଟॏԽͯ͠ૹΔɻ
    σʔλͷ΍ΓऔΓ

    View Slide

  136. 4FSWFS
    )551ͩͱͭͷίωΫγϣϯ
    ͷதͰଟॏԽͯ͠ૹΔɻ
    σʔλͷ΍ΓऔΓ
    ͖ͬ͞ͷ5$1)BOETIBLFd5-4઀ଓཱ֬·Ͱ͕

    Ұճ͚ͩʹͳΔɻޮ཰తɻ

    View Slide

  137. σʔλͷ΍ΓऔΓ: HTTP/3
    • HTTP/2 Ͱ઀ଓίετͷ௿ݮ͕Ͱ͖͕ͨ໰୊΋͋Δɻ


    • ωοτϫʔΫ઀ଓ͕ෆ҆ఆͳ৔߹ TCP ઀ଓʹΑΓɺ͢΂ͯͷίωΫ
    γϣϯ͕ղܾ·Ͱʹ଴ͨ͞ΕΔέʔε͕༗Δɻཁ͸ύέϩεʹऑ͍ɻ



    4FSWFS
    5$1ͷϨΠϠͰෆ੔߹͕͋Δͱෆ੔߹͕గਖ਼͞Ε
    Δ·Ͱશମ͕ϒϩοΫ͞ΕΔɻ

    View Slide

  138. TCP͓͞Β͍
    • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ


    • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ
    ܾͯ͘͠ΕΔɻ
    4FSWFS
    )
    &
    -
    "DL
    &
    "DL͕དྷ
    ͳ͍
    ࠶ૹ͢Δ
    "DL
    ͕དྷ͚ͨͲͦΕ
    ·Ͱड৴ͨ͠΋ͷ
    ͸ഁغ͢ΔͶɻ
    -
    ͔Β΋
    ͏Ұ౓࠶

    View Slide

  139. HTTP/3
    • UDP ্ʹϓϩτίϧΛ࡞͍ͬͯΔ


    • TCPͷޡΓగਖ਼ͳͲͷ࢓૊ΈΛࣗ෼ͨͪͷϨΠϠ্Ͱ࠶࣮૷
    4FSWFS
    )
    &
    -
    ͕དྷͯͳ͍Α
    ̐&
    ඞཁͳ
    ΋ͷͷΈ
    ࠶ૹ
    Λ࢒ͨ͠·
    ·͕དྷͨ͜
    ͱʹ͢Δ

    View Slide

  140. σʔλͷ΍ΓऔΓ: HTTP/3
    • HTTP/3 Ͱ͸͜ͷ࢓૊ΈʹΑΓɺ઀ଓ಺Ͱͷσʔλෆ੔߹͕
    ൃੜͯ͠΋શମΛετοϓͤͣ͞ʹ֘౰ͷετϦʔϜͷΈగ
    ਖ਼ͤ͞Δɻ



    4FSWFS
    Ұ෦ͷετϦʔϜ͕ࢭ·ͬͯ΋શମʹӨڹ͕ग़ͳ
    ͍࢓૊Έ

    View Slide

  141. HTTP/3 ʹ͍ͭͯ
    • ผࢴࢀর

    View Slide

  142. σʔλετϨʔδ

    View Slide

  143. σʔλετϨʔδ
    • Ϩεϙϯεͷ৘ใ(Cache)΍Ϣʔβʔͷ৘ใ
    (Cookie, Localstorage etc)ΛϋʔυσΟεΫʹ
    ஝ੵ͓ͯ͘͠৔ॴ


    • σʔλετϨʔδʹσʔλΛஔ͍͓ͯ͘͜ͱ
    ͰσʔλΛӬଓԽͨ͠Γɺ Cache ʹΑΔ࠷ద
    ԽΛߦ͏͜ͱ͕Ͱ͖Δ

    View Slide

  144. Cache Storage
    • ϨεϙϯεΛΩϟογϡ͢Δ࢓૊Έ
    4FSWFS
    GET /main.css
    GET /main.js
    GET /image0.png
    GET /index.html
    200 OK
    200 OK
    404 Not Found
    304 Not Modi
    fi
    ed
    Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ
    ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ

    View Slide

  145. Cache Storage
    • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠
    ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹
    Ωϟογϡ͕༗ޮʹͳΔɻ


    • Cache-Control / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ
    Λ׆༻͢Δɻ
    $BDIF$POUSPMNBYBHFඵؒɺΫϥΠΞϯτͷ$BDIFͱ
    ͯ͠༗ޮ
    &UBHJEFOUσʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ
    ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕
    ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ

    View Slide

  146. Cookie Storage
    • ΫϥΠΞϯτ಺ͷσʔλͱͯ͠อଘ͞Εɺϒϥ΢β͔Β
    αʔόʹຖճϦΫΤετ͕ૹ৴͞ΕΔɻ


    • ओʹҎԼͷΑ͏ͳ༻్Ͱ࢖ΘΕΔɻ


    • ηογϣϯ؅ཧʢϩάΠϯɺγϣοϐϯάΧʔτͳͲʣ


    • ύʔιφϥΠζʢϢʔβઃఆɺςʔϚͳͲʣ


    • τϥοΩϯάʢϢʔβʔͷߦಈه࿥෼ੳʣ

    View Slide

  147. Cookie Storage
    • Ϩεϙϯεϔομʹ Set-Cookie ͔Β࢝·ΔσʔλΛೖ
    ΕΔ͜ͱͰอଘͤ͞Δ͜ͱ͕Ͱ͖Δɻ


    • ࣍ճҎ߱ͷϦΫΤετͰͦͷ Cookie ͕αʔόʹૹΒ
    ΕΔɻ
    4FSWFS
    Set-Cookie: id=1;
    Cookie: id=1;

    View Slide

  148. Cookie Storage
    • Cookie Λ࢖ͬͯྫ͑͹ϩάΠϯ੒ޭ࣌ʹηογϣϯID
    Λ෇༩͢Δɻ


    • ࣍ճҎ߱͸ηογϣϯID͕༗ޮ͔Ͳ͏͔Λ֬ೝ͢Ε͹
    ϩάΠϯ͍ͯ͠Δ͔Ͳ͏͔ΛαʔόଆͰ൑ผͰ͖Δɻ


    • ͦͷࡍʹ Expires ΍ MaxAge ଐੑΛ࢖͑͹͍ͭ·Ͱอ
    ࣋ͤ͞Δ͔΋ࢦఆͰ͖Δɻ

    View Slide

  149. Cookie Storage
    id
    pass
    4FSWFS
    GET /
    302 Redirect
    GET /login
    200 OK
    POST /login id=foo&pass=xxx
    302 Redirect Set-Cookie: session=xxx
    GET / cookie: session=xxx

    View Slide

  150. Cookie Storage
    id
    pass
    4FSWFS
    GET /
    302 Redirect
    GET /login
    200 OK
    POST /login id=foo&pass=xxx
    302 Redirect Set-Cookie: session=xxx
    GET / cookie: session=xxx
    4FTTJPO$PPLJFΛ࡞Δ·ͰͷྲྀΕ

    View Slide

  151. ޙ൒ Agenda
    • ϋϯζΦϯ


    • ϩάΠϯϑΥʔϜΛ࡞ͬͯΈΑ͏


    • ·ͱΊ

    View Slide

  152. ϋϯζΦϯ

    View Slide

  153. ϋϯζΦϯ
    • ࠓ·Ͱڭ͑ͨ͜ͱΛΞϓϦΛ࡞Γͳ͕ΒৼΓฦΔɻ


    • ωοτϫʔΫͷ΍ΓऔΓ


    • σʔλετϨʔδʹ͍ͭͯ


    • JavaScript Τϯδϯʹ͍ͭͯ


    • Ͳ͏΍ͬͯϨϯμϦϯά͞ΕͯΔ͔

    View Slide

  154. αʔόΛ࡞Δ
    • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ


    • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ


    • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ
    ͍ͨͷͰɺ clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ



    HJUDMPOFIUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU
    DECSPXTFSIBOETPO
    OQNJOTUBMM
    OPEFBQQNKT
    PQFOIUUQMPDBMIPTU

    View Slide

  155. ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛ
    ோΊΔ
    • ಈ͍ͨΒ࣮ࡍͷϦΫΤετ/ϨεϙϯεΛோΊ
    ͯΈ·͠ΐ͏ɻ


    • Chrome Ͱ։ൃπʔϧ(⌘ + Shift + I)Λ։͖ɺ
    ωοτϫʔΫλϒʹભҠ͠ɺϦΫΤετɾϨ
    εϙϯεΛݟͯΈ·͢ɻ

    View Slide

  156. ωοτϫʔΫͷ΍ΓऔΓ
    • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ


    • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ
    trust ͓͖ͤͯ͞·͢ɻ
    OQNFYFDNLDFSUDSFBUFDB
    OQNFYFDNLDFSUDSFBUFDFSU
    TVEPTFDVSJUZBEEUSVTUFEDFSUESUSVTU3PPUL-JCSBSZ
    ,FZDIBJOT4ZTUFNLFZDIBJODBDSU

    View Slide

  157. ωοτϫʔΫͷ΍ΓऔΓ
    • Node.js ଆ΋ https ʹରԠͤͯ͞Έ·͠ΐ͏ɻ


    • ઌఔ࡞ͬͨ cert ϑΝΠϧΛಡΊ͹ྑ͍Ͱ͢ɻ
    BQQNKT
    JNQPSU\SFBE'JMF4ZOD^GSPNGT௥ه
    JNQPSU\DSFBUF4FSWFS^GSPNIUUQTIUUQ͔ΒIUUQTʹมߋ
    DPOTUSFRTPO
    DSFBUF4FSWFS \
    LFZSFBE'JMF4ZOD DFSULFZ
    ௥ه
    DFSUSFBE'JMF4ZOD DFSUDSU
    ௥ه
    ^
    MJTUFO QPSU

    View Slide

  158. ωοτϫʔΫͷ΍ΓऔΓ
    • खͬऔΓૣ͘ curl ͰΞΫηεͯ͠த਎Λݟͯ
    Έ·͠ΐ͏ɻ
    DVSMJWWWIUUQTMPDBMIPTUMPHJO
    $POOFDUFEUPMPDBMIPTU
    QPSU

    TVDDFTTGVMMZTFUDFSUJ
    fi
    DBUFWFSJGZMPDBUJPOT
    5-4W 065
    5-4IBOETIBLF $MJFOUIFMMP

    5-4W */
    5-4IBOETIBLF 4FSWFSIFMMP

    5-4W */
    5-4IBOETIBLF $FSUJ
    fi
    DBUF

    5-4W */
    5-4IBOETIBLF 4FSWFSLFZFYDIBOHF

    5-4W */
    5-4IBOETIBLF 4FSWFS
    fi
    OJTIFE

    View Slide

  159. ωοτϫʔΫͷ΍ΓऔΓ
    • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ


    • http2 ͷ createSecureServer Λ࢖ͬͯ http2
    αʔόΛཱͯͯΈ·͠ΐ͏ɻ


    • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ
    Ε͹੒ޭͰ͢ɻ

    View Slide

  160. σʔλετϨʔδΛࢼ͢
    • CSS΍JSΛ Cache-Control Λ࢖ͬͯΩϟο
    γϡʹೖΕͯΈ·͠ΐ͏ɻ


    • ։ൃπʔϧͰ (Cached) ͳϨεϙϯε͕ؼͬͯ
    ͖͍ͯͨΒ੒ޭͰ͢ɻ

    View Slide

  161. σʔλετϨʔδΛࢼ͢
    • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ


    • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ
    ε (302, Location: "/") ͱڞʹ Set-Cookie ͰΫοΩʔʹηο
    γϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ΋
    Մʣɻ


    • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login
    Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ

    View Slide

  162. JavaScript Τϯδϯʹ͍ͭͯ
    • ͪͳΈʹࠓͷ script.js ͸׶͑ͯಈ͔ͳ͍Α͏ʹͳͬ
    ͯ·͢ɻ


    • ಈ͘Α͏ʹͯ͠Έ͍ͯͩ͘͞ɻͳΜͰಈ͔ͳ͍͔Λ
    ࢦఠͰ͖ͨΒՃ఺ɻ


    • DOMΛૢ࡞͠ͳ͕ΒύεϫʔυͷϚεΫΛ֎ͯ͠ɺ
    දࣔ͢ΔϘλϯͷಈ࡞Λ֬ೝͯ͠Έ͍ͯͩ͘͞ɻ

    View Slide

  163. JavaScript Τϯδϯʹ͍ͭͯ
    • ΋͠Ͱ͖ͨΒಈతʹύεϫʔυೖྗΛνΣο
    Ϋͤͯ͞Έ͍ͯͩ͘͞ɻ


    • ೖྗʹԠͯ͡಺༰ΛνΣοΫ͠ɺத਎͕ظ଴
    ͢Δ΋ͷ͡Όͳ͔ͬͨΒૹΕͳ͍Α͏ʹͯ͠
    Έ͍ͯͩ͘͞ɻ

    View Slide

  164. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ
    Δ͔
    • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ
    ΫΞοϓ͍ͯͩ͘͠͞ɻ


    • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ
    ͏ɻ


    • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ


    • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ
    Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ

    View Slide

  165. ·ͱΊ

    View Slide

  166. લ൒
    • ϒϥ΢βͷػೳ


    • ϒϥ΢βͷߏ଄


    • ϨϯμϦϯάͷ࢓૊Έ


    • JavaScript Τϯδϯͷ࢓૊Έ


    • ωοτϫʔΫͷ࢓૊Έ


    • σʔλετϨʔδͷ࢓૊Έ

    View Slide

  167. ޙ൒
    • ϋϯζΦϯͰࠓ·Ͱशͬͨ΍ͭΛٯ޲͖ʹҰؾʹ
    ۦ͚ൈ͚ͯ΋Βͬͨɻ


    • ωοτϫʔΫ


    • σʔλετϨʔδ


    • JavaScript


    • ϨϯμϦϯά

    View Slide

  168. ϒϥ΢βͷத਎ͱ࢓૊ΈΛΘ্͔ͬͨ
    ͰϋϯζΦϯͰҰؾʹಈ͘΋ͷΛࢼ͢
    • ಄ͷதʹϒϥ΢βͷϚοϓΛ΋ͬͨঢ়ଶͰϋϯζΦϯΛ΍ͬ
    ͯ΋Β͍·ͨ͠ɻ


    • ͢΂ͯͰ͖ͳ͔ͬͨਓ΋͍Δͱࢥ͏ͷͰɺͦͷํ͸॓୊ͱ͠
    ͯ࢒͓͖ͯ͠·͢ɻ


    • ΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ұ൪ษڧʹͳΔͷͰ͓͢͢Ί
    ͠·͢ɻ


    • ಄ͷதʹϚοϓΛ࡞ΓɺΞϓϦέʔγϣϯΛ࡞ΓɺͦΕΛߋ
    ৽͢Δͱ͍͏αΠΫϧΛճ͍͖ͯ͠·͠ΐ͏ɻ

    View Slide