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

ブラウザ/ Browser

Recruit
August 10, 2023

ブラウザ/ Browser

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

Recruit

August 10, 2023
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. ϒϥ΢βͷػೳ • ΞυϨεόʔʹ͍Εͨ URL Λجʹϖʔδ͕ϨϯμϦϯά͞ΕΔ • ϦϯΫΛΫϦοΫ͢ΔͳͲͷΞΫγϣϯ͕͋Δͱ URL ͕มԽ ͠ɺཤྺʹͨ·Δ

    • ໭ΔϘλϯΛԡ͢ͱཤྺΛ໭ΕΔ • ਐΉϘλϯΛԡ͢ͱཤྺΛਐΊΒΕΔ • ϦϩʔυϘλϯΛԡ͢ͱ࠶౓ URL Λߋ৽͢Δ *NBHF
  2. ϒϥ΢βͷػೳ • େݪଇ: ΢ΣϒΞϓϦέʔγϣϯ͸ϒϥ΢βͷػೳΛ յͯ͠͸͍͚ͳ͍ɻ • յ͢ͱମݧ͕ѱ͍͚ͩ͡Όͳ͍ɻ • ΞΫηγϏϦςΟ΋ѱ͘ͳΔɻ •

    ηΩϡϦςΟͱ͔ͷอޢػߏ΋ಇ͔ͳ͘ͳΔ͔΋ɻ ͲΜͳʹྑ͍ΞϓϦͰ͋ͬͯ΋ 
 ϒϥ΢βͷػೳΛյ͢Α͏ͳΞϓϦ͸࢖ΘΕͳ͘ͳΔ
  3. ϒϥ΢βͷߏ଄ 6TFS*OUFSGBDF #SPXTFS&OHJOF 3FOEFSJOH &OHJOF /FUXPSL +BWB4DSJQU &OHJOF %BUB 4UPSBHF

    ίϯςϯπͷඳըΛߦ͏ɻίϯςϯπ͕ )5.-ͳΒϖʔδΛύʔεͯ͠ϩʔυ͢Δ
  4. ϒϥ΢βͷߏ଄ • ωοτϫʔΫ • HTML ΍ CSS ΍ JavaScript ͱ͍ͬͨίϯςϯπΛμ΢ϯϩʔυͨ͠ΓɺΞο

    ϓϩʔυ͢Δ࢓૊Έ • ϒϥ΢βͷσʔλަ׵ͷ࢓૊Έ͸ʮσʔλͷཁٻʢϦΫΤετʣʯͱʮཁٻ ʹରͯ͠ͷԠ౴ʢϨεϙϯεʣʯͱ͍͏̎ͭͷγϯϓϧͳ΍ΓऔΓʹΑͬͯ ߦΘΕ͍ͯΔ •
  5. ϒϥ΢βͷߏ଄ • JavaScript Τϯδϯ • JavaScript ͸ίϯςϯπΛಈతʹมߋ͢Δͱ͍ͬͨඇৗʹॏཁͳॲཧΛߦ ͏෦෼ • ʮJust

    In Time ίϯύΠϥ(JITίϯύΠϥ)ʯͱݺ͹ΕΔಈతʹίʔυΛղ ੳ͢ΔࣄͰੑೳΛิ͍ͬͯΔ •
  6. 1990೥୅: ϒϥ΢βઓ૪ • ϏοάΧϯύχʔ΋໧͍ͬͯͳ͍ɻ • IBM͕ WebExplorer Λ։ൃ͠ɺͦͷޙ Microsoft ͕

    Internet Explorer Λ։ൃ͢Δɻ • Mosaic ͸ NetScape ձࣾΛ্ཱͪ͛ɺ Navigator ͱ͍͏໊ લͰ։ൃ͢Δɻ • ୈҰ࣍ϒϥ΢βઓ૪͕ຄൃ͢Δɻ
  7. 1990೥୅: ϒϥ΢βઓ૪ • ػೳͷ֦ॆ͕ਐΜͰ͍͘ҰํͰϒϥ΢βઓ૪͸൵ܶ΋΋ͨΒͨ͠ɻ • աܹͳࠩผԽͱػೳ֦ॆ͕ਐΉதͰಠ֦ࣗுʹ͸͠Δ͜ͱ΋૿͑ͯ ͍͘ • JScript ͱݺ͹ΕΔ΄ͱΜͲ

    JavaScript ͱಉ͡Α͏ͳػೳΛ࣋ͬͨ εΫϦϓτݴޠ͕ Internet Explorer ʹ࣮૷͞ΕΔ • JavaScript Ͱ Style ΛܾΊΒΕΔ JavaScript Style Sheet ΋ఏҊ͞ ΕΔ͕ɺ࢓༷ܾΊ͖Εͳ͍͏ͪʹऴΘΔͳͲɻ
  8. 1990೥୅: ϒϥ΢βઓ૪ • ࠷ऴతʹୈҰ࣍ϒϥ΢βઓ૪͸Microsoft͕উར͢Δ • OSʹϒϥ΢β͕ಉࠝ͞ΕΔࣄͰ NetScape ͷϒϥ΢βΑΓ ΋Ϣʔβʔ਺Λ৳͹͠ɺՉ઎ঢ়ଶ͕࡞ΒΕͯ͠·͏ɻ •

    NetScape ଆ͸Ϣʔβʔ਺ͷ֫ಘʹ͸ࣦഊͨ͠΋ͷͷɺ OSS Խͯ͠ϒϥ΢βͷٕज़Λޙੈʹ࢒͠ɺ Mozilla ͱ͍͏ اۀʹܗΛม͑ͯଘଓ͢Δ
  9. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • Mozilla ͕ຬΛ࣋ͯ͠ FireFox Λ։ൃͯ͠ɺϦϦʔε͢Δɻ

    • ࠓ·Ͱ Internet Explorer Ұڧঢ়ଶ͕ͩͬͨɺ࢓༷ʹ஧࣮Ͱ͋Γɺߴ଎ʹಈ͖ɺ λϒػೳ΍֦ுػೳΛඋ͑ͨ FireFox ͕Ϣʔβʔ਺Λൈ͘ • 2000೥୅ޙ൒ʹͳΔͱϓϨΠϠʔ͕มΘΔɻ • ·ͣ Google ͕ JavaScript ͱಈతͳ HTTP ϦΫΤετʢ͍ΘΏΔ Ajaxʣ Λ૊Έ ߹ΘͤΔࣄͰ͜Ε·ͰͷHTMLɺ CSSɺ JavaScript ͱ͍͏ٕज़͚ͩͰΠϯλϥΫ ςΟϒͳΞϓϦέʔγϣϯΛ΢Σϒ্Ͱ࡞ΕΔ͜ͱΛ࣮ફ͢Δɻ • ࣍ʹ Google ͕ Chrome ΛϦϦʔε͢Δɻ
  10. 2000೥୅: Google Chrome ͷ ొ৔ɺεϚʔτϑΥϯͷొ৔ • 2000೥୅ͷલ൒͔Βޙ൒ʹ͔͚ͯى͖ͨͷ͸ɺ΢Σϒ্ͰΠϯλϥ ΫςΟϒͳΞϓϦέʔγϣϯΛ࡞Δͱ͍͏ٕज़తͳύϥμΠϜγϑτ • ϒϥ΢β্Ͱ

    JavaScript Λத৺ʹΞϓϦέʔγϣϯΛ࡞Δػձ͕૿͑ ͨɻ • ݁Ռͱͯ͠ɺΞϓϦέʔγϣϯͷ࣮ߦ଎౓ʹ௚݁͢Δ JavaScript ͷ࣮ ߦ؀ڥʹ΋ݟ௚͕͠ೖΔɻ • ֤ϒϥ΢βͷJavaScript Engineʹ JITίϯύΠϥ ͱݺ͹ΕΔ࣮ߦதʹ ࠷దԽ͢Δػೳ͕ಋೖ͞Ε͍ͯ͘
  11. 2010೥୅: HTML5ϒʔϜͱε ϚʔτϑΥϯωΠςΟϒΞϓϦ • ΞϓϦέʔγϣϯͷ࡞Γํ͕ωΠςΟϒΞϓϦͷ࡞Γํʹۙ͘ͳͬͯ ͍ͬͨɻ • ΫϥΠΞϯτ಺Ͱ LocalStroage ΍

    Session Stroage ͱ͍ͬͨΫϥΠΞ ϯτͷετϨʔδΛ࢖͓͏ͱͨ͠ΓɺΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ ϒϥ΢β͕ਐԽ͍ͯͬͨ͠ɻ • ͜ͷࠒʹ Network ʹ΋ਐԽ͕๚ΕΔɻϒϥ΢β͕ར༻͢Δίϯςϯπ ͕ΑΓϦονʹͳΓɺΞϓϦέʔγϣϯ΋Ͱ͖Δ͜ͱ͕૿͍͑ͯ͘ͱɺ ωοτϫʔΫͷར༻཰্͕͕͍ͬͯ͘ • HTTP/2 ͱ͍ͬͨޮ཰తʹϦΫΤετ͢Δํ๏͕ग़ͯ͘Δɻ
  12. HTML Parse EJW QIFMMPQ QXPSMEQ EJW 1BSTF %*7 
 1

    5&95 1 5SFF %PDVNFOU )5.- #PEZ %JW 1 5&95 1 5&95 • λάΛωετͯ͠දݱ • ໦ߏ଄ͱ͍͏ܗͰσʔλߏ଄ͱͯ͠ 
 දݱ͞ΕΔɻ
  13. 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
  14. Style • DOM Λ࡞ͬͨΒͦΕʹ Style Λ ౰͍ͯͯ͘ • %PDVNFOU )5.-

    #PEZ %JW 1 5&95 1 5&95 p { color: red } IFMMP XPSME 4UZMF
  15. Style • ηϨΫλ • ελΠϧΛ౰ͯΔࡍͷ௚઀తͳϧʔϧΛهड़ ͯ͠಺༰ΛؚΊͨ΋ͷ p { color: red;

    } #test { border: red 2px solid; } .foo { background-color: skyblue; }
  16. Style • CSS (Cascading Style Sheets) • ηϨΫλΛෳࡶʹࢦఆͰ͖Δ 
 ͪͳΈʹෳࡶͳࢦఆΛ͢Ε͹͢Δ΄Ͳෳࡶͳܭࢉ͕ඞཁͳͷͰ஗͍ɻ

    • ηϨΫλ͸ඃΔ͜ͱ͕͋Δ • ඃͬͨΒৄࡉ౓Ͱܾ·Δ EJWOPU GPP QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF ^
  17. Style • ηϨΫλϚονϯά • ֤ཁૉͷCSSͷηϨΫλΛҰͭҰͭݟ͍ͯͬͯελΠϧΛ൓ө͢Δ • Πϝʔδͱͯ͠͸ΞϯέʔτೖྗϑΥʔϜʹ͍ۙ • .BSHJO 'POU

    $PMPS 1BEEJOH ✔ ✔ 255,255,255,0 top: 20px left: ✔family: serif bottom: style: size: top: left: bottom:
  18. Style • CSS ৄࡉ౓ (ڧ͍ॱͷྫ) • styleଐੑͰͷࢦఆ • ηϨΫλͷ ID

    ͷ਺ • ηϨΫλͷଐੑͷ਺ • ηϨΫλͷཁૉ໊ͷ਺  \^ BCDETQFDJ fi DJUZ     MJ\^ BCDETQFDJ fi DJUZ     MJ fi STUMJOF\^ BCDETQFDJ fi DJUZ     VMMJ\^ BCDETQFDJ fi DJUZ     VMPM MJ\^ BCDETQFDJ fi DJUZ     I  <SFMVQ>\^ BCDETQFDJ fi DJUZ     VMPMMJSFE\^ BCDETQFDJ fi DJUZ     MJSFEMFWFM\^ BCDETQFDJ fi DJUZ     YZ\^ BCDETQFDJ fi DJUZ     TUZMF BCDETQFDJ fi DJUZ     http://taligarsiel.com/Projects/howbrowserswork1.htm#Speci fi ty
  19. 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 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ਌͔Β΋Β͑Δͱ͜Ζ͸आΓͯ͘Δ
  20. Style EJWOPU GPP QOUIPGUZQF O \ DPMPSSFE ^ Q\ DPMPSCMVF

    ^ 1BSTF3VMF 4UZMF3VMFT 4UZMF3VMFT 4UZMF3VMFT $44΋ύʔε͠ɺελΠϧͷϧʔϧηοτΛ࡞Δɻ
  21. 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
  22. 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Λ࡞Δ
  23. 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.ʹ෇༩͢Δ
  24. 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); }
  25. DOMͷߋ৽ස౓Λଟ͘͠ͳ͍ EPDVNFOU IUNM CPEZ VM BQQFOE GPS MFUJJJ \ MFUMJEPDVNFOUDSFBUF&MFNFOU

    MJ  MJUFYU$POUFOUUFTU J VMBQQFOE$IJME MJ  ^ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ 4UZMF -BZPVU1BJOU MJ ࢠཁૉ͕௥Ճ͞ΕΔ౓ʹStyleॲཧ͕ಈ͘
  26. 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);
  27. 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
  28. ϨϯμϦϯάΤϯδϯ·ͱΊ • HTML͸ಈతʹߋ৽͞ΕΔϞσϧ • ಈతʹߋ৽͢ΔͨΊʹதؒදݱͱͯ͠ DOM Λ༻ҙ͓ͯ͠Γɺ JavaScript Ͱߋ৽ Ͱ͖Δ

    • DOMʹม׵ͨ͠ޙɺ Style Λܭࢉ͠ɺͦͷޙͲͷϙδγϣϯʹཁૉΛஔ͔͘ͱ͍ ͏ Layout Λܭࢉ͢Δ • ࠷ޙʹ Paint Ͱલ໘ʹஔ͔͘എ໘ʹஔ͔͘ΛܾΊͯඳը͢Δ • document.write() ͸࢖Θͳ͍ • DOMͷߋ৽ස౓Λଟ͘͠ͳ͍
  29. JavaScript Τϯδϯ • JavaScript Λ࣮ߦ͢ΔΤϯδϯ • ࠷ۙͷΤϯδϯ͸େମ Just In Time

    ίϯύΠϥ͕͍ͭ ͓ͯΓɺ୯ͳΔΠϯλϓϦλͰ͸ͳ͘ɺ౷ܭతʹঢ়گ Λݟͯߴ଎Խ͞ΕΔ • ͜͜Ͱ͸ུ֓Λղઆ͠ɺΤϯδϯͷؾ࣋ͪΛ஌Δɻ • ͪͳΈʹ৘ใ͕ଟ͍ v8 ͷΤϯδϯΛࢀߟʹ͍ͯ͠Δɻ
  30. ͬ͘͟Γ֓ཁͱͯ͠ͷಈ͖ GVODUJPOTVN B C \ SFUVSOB C ^ TVN 

      ύʔαʔ ΠϯλϓϦλ +*5ίϯύΠϥ JavaScript ந৅ߏจ໦    &YDBBFDBF! $SFBUF6ONBQQFE"SHVNFOUT YDBBFDBG!G4UBSS 4YDBBFDC!G -EB/BNFE1SPQFSUZS <> <> όΠτίʔυ ػցޠ ౷ܭ৘ใ ࠷దԽ ୤࠷దԽ
  31. ύʔαʔ GVODUJPOTVN B C \ SFUVSOB C ^ TVN 

      <GVODUJPO LFZXPSE > <TVN JEFOUJ fi FS > <  QBSFO > <B JEFOUJ fi FS > <C JEFOUJ fi FS > UPLFOJ[F "45 <GVODUJPO LFZXPSE > <TVN JEFOUJ fi FS > <  QBSFO > <B JEFOUJ fi FS > <C JEFOUJ fi FS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FSTVN QBSBNT *EFOUJ fi FSC *EFOUJ fi FSB
  32. ύʔαʔ GVODUJPOTVN B C \ SFUVSOB C ^ TVN 

      <GVODUJPO LFZXPSE > <TVN JEFOUJ fi FS > <  QBSFO > <B JEFOUJ fi FS > <C JEFOUJ fi FS > UPLFOJ[F "45 <GVODUJPO LFZXPSE > <TVN JEFOUJ fi FS > <  QBSFO > <B JEFOUJ fi FS > <C JEFOUJ fi FS > 1SPHSBN 'VODUJPO%FDMBSBUJPO *EFOUJ fi FSTVN QBSBNT *EFOUJ fi FSC *EFOUJ fi FSB +BWB4DSJQU΋͜Ε·Ͱͱಉ༷໦ߏ଄Ͱද͞ΕΔɻ "CTUSBDU4ZOUBY5SFFͱ͍͏ߏ଄ɻ
  33. ΠϯλʔϓϦλ 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
  34. 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
  35. 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ίϯύΠϥ
  36. 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ίϯύΠϥ
  37. JIT ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C ^ ਺ࣈΛ଍ؔ͢਺

    TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ
  38. JIT ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C ^ ਺ࣈΛ଍ؔ͢਺

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

    TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPOTVN B C \ SFUVSOB C ^ ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢ TVN    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ
  40. JIT ίϯύΠϥ GVODUJPOTVN B C \ SFUVSOB C ^ ਺ࣈΛ଍ؔ͢਺

    TVN    Կ౓΋਺ࣈΛ଍͠߹Θ͓͚ͤͯ͹ɺTVNؔ਺ͷ Ҿ਺͸਺ࣈɺಛʹJOUFHFSCJUҐ͔͕Θ͔Δ ͦ͏͢Ε͹ɺػցޠʹ͢Δ࣌ʹ࠷దԽ͕Ͱ͖Δɻ GVODUJPOTVN B C \ SFUVSOB C ^ ͍͖ͳΓ͜͜ͰจࣈྻΛ଍͢ TVN    ࠷దԽ͞ΕͨॴͰจࣈྻΛҾ਺ʹ౉ͨ͠ΒͲ͏ͳ Δ͔ʁ CZUFDPEF͔Β΍Γ௚͢͜ͱʹͳΔʢඇ࠷దԽ͕૸Δʣɻ 
 ͔ͤͬ͘+*5Ͱ࠷దԽͨ͠ॲཧ͕ແବʹͳΔɻ
  41. 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
  42. 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 ֮͑Δඞཁ͸ͳ͍͕ɺॻ࣌͘ʹʮԿΛ͠ͳ͍ํ͕͍͍͔ʯΛ ஌͓͍ͬͯͨ΄͏͕ྑ͍ɻ
  43. ϚʔΫΞϯυεΠʔϓ SPPU ✔ ✔ ✔ ✔ ✔ ✔ ✔ ౸ୡෆՄೳ

    
 => ճऩՄೳ ౸ୡՄೳ 
 => ੜ͖ͯΔՄೳੑ͕ߴ͍
  44. URL • εΩʔϜ: ϦΫΤετૹ৴͢ΔࡍͷϓϩτίϧΛࢦఆ͢Δཁૉɺ http ΍ https ͳͲͷϓ ϩτίϧͷ໊લΛهड़͢Δɻ •

    υϝΠϯ໊: ެ։͞Ε͍ͯΔϗετͷॅॴΛࣔ͢ཁૉ • ϙʔτ: υϝΠϯ಺ͷϦιʔεʹΞΫηε͢ΔͨΊͷ൪߸ɺ80 (HTTP) ΍ 443 (HTTPS) ͳͲ • ύε: υϝΠϯ಺ͷϦιʔεͷ৔ॴ • ύϥϝʔλ: `?` ͔Β࢝·ΔɺϦιʔεʹରͯ͠औಘ΍ߋ৽ͳͲͷૢ࡞Λ͢Δ࣌ʹΫϥΠ Ξϯτ͔Βࢦఆͯ͠αʔόʹ౉͢͜ͱͰɺಛผͳॲཧΛͤ͞Δ͜ͱ͕Ͱ͖Δɻ • ΞϯΧʔ: `#` ͔Β࢝·ΔɻϦιʔε಺෦ͷίϯςϯπͷҐஔΛࢦ͢ɻ
  45. ͦ΋ͦ΋௨৴Λߦ͏ͱ͸ʁ • Public IP / PORT ΛΫϥΠΞϯτ͕஌͍ͬͯͯ • αʔό͕઀ଓΛ଴͍ͬͯͯ •

    ͦ͜ʹ઀ଓΛཁٻ͠ • ઀ଓΛཱ֬ͨ͠Βɺσʔλͷަ׵Λߦ͏ Public IP / PORT Listen Data Transfer
  46. 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   */ " 
  47. PORT ͸ʁ • ༗໊ͳϓϩτίϧͷ৔߹༧Ίܾ·ͬͯΔɻ • http ͳΒ 80 ൪ɺ https

    ͳΒ 443 ൪ͱ͍ͬͨ෩ʹɻ • ͜ͷ༧ΊܾΊΒΕͨ PORT ͷ͜ͱΛ well-known PORT ͱݺͿɻ • well-known ͳ PORT ͸ಛݖ͕ඞཁͳέʔε΋ଟ͍ͷͰɺ։ൃ؀ ڥ౳Ͱ͸ 3000 ൪ͱ͔ʹͯ͠ɺ localhost:3000 Ͱݺͼग़͢͜ͱ ΋ଟ͍ɻ
  48. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (Client Certi fi cate) ઀ଓΛཱ֬ͱ͍͏ͷ͸ʁ • HTTP ͳΒ͜ΕͰܨ͕Δ͕ɺ࠷ۙͷେମͷWebαʔό͸

    HTTPS ͳ ͷͰɺ͜Ε͚ͩͰ͸ܨ͕Βͳ͍ɻ҉߸ԽͷͨΊͷ΍ΓऔΓ͕ߋʹ ߦΘΕΔɻ(※؆ུԽ͍ͯ͠ΔͨΊɺਖ਼֬Ͱ͸ͳ͍) ΑΖ͓͘͠ئ͍͍ͨ͠·͢ɻ(Client Hello) ͪ͜Βͦ͜ΑΖ͓͘͠Ͷ͕͍͠·͢ɻ (Server Hello) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ (Server Certi fi cate) ͜͏͍͏伴Ͱ࿩ͤ·͢ (Server Key Exchange) Θͨ͠͸͜͏͍͏΋ͷͰ͢ɻ(Client Certi fi cate)
  49. ͡Ό͋ࢲͷ伴ͱ߹Θͤͯ͜ΕͰ࿩͠·͠ΐ͏ɻ 
 (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ͷ΍ΓऔΓͷޙͰ҉߸ԽͷͨΊͷऔΓܾ ΊΛ͢Δεςοϓ͕͋ΔɻͦΕΛܦͯ઀ଓ͞ΕΔɻ
  50. ؓ࿩ٳ୊ TLS/1.3 • TLS/1.3 Ͱ͸࠷ॳͷ઀ଓ࣌ʹϥ΢ϯυτϦοϓΛݮΒ͢ࢼΈΛ͍ͯ͠Δɻ • 0-RTT ͱݺ͹ΕΔ࢓૊ΈͰ͸͍͖ͳΓ Client ͕

    Hello Λඈ͹ͯ͠σʔλΛ ૹΔ͜ͱ΋Մೳʹɻ Making the web faster with HTTP/3 by kazuho 
 https://vimeo.com/485450984
  51. σʔλͷ΍ΓऔΓ • ઀ଓཱ͕֬͞Εͨޙ͸ HTTP ϓϩτίϧʹΑΔσʔλͷ΍ΓऔΓΛߦ͏ɻ • HTTP ͸جຊతʹϦΫΤετ / ϨεϙϯεͰͷ΍ΓऔΓ͕ߦΘΕΔɻ

    • HTTP ϦΫΤετʹ͸ϦΫΤετߦͱϔομʔͱݺ͹ΕΔϝλ৘ใͱϘσΟ ͱݺ͹ΕΔίϯςϯτ৘ใؚ͕·ΕΔɻ(※ ؆ུԽͷͨΊHTTP/1.1ͷղઆ) • 1045JOEFYIUNM)551 
 BDDFQUUFYUIUNM BDDFQUFODPEJOHH[JQ EF fl BUF CS BDDFQUMBOHVBHFFO64 FOR KBR 
 DBDIFDPOUSPMOPDBDIF DPPLJFGPPCBSCB[ 
 GPPCBSIPHFGVHB ϦΫΤετߦ ϦΫΤετϔομʔ ϦΫΤετϘσΟ σʔλ಺༰
  52. σʔλͷ΍ΓऔΓ • ϦΫΤετΛड͚औͬͨΒαʔό͸ϨεϙϯεʢԠ౴ʣΛฦ͢ • HTTP Ϩεϙϯεʹ͸εςʔλεΛද͢৘ใͱϨεϙϯεϔομ ʢϝλσʔλʣɺϨεϙϯεϘσΟʢ಺༰ʣؚ͕·ΕΔ )5510, "HF $BDIF$POUSPMNBYBHF

    $POUFOU5ZQFUFYUIUNMDIBSTFU65' %BUF.PO "QS(.5 $POUFOU-FOHUI EPDUZQFIUNM IUNM IFBE  εςʔλεߦ Ϩεϙϯεϔομ ϨεϙϯεϘσΟ
  53. 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Τϯδϯ͕࣮ߦ͞ΕΔϑΣʔζΛܦͯϖʔδ͕ग़Δ
  54. TCP͓͞Β͍ • TCP ͸৴པੑ͕ߴ͍ϓϩτίϧ • ύέϩε࣌ͷ࠶ૹ੍ޚ΍ॱং౸ୡ੍ޚͳͲɺసૹ࣌ͷ໰୊Λղ ܾͯ͘͠ΕΔɻ 4FSWFS ) &

    - "DL & "DL͕དྷ ͳ͍ ࠶ૹ͢Δ "DL ͕དྷ͚ͨͲͦΕ ·Ͱड৴ͨ͠΋ͷ ͸ഁغ͢ΔͶɻ - ͔Β΋ ͏Ұ౓࠶
  55. 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 Ұճμ΢ϯϩʔυͨ͠ϑΝΠϧ͸ωοτϫʔΫ͔ΒಡΈࠐΈͨ ͘ͳ͍ɻ࠶ར༻͍ͨ͠ɻ
  56. Cache Storage • αʔόଆ͕ HTTP ϨεϙϯεϔομʹΩϟογϡͱ͠ ͯอଘͯ͠ྑ͍͔Ͳ͏͔/Ωϟογϡ༗ޮظؒΛࣔͤ͹ Ωϟογϡ͕༗ޮʹͳΔɻ • Cache-Control

    / ETag ͱ͍ͬͨΩϟογϡ༻ͷϔομ Λ׆༻͢Δɻ $BDIF$POUSPMNBYBHFඵؒɺΫϥΠΞϯτͷ$BDIFͱ ͯ͠༗ޮ &UBH JEFOUσʔλͷࣝผՄೳͳ஋ɺ&UBH஋͕มΘͬͯ ͍ͳ͍͔Ͳ͏͔Λαʔόʹ໰͍߹ΘͤͯมΘ͍ͬͯͳ͔ͬͨΒΩϟογϡ͕ ࢖ΘΕΔɻมΘ͍ͬͯͨΒ࠶μ΢ϯϩʔυ
  57. 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
  58. 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Λ࡞Δ·ͰͷྲྀΕ
  59. αʔόΛ࡞Δ • Ұ୴͔͜͜ΒϋϯζΦϯΛ։࢝͠·͢ɻ • Node.js ͕ඞཁͳͷͰೖΕ͓͍͍ͯͯͩ͘͞ɻ • HTML Λ഑৴Ͱ͖ΔΑ͏ʹͳΔ·Ͱ͸࡞͓ͬͯ ͍ͨͷͰɺ

    clone ࣮ͯ͠ߦ͍ͯͩ͘͠͞ɻ • HJUDMPOFIUUQTHJUIVCDPNSFDSVJUUFDICSPXTFSIBOETPOHJU DECSPXTFSIBOETPO OQNJOTUBMM OPEFBQQNKT PQFOIUUQMPDBMIPTU
  60. ωοτϫʔΫͷ΍ΓऔΓ • ͔ͤͬ͘ͳͷͰ https ʹͯ͠Έ·͠ΐ͏ɻ • લॲཧͱͯ͠CAͱূ໌ॻΛ࡞Γɺແཧ໼ཧ trust ͓͖ͤͯ͞·͢ɻ OQNFYFDNLDFSUDSFBUFDB

    OQNFYFDNLDFSUDSFBUFDFSU TVEPTFDVSJUZBEEUSVTUFEDFSUESUSVTU3PPUL-JCSBSZ ,FZDIBJOT4ZTUFNLFZDIBJODBDSU
  61. ωοτϫʔΫͷ΍ΓऔΓ • Node.js ଆ΋ https ʹରԠͤͯ͞Έ·͠ΐ͏ɻ • ઌఔ࡞ͬͨ cert ϑΝΠϧΛಡΊ͹ྑ͍Ͱ͢ɻ

    BQQNKT JNQPSU\SFBE'JMF4ZOD^GSPNGT௥ه JNQPSU\DSFBUF4FSWFS^GSPNIUUQTIUUQ͔ΒIUUQTʹมߋ DPOTUSFRTPO  DSFBUF4FSWFS \ LFZSFBE'JMF4ZOD DFSULFZ ௥ه DFSUSFBE'JMF4ZOD DFSUDSU ௥ه ^ MJTUFO QPSU 
  62. ωοτϫʔΫͷ΍ΓऔΓ • खͬऔΓૣ͘ 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  
  63. ωοτϫʔΫͷ΍ΓऔΓ • ࣍ʹ http2 ʹͯ͠Έ·͠ΐ͏ɻ • http2 ͷ createSecureServer Λ࢖ͬͯ

    http2 αʔόΛཱͯͯΈ·͠ΐ͏ɻ • Chrome ͷ։ൃऀπʔϧͰ http2 ʹͳ͍ͬͯ Ε͹੒ޭͰ͢ɻ
  64. σʔλετϨʔδΛࢼ͢ • ϩάΠϯΛ੒ޭͤͯ͞Έ·͠ΐ͏ɻ • id/password ΛνΣοΫ͠ɺ߹க͍ͯͨ͠Β੒ޭϨεϙϯ ε (302, Location: "/")

    ͱڞʹ Set-Cookie ͰΫοΩʔʹηο γϣϯIDΛೖΕͯΈ·͠ΐ͏ʢηογϣϯID͸ԿͰ΋ Մʣɻ • ϩάΠϯηογϣϯ͕ϦμΠϨΫτ͞Εɺ `Login Success!` ͕දࣔ͞Ε͍ͯͨΒ੒ޭͰ͢ɻ
  65. Ͳ͏΍ͬͯϨϯμϦϯά͞Εͯ Δ͔ • ࠷ޙʹ Login Success ͷը໘͕ऐ͍͠ͷͰ HTML Ͱࣗ༝ʹϚʔ ΫΞοϓ͍ͯͩ͘͠͞ɻ

    • ը૾ΛೖΕͨΓɺಈըͱ͔ೖΕͯΈͨΓ͢Δͷ͕ྑ͍Ͱ͠ΐ ͏ɻ • CSS ͷ z-index Λม͑ͯΈͯલܠͱഎܠΛม͑ͯΈ͍ͯͩ͘͞ɻ • ਌ͷཁૉ͕ࢠͲ΋ͷཁૉʹΑͬͯߴ͕͞มΘͬͨΓ͢Δ͜ͱΛ Chrome ͷ։ൃπʔϧͰ͔֬ΊͯΈ·͠ΐ͏ɻ