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

Transcript

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

2. ࠓ೔ͷ͓࿩

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

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

   
   

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

6. None

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

8. ͸͡Ί·͢

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

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

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

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

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

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

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

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

15. None

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31. Ͳ͏͍ͯ͜͠͏͔ʁ

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

33. BTZODͱEFGFSɺ Ͳͬͪʁ

34. Ͳͬͪʁ

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

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

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

38. ͱ͸͍͑ʜ

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

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

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

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

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

44. ͱ͜ΖͰʜ

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

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

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

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

49. ·ͱΊ

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

    ͦͷ্ͰIFBEIFBE಺ʹ

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

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

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

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