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

by Masayuki Maekawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠓ೔ͷ͓࿩

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ࠗ׆ͱ͍͑͹ΦϛΧϨ

Slide 8

Slide 8 text

͸͡Ί·͢

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ΫϥΠΞϯτ ʢϒϥ΢βʣ   ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά w ωοτϫʔΫͷঢ়ଶ w ϑΝΠϧͷαΠζ w ϑΝΠϧͷ਺ w FDUʜ w ࣮ߦͷλΠϛϯά w ϓϩάϥϜͷෛՙ w %0.ͷෛՙ w FDUʜ

Slide 13

Slide 13 text

ΫϥΠΞϯτ ʢϒϥ΢βʣ   ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά w ωοτϫʔΫͷঢ়ଶ w ϑΝΠϧͷαΠζ w ϑΝΠϧͷ਺ w FDUʜ w ࣮ߦͷλΠϛϯά w ϓϩάϥϜͷෛՙ w %0.ͷෛՙ w FDUʜ ࠓճͷ࿩ͰؔΘͬͯ͘Δͷ͸͜͜

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Ͳ͏͍ͯ͜͠͏͔ʁ

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

BTZODͱEFGFSɺ Ͳͬͪʁ

Slide 34

Slide 34 text

Ͳͬͪʁ

Slide 35

Slide 35 text

έʔε ɾ όΠ ɾ έʔε ʂ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ͱ͸͍͑ʜ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

ͱ͜ΖͰʜ

Slide 45

Slide 45 text

TDSJQUͲ͜Ͱॻ͍ͯ·͢ʁ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

·ͱΊ

Slide 50

Slide 50 text

ݪଇͱͯ͠ w TDSJQUʹ͸  ʮEFGFSʯ ΋͘͠͸ ʮBTZODʯ Λ͚ͭΔ w ͲͪΒ͔͸໨తΛ͔Β൑அ͢Δ w ͦͷ্ͰIFBEIFBE಺ʹ