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

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

セッション資料です。

Transcript

1. +BWB4DSJQUͷ
 ಡΈࠐΈΛߟ͑Δ גࣜձࣾΦϛΧϨɹલ઒ণ޾ ৔ॴɺ BTZODɺ EFGFSɺ ͦͷ࢓૊Έͱ࢖͍ॴ
2. ࠓ೔ͷ͓࿩
3. +BWB4DSJQU͸΢Σϒϖʔδʹ͸͔ܽͤͳ͍ଘࡏʹ
 ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ
 ߟ͑ΔࡍʹԿ͔ͱ໰୊Λ͸ΒΜͰ͍Δ
 ଘࡏʹ΋ͳ͍ͬͯ·͢ɻ
   ͦͷͨΊɺ ύϑΥʔϚϯε޲্ͷͨΊʹ࢓༷͕ࡦఆ͞Εɺ 
 ϒϥ΢βଆ΋ରԠΛਐΊ͍ͯ·͢ɻ
4. ͜ͷηογϣϯͰ͸ɺ ύϑΥʔϚϯε޲্ͷͨΊͷ
 ঢ়گʹ͍ͭͯ੔ཧ͠ɺ 
 খʙதن໛ͷ΢ΣϒαΠτɺ ΢ΣϒΞϓϦέʔγϣϯ
 Λ࡞੒͍ͯ͠Δਓʹɺ 
 දࣔ଎౓ͷ࠷దԽͷҰॿͱͯ͠
 +BWB4DSJQUͷಡΈࠐΈʹ͍ͭͯղઆ͠·͢ɻ
   
5. ࣗݾ঺հ લ઒ণ޾ ʢ·͔͑Θ·͞Ώ͖ʣ 
 גࣜձࣾΦϛΧϨ
 69σϕϩούʔ
   !NBFQPO
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ʯ 
 Ͱͦͷ͋ͨΓ͕࢕͑·͢ɻ
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