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

Transcript

1. 1.

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

2. 2.

   ࠓ೔ͷ͓࿩

3. 3.

   +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ
 ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ
 ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ
 ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ
   ͦͷͨΊɺ ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ 
 ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

4. 4.

   ͜ͷηογϣϯͰ͸ɺ ύϑΥʔϚϯε޲্ͷͨΊͷ
 ঢ়گʹ͍ͭͯ੔ཧ͠ɺ 
 খʙதن໛ͷ΢ΣϒαΠτɺ ΢ΣϒΞϓϦέʔγϣϯ
 Λ࡞੒͍ͯ͠Δਓʹɺ 
 දࣔ଎౓ͷ࠷దԽͷҰॿͱͯ͠
 +BWB4DSJQUͷಡΈࠐΈʹ͍ͭͯղઆ͠·͢ɻ

   
   
5. 5.

   ࣗݾ঺հ લ઒ণ޾ ʢ·͔͑Θ·͞Ώ͖ʣ 
 גࣜձࣾΦϛΧϨ
 69σϕϩούʔ
   !NBFQPO

6. 6.

   None
7. 7.

   ࠗ׆ͱ͍͑͹ΦϛΧϨ

8. 8.

   ͸͡Ί·͢

9. 9.

   +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ
 ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ
 ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ
 ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ
   ͦͷͨΊɺ ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ 
 ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

10. 10.

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

11. 11.

    ΫϥΠΞϯτ ʢϒϥ΢βʣ 
 ͕ड͚औΔ લ ޙ

12. 12.

    ΫϥΠΞϯτ ʢϒϥ΢βʣ 
 ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά
    w ωοτϫʔΫͷঢ়ଶ
    

    w ϑΝΠϧͷαΠζ
    w ϑΝΠϧͷ਺
    w FDUʜ w ࣮ߦͷλΠϛϯά
    w ϓϩάϥϜͷෛՙ
    w %0.ͷෛՙ
    w FDUʜ
13. 13.

    ΫϥΠΞϯτ ʢϒϥ΢βʣ 
 ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά
    w ωοτϫʔΫͷঢ়ଶ
    

    w ϑΝΠϧͷαΠζ
    w ϑΝΠϧͷ਺
    w FDUʜ w ࣮ߦͷλΠϛϯά
    w ϓϩάϥϜͷෛՙ
    w %0.ͷෛՙ
    w FDUʜ ࠓճͷ࿩ͰؔΘͬͯ͘Δͷ͸͜͜
14. 14.

    $ISPNFͷ%FW5PPMTͷ
 ʮ1FSGPSNBODFʯ 
 Ͱͦͷ͋ͨΓ͕࢕͑·͢ɻ

15. 15.

    None
16. 16.

    +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ
 ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ
 ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ
 ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ
    ͦͷͨΊɺ ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ 
 ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

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

22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

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

26. 26.

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

27. 27.

    ஫ҙ఺ ಡΈࠐΉ+BWB4DSJQUʹґଘͨ͠
 +BWB4DSJQU͕CPEZ಺ʹ
 TDSJQUλάͱͯ͠௚઀هड़͞Ε͍ͯΔ৔߹ɺ 
 BTZOD΋EFGFS΋࢖͑ͳ͍

28. 28.

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

29. 29.

    BTZODͱEFGFS ࣮ߦλΠϛϯάͷҧ͍͸͋Δ͕ɺ 
 ϑΝΠϧͷಡΈࠐΈΛඇಉظͰߦ͑ΔͷͰ
 ͦͷؒɺ )5.-ͷύʔεΛ્֐͠ͳ͍

30. 30.

    +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ
 ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ
 ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ
 ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ
    ͦͷͨΊɺ ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ 
 ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ

31. 31.

    Ͳ͏͍ͯ͜͠͏͔ʁ

32. 32.

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

33. 33.

    BTZODͱEFGFSɺ Ͳͬͪʁ

34. 34.

    Ͳͬͪʁ

35. 35.

    έʔε ɾ όΠ ɾ έʔε ʂ

36. 36.

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

37. 37.

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

38. 38.

    ͱ͸͍͑ʜ

39. 39.

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

40. 40.

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

41. 41.

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

42. 42.

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

43. 43.

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

44. 44.

    ͱ͜ΖͰʜ

45. 45.

    TDSJQUͲ͜Ͱॻ͍ͯ·͢ʁ

46. 46.

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

47. 47.

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

48. 48.

    +4ͷಡΈࠐΈ ඇಉظಡΈࠐΈͷಛੑ͕ߦ͔ͤͳ͍ͷͰɺ 
 IFBEIFBE಺͕ྑ͍ͷͰ͸ʁ

49. 49.

    ·ͱΊ

50. 50.

    ݪଇͱͯ͠ w TDSJQUʹ͸
 ʮEFGFSʯ ΋͘͠͸ ʮBTZODʯ Λ͚ͭΔ
    w ͲͪΒ͔͸໨తΛ͔Β൑அ͢Δ
    w

    ͦͷ্ͰIFBEIFBE಺ʹ
51. 51.

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

52. 52.

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

53. 53.

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

54. 54.

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