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

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

セッション資料です。

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