Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜
Search
Masayuki Maekawa
November 16, 2019
Technology
3
2.7k
JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜
フロントエンドカンファレンス福岡 2019
https://frontend-conf.fukuoka.jp/
セッション資料です。
Masayuki Maekawa
November 16, 2019
Tweet
Share
More Decks by Masayuki Maekawa
See All by Masayuki Maekawa
解決策をひとつ増やそう!ブラウザ拡張機能作成のススメ
maepon
1
580
拡張機能でええんちゃう?
maepon
1
620
UDフォントの話
maepon
0
410
箱ひげ図
maepon
0
620
Core Web Vitals についてあれやこれや
maepon
1
430
大規模サイトにおけるSEO観点でのURL設計
maepon
4
4.2k
ミーティングの「進行役」を考える
maepon
1
600
ミーティングの「進行役」考
maepon
1
610
DB使わずWordPressのデータ取得
maepon
0
620
Other Decks in Technology
See All in Technology
許しとアジャイル
jnuank
1
120
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
2k
KMP の Swift export
kokihirokawa
0
330
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
210
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
Green Tea Garbage Collector の今
zchee
PRO
2
390
BtoBプロダクト開発の深層
16bitidol
0
280
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
4 Signs Your Business is Dying
shpigford
185
22k
Six Lessons from altMBA
skipperchong
28
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
148
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
+BWB4DSJQUͷ ಡΈࠐΈΛߟ͑Δ גࣜձࣾΦϛΧϨɹલণ ॴɺ BTZODɺ EFGFSɺ ͦͷΈͱ͍ॴ
ࠓͷ͓
+BWB4DSJQUΣϒϖʔδʹ͔ܽͤͳ͍ଘࡏʹ ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ ߟ͑ΔࡍʹԿ͔ͱΛΒΜͰ͍Δ ଘࡏʹͳ͍ͬͯ·͢ɻ ͦͷͨΊɺ ύϑΥʔϚϯε্ͷͨΊʹ༷͕ࡦఆ͞Εɺ ϒϥβଆରԠΛਐΊ͍ͯ·͢ɻ
͜ͷηογϣϯͰɺ ύϑΥʔϚϯε্ͷͨΊͷ ঢ়گʹ͍ͭͯཧ͠ɺ খʙதنͷΣϒαΠτɺ ΣϒΞϓϦέʔγϣϯ Λ࡞͍ͯ͠Δਓʹɺ දࣔͷ࠷దԽͷҰॿͱͯ͠ +BWB4DSJQUͷಡΈࠐΈʹ͍ͭͯղઆ͠·͢ɻ
ࣗݾհ લণ ʢ·͔͑Θ·͞Ώ͖ʣ גࣜձࣾΦϛΧϨ 69σϕϩούʔ !NBFQPO
None
ࠗ׆ͱ͍͑ΦϛΧϨ
͡Ί·͢
+BWB4DSJQUΣϒϖʔδʹ͔ܽͤͳ͍ଘࡏʹ ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ ߟ͑ΔࡍʹԿ͔ͱΛΒΜͰ͍Δ ଘࡏʹͳ͍ͬͯ·͢ɻ ͦͷͨΊɺ ύϑΥʔϚϯε্ͷͨΊʹ༷͕ࡦఆ͞Εɺ ϒϥβଆରԠΛਐΊ͍ͯ·͢ɻ
+BWB4DSJQUͱදࣔύϑΥʔϚϯεͷؔ
ΫϥΠΞϯτ ʢϒϥβʣ ͕ड͚औΔ લ ޙ
ΫϥΠΞϯτ ʢϒϥβʣ ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά w ωοτϫʔΫͷঢ়ଶ
w ϑΝΠϧͷαΠζ w ϑΝΠϧͷ w FDUʜ w ࣮ߦͷλΠϛϯά w ϓϩάϥϜͷෛՙ w %0.ͷෛՙ w FDUʜ
ΫϥΠΞϯτ ʢϒϥβʣ ͕ड͚औΔ લ ޙ w ϦΫΤετͷλΠϛϯά w ωοτϫʔΫͷঢ়ଶ
w ϑΝΠϧͷαΠζ w ϑΝΠϧͷ w FDUʜ w ࣮ߦͷλΠϛϯά w ϓϩάϥϜͷෛՙ w %0.ͷෛՙ w FDUʜ ࠓճͷͰؔΘͬͯ͘Δͷ͜͜
$ISPNFͷ%FW5PPMTͷ ʮ1FSGPSNBODFʯ Ͱͦͷ͋ͨΓ͕͑·͢ɻ
None
+BWB4DSJQUΣϒϖʔδʹ͔ܽͤͳ͍ଘࡏʹ ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ ߟ͑ΔࡍʹԿ͔ͱΛΒΜͰ͍Δ ଘࡏʹͳ͍ͬͯ·͢ɻ ͦͷͨΊɺ ύϑΥʔϚϯε্ͷͨΊʹ༷͕ࡦఆ͞Εɺ ϒϥβଆରԠΛਐΊ͍ͯ·͢ɻ
<script type=“text/javascript src=“foo.js” async> <script type=“text/javascript src=“bar.js” defer> BTZODͱEFGFS
ैདྷͷ+4ಡΈࠐΈ +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε
)5.-ύʔε BTZOD +4ಡΈࠐΈ +4࣮ߦ
BTZODͷK2VFSZͷͨΊʹɺ 1BSTF)5.-͕தஅ͞Ε͍ͯ·͢
EFGFS +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε %0.$POUFE-PBEFE
BTZOD w ಡΈࠐΈ͕ྃͨ͠εΫϦϓτ͔Β࣮ߦ w )5.-ͷهड़ͷॱ൪ʹ߆ଋ͞Εͳ͍
<script src=“jQuery.js” async> <script src=“jquery-plugin.js” async> ͜ͷ߹ɺ ΤϥʔʹͳΔՄೳੑ͕ͱͯߴ͍
EFGFS w )5.-ͷهड़ͷॱ൪Ͱ࣮ߦ
<script src=“jQuery.js” defer> <script src=“jquery-plugin.js” defer> ͜ͷهड़ͷ߹ΤϥʔʹͳΒͳ͍
<script src=“jQuery.js” async> <script src=“jquery-plugin.js” defer> ΤϥʔͷՄೳੑ͋Γ
ҙ ಡΈࠐΉ+BWB4DSJQUʹґଘͨ͠ +BWB4DSJQU͕CPEZʹ TDSJQUλάͱͯ͠هड़͞Ε͍ͯΔ߹ɺ BTZODEFGFS͑ͳ͍
<script src=“jQuery.js”> <script src=“jquery-plugin.js” defer> ͜͏ͳΔ
BTZODͱEFGFS ࣮ߦλΠϛϯάͷҧ͍͋Δ͕ɺ ϑΝΠϧͷಡΈࠐΈΛඇಉظͰߦ͑ΔͷͰ ͦͷؒɺ )5.-ͷύʔεΛ્͠ͳ͍
+BWB4DSJQUΣϒϖʔδʹ͔ܽͤͳ͍ଘࡏʹ ͳ͍ͬͯ·͕͢ɺ ϖʔδͷදࣔͷύϑΥʔϚϯεΛ ߟ͑ΔࡍʹԿ͔ͱΛΒΜͰ͍Δ ଘࡏʹͳ͍ͬͯ·͢ɻ ͦͷͨΊɺ ύϑΥʔϚϯε্ͷͨΊʹ༷͕ࡦఆ͞Εɺ ϒϥβଆରԠΛਐΊ͍ͯ·͢ɻ
Ͳ͏͍ͯ͜͠͏͔ʁ
ಡΈࠐΈͷඇಉظԽ w ࠷ݶɺ ϑΝΠϧऔಘ࣌ͷϒϩοΫΛͳ͘͢ w CPEZͷϥΠϒϥϦͳͲʹґଘͨ͠ +BWB4DSJQU໓͢Δ
BTZODͱEFGFSɺ Ͳͬͪʁ
Ͳͬͪʁ
έʔε ɾ όΠ ɾ έʔε ʂ
)5.-ύʔε BTZOD +4ಡΈࠐΈ +4࣮ߦ
)5.-ύʔε BTZOD +4ಡΈࠐΈ +4࣮ߦ ͕͜͜ؾʹͳΔ
ͱ͍͑ʜ
EFGFS +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε %0.$POUFE-PBEFE
EFGFS +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε %0.$POUFE-PBEFE ͕͜͜ौ͢Δͷ
BTZOD͕͍͍ͯΔͷ w ϢʔβʔτϥοΩϯάܥ w %0.ΑΓԼͷϨΠϠʔΛѲΔͷ
EFGFS͕͍͍ͯΔͷ w 6*ૢ࡞ܥ w %-$ %0.$POUFOU-PBEFE ͰൃՐ͢Δͷ
BTZODͱEFGFS ͲͷΑ͏ͳతͷεΫϦϓτ͔Λߟ͑ͯબ
ͱ͜ΖͰʜ
TDSJQUͲ͜Ͱॻ͍ͯ·͢ʁ
+4ͷಡΈࠐΈ ʮCPEZͷલʹ+4ΛಡΈࠐΉʯ ͷੋඇ
BTZODEFGFSΛCPEZલʹஔ͘ͱʜ +4ಡΈࠐΈ +4࣮ߦ )5.-ύʔε
+4ͷಡΈࠐΈ ඇಉظಡΈࠐΈͷಛੑ͕ߦ͔ͤͳ͍ͷͰɺ IFBEIFBE͕ྑ͍ͷͰʁ
·ͱΊ
ݪଇͱͯ͠ w TDSJQUʹ ʮEFGFSʯ ͘͠ ʮBTZODʯ Λ͚ͭΔ w ͲͪΒ͔తΛ͔Βஅ͢Δ w
ͦͷ্ͰIFBEIFBEʹ
࠷ޙʹ ͜ͷ͓දࣔ࠷దԽͷͨΊͷখ͞ͳϐʔε
࠷ޙʹ ࠓҰௌ͍ͨ͞·͟·ͳͷΛ࣋ͪؼͬͯ
࠷ޙʹ շదͳΣϒΛϢʔβʔʹಧ͚·͠ΐ͏ ʂ
ࠗ׆ͱ͍͑ΦϛΧϨ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ʂ !NBFQPO