Pro Yearly is on sale from $80 to $50! »

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

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

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

セッション資料です。

F391c64c645e6c6345cc37fd806d88f2?s=128

Masayuki Maekawa

November 16, 2019
Tweet

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