javascript - behind the scene

javascript - behind the scene

javascriptのロードからパースまでの仕組みと最適化について

Transcript

  1. 25.

    Browser resource fetching sequece Browser Cache 1. Check cache existence

    2. Check cache expiration(if max-age specified) 3. Use cache or request updated resource If cache not stored, fetch resources Response with ETag: “…”, Cache-Control: “…” Gunzip if gziped Store cache if Cache-Control value isn’t “no-store”
  2. 26.

    Browser resource fetching sequece Browser Cache 1. Check cache existence

    2. Check cache expiration(if max-age specified) 3. Use cache or request updated resource If cache not stored, fetch resources Response with ETag: “…”, Cache-Control: “…” Gunzip if gziped Store cache if Cache-Control value isn’t “no-store”
  3. 30.

    Browser resource fetching sequece #SPXTFS$BDIF  $IFDLDBDIFFYJTUFODF  $IFDLDBDIFFYQJSBUJPO JGNBYBHFTQFDJpFE

      6TFDBDIFPSSFRVFTUVQEBUFESFTPVSDF *GDBDIFOPUTUPSFE GFUDISFTPVSDFT 3FTQPOTFXJUI&5BHlʜz $BDIF$POUSPMlʜz (VO[JQJGH[JQFE 4UPSFDBDIFJG$BDIF$POUSPMWBMVFJTO`UlOPTUPSFz
  4. 32.

    Cache-Control: max-age=120 3FTQPOTF Cache-Control: s-maxage=120 Cache-Control: no-cache Cache-Control: no-store Cache-Control:

    immutable ϦΫΤετͷૹ৴ऀ͸௨ৗNBYBHFΛݟΔ͕ɺ $%/౳ͷ1SPYZαʔόͱΫϥΠΞϯτͰΩϟογϡ࣌ؒΛม͍͑ͨ৔߹ʹ͸ TNBYBHFͰ1SPYZଆͷNBYBHFͰΫϥΠΞϯτଆͷΩϟογϡ࣌ؒΛࢦఆ͢Δ͜ͱ͕Ͱ͖Δ OPDBDIFͷ৔߹͸DBDIFΛߦ͏͕ɺຖճαʔό΁ߋ৽ΛͨͣͶΔ OPTUPSFͷ৔߹͸DBDIFΛ׬શʹߦΘͳ͍ ·ͨJNNVUBCMFΛࢦఆ͢Δ͜ͱͰϖʔδϦϩʔυ࣌ͷ$POEJUJPOBM(&5 αʔό΁ͷߋ৽֬ೝ΋ఀࢭͰ͖Δ
  5. 43.
  6. 48.
  7. 55.

    function x(a, b) { return a + b; } Function(X)

    parameter-count: 2 start-position: 1 end-position: 1 use-super-property: false
  8. 56.

    // When x is called x() Return Function Name (x)

    BinaryExpression VarProxy a VarProxy b
  9. 59.

    HTML Parsing and script execution flow Script HTML Script(defer) HTML

    Script(async) HTML Script(module) HTML Script(module, async) HTML HTML Parsing Script fetching Script execution
  10. 67.