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

JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜

 JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜

フロントエンドカンファレンス福岡 2019
https://frontend-conf.fukuoka.jp/

セッション資料です。

Masayuki Maekawa

November 16, 2019
Tweet

More Decks by Masayuki Maekawa

Other Decks in Technology

Transcript

  1. +BWB4DSJQUͷ

    ಡΈࠐΈΛߟ͑Δ
    גࣜձࣾΦϛΧϨɹલ઒ণ޾
    ৔ॴɺ
    BTZODɺ
    EFGFSɺ
    ͦͷ࢓૊Έͱ࢖͍ॴ

    View Slide

  2. ࠓ೔ͷ͓࿩

    View Slide

  3. +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ

    ͳ͍ͬͯ·͕͢ɺ
    ϖʔδͷදࣔͷύϑΥʔϚϯεΛ

    ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ

    ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ

    ͦͷͨΊɺ
    ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ

    ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

    View Slide

  4. ͜ͷηογϣϯͰ͸ɺ
    ύϑΥʔϚϯε޲্ͷͨΊͷ

    ঢ়گʹ͍ͭͯ੔ཧ͠ɺ

    খʙதن໛ͷ΢ΣϒαΠτɺ
    ΢ΣϒΞϓϦέʔγϣϯ

    Λ࡞੒͍ͯ͠Δਓʹɺ

    දࣔ଎౓ͷ࠷దԽͷҰॿͱͯ͠

    +BWB4DSJQUͷಡΈࠐΈʹ͍ͭͯղઆ͠·͢ɻ

    View Slide

  5. ࣗݾ঺հ
    લ઒ণ޾
    ʢ·͔͑Θ·͞Ώ͖ʣ

    גࣜձࣾΦϛΧϨ

    69σϕϩούʔ
    !NBFQPO

    View Slide

  6. View Slide

  7. ࠗ׆ͱ͍͑͹ΦϛΧϨ

    View Slide

  8. ͸͡Ί·͢

    View Slide

  9. +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ

    ͳ͍ͬͯ·͕͢ɺ
    ϖʔδͷදࣔͷύϑΥʔϚϯεΛ

    ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ

    ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ

    ͦͷͨΊɺ
    ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ

    ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

    View Slide

  10. +BWB4DSJQUͱදࣔύϑΥʔϚϯεͷؔ܎

    View Slide

  11. ΫϥΠΞϯτ
    ʢϒϥ΢βʣ

    ͕ड͚औΔ

    ޙ

    View Slide

  12. ΫϥΠΞϯτ
    ʢϒϥ΢βʣ

    ͕ड͚औΔ

    ޙ
    w ϦΫΤετͷλΠϛϯά
    w ωοτϫʔΫͷঢ়ଶ
    w ϑΝΠϧͷαΠζ
    w ϑΝΠϧͷ਺
    w FDUʜ
    w ࣮ߦͷλΠϛϯά
    w ϓϩάϥϜͷෛՙ
    w %0.ͷෛՙ
    w FDUʜ

    View Slide

  13. ΫϥΠΞϯτ
    ʢϒϥ΢βʣ

    ͕ड͚औΔ

    ޙ
    w ϦΫΤετͷλΠϛϯά
    w ωοτϫʔΫͷঢ়ଶ
    w ϑΝΠϧͷαΠζ
    w ϑΝΠϧͷ਺
    w FDUʜ
    w ࣮ߦͷλΠϛϯά
    w ϓϩάϥϜͷෛՙ
    w %0.ͷෛՙ
    w FDUʜ
    ࠓճͷ࿩ͰؔΘͬͯ͘Δͷ͸͜͜

    View Slide

  14. $ISPNFͷ%FW5PPMTͷ

    ʮ1FSGPSNBODFʯ

    Ͱͦͷ͋ͨΓ͕࢕͑·͢ɻ

    View Slide

  15. View Slide

  16. +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ

    ͳ͍ͬͯ·͕͢ɺ
    ϖʔδͷදࣔͷύϑΥʔϚϯεΛ

    ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ

    ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ

    ͦͷͨΊɺ
    ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ

    ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

    View Slide

  17. <br/><script type=“text/javascript src=“bar.js” defer><br/>BTZODͱEFGFS<br/>

    View Slide

  18. ैདྷͷ+4ಡΈࠐΈ
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε

    View Slide

  19. )5.-ύʔε
    BTZOD
    +4ಡΈࠐΈ
    +4࣮ߦ

    View Slide

  20. BTZODͷK2VFSZͷͨΊʹɺ
    1BSTF)5.-͕தஅ͞Ε͍ͯ·͢

    View Slide

  21. EFGFS
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    %0.$POUFE-PBEFE

    View Slide

  22. BTZOD
    w ಡΈࠐΈ͕׬ྃͨ͠εΫϦϓτ͔Β࣮ߦ
    w )5.-಺ͷهड़ͷॱ൪ʹ߆ଋ͞Εͳ͍

    View Slide

  23. <br/><script src=“jquery-plugin.js” async><br/>͜ͷ৔߹ɺ<br/>ΤϥʔʹͳΔՄೳੑ͕ͱͯ΋ߴ͍<br/>

    View Slide

  24. EFGFS
    w )5.-಺ͷهड़ͷॱ൪Ͱ࣮ߦ

    View Slide

  25. <br/><script src=“jquery-plugin.js” defer><br/>͜ͷهड़ͷ৔߹͸ΤϥʔʹͳΒͳ͍<br/>

    View Slide

  26. <br/><script src=“jquery-plugin.js” defer><br/>ΤϥʔͷՄೳੑ͋Γ<br/>

    View Slide

  27. ஫ҙ఺
    ಡΈࠐΉ+BWB4DSJQUʹґଘͨ͠

    +BWB4DSJQU͕CPEZ಺ʹ

    TDSJQUλάͱͯ͠௚઀هड़͞Ε͍ͯΔ৔߹ɺ

    BTZOD΋EFGFS΋࢖͑ͳ͍

    View Slide

  28. <br/><script src=“jquery-plugin.js” defer><br/>͜͏ͳΔ<br/>

    View Slide

  29. BTZODͱEFGFS
    ࣮ߦλΠϛϯάͷҧ͍͸͋Δ͕ɺ

    ϑΝΠϧͷಡΈࠐΈΛඇಉظͰߦ͑ΔͷͰ

    ͦͷؒɺ
    )5.-ͷύʔεΛ્֐͠ͳ͍

    View Slide

  30. +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ

    ͳ͍ͬͯ·͕͢ɺ
    ϖʔδͷදࣔͷύϑΥʔϚϯεΛ

    ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ

    ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ

    ͦͷͨΊɺ
    ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ

    ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

    View Slide

  31. Ͳ͏͍ͯ͜͠͏͔ʁ

    View Slide

  32. ಡΈࠐΈͷඇಉظԽ
    w ࠷௿ݶɺ
    ϑΝΠϧऔಘ࣌ͷϒϩοΫΛͳ͘͢
    w CPEZ಺ͷϥΠϒϥϦͳͲʹґଘͨ͠

    +BWB4DSJQU͸๾໓͢Δ

    View Slide

  33. BTZODͱEFGFSɺ
    Ͳͬͪʁ

    View Slide

  34. Ͳͬͪʁ

    View Slide

  35. έʔε
    ɾ
    όΠ
    ɾ
    έʔε
    ʂ

    View Slide

  36. )5.-ύʔε
    BTZOD
    +4ಡΈࠐΈ
    +4࣮ߦ

    View Slide

  37. )5.-ύʔε
    BTZOD
    +4ಡΈࠐΈ
    +4࣮ߦ
    ͕͜͜ؾʹͳΔ

    View Slide

  38. ͱ͸͍͑ʜ

    View Slide

  39. EFGFS
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    %0.$POUFE-PBEFE

    View Slide

  40. EFGFS
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε
    %0.$POUFE-PBEFE
    ͕͜͜ौ଺͢Δͷ΋໰୊

    View Slide

  41. BTZOD͕޲͍͍ͯΔ΋ͷ
    w ϢʔβʔτϥοΩϯάܥ
    w %0.ΑΓ΋Լ૚ͷϨΠϠʔΛѲΔ΋ͷ

    View Slide

  42. EFGFS͕޲͍͍ͯΔ΋ͷ
    w 6*ૢ࡞ܥ
    w %-$ %0.$POUFOU-PBEFE
    ͰൃՐ͢Δ΋ͷ

    View Slide

  43. BTZODͱEFGFS
    ͲͷΑ͏ͳ໨తͷεΫϦϓτ͔Λߟ͑ͯબ୒

    View Slide

  44. ͱ͜ΖͰʜ

    View Slide

  45. TDSJQUͲ͜Ͱॻ͍ͯ·͢ʁ

    View Slide

  46. +4ͷಡΈࠐΈ
    ʮCPEZͷલʹ+4ΛಡΈࠐΉʯ
    ͷੋඇ

    View Slide

  47. BTZODEFGFSΛCPEZલʹஔ͘ͱʜ
    +4ಡΈࠐΈ
    +4࣮ߦ
    )5.-ύʔε

    View Slide

  48. +4ͷಡΈࠐΈ
    ඇಉظಡΈࠐΈͷಛੑ͕ߦ͔ͤͳ͍ͷͰɺ

    IFBEIFBE಺͕ྑ͍ͷͰ͸ʁ

    View Slide

  49. ·ͱΊ

    View Slide

  50. ݪଇͱͯ͠
    w TDSJQUʹ͸

    ʮEFGFSʯ
    ΋͘͠͸
    ʮBTZODʯ
    Λ͚ͭΔ
    w ͲͪΒ͔͸໨తΛ͔Β൑அ͢Δ
    w ͦͷ্ͰIFBEIFBE಺ʹ

    View Slide

  51. ࠷ޙʹ
    ͜ͷ͓࿩͸දࣔ଎౓࠷దԽͷͨΊͷখ͞ͳϐʔε

    View Slide

  52. ࠷ޙʹ
    ࠓ೔Ұ೔ௌ͍ͨ͞·͟·ͳ΋ͷΛ࣋ͪؼͬͯ

    View Slide

  53. ࠷ޙʹ
    շదͳ΢ΣϒΛϢʔβʔʹಧ͚·͠ΐ͏
    ʂ

    View Slide

  54. ࠗ׆ͱ͍͑͹ΦϛΧϨ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ʂ
    !NBFQPO

    View Slide