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.5k
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
450
拡張機能でええんちゃう?
maepon
1
530
UDフォントの話
maepon
0
340
箱ひげ図
maepon
0
520
Core Web Vitals についてあれやこれや
maepon
1
390
大規模サイトにおけるSEO観点でのURL設計
maepon
4
3.7k
ミーティングの「進行役」を考える
maepon
1
530
ミーティングの「進行役」考
maepon
1
560
DB使わずWordPressのデータ取得
maepon
0
540
Other Decks in Technology
See All in Technology
The Role of Developer Relations in AI Product Success.
giftojabu1
0
150
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
620
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
180
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
200
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
570
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
1
120
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
2
480
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
780
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
700
TypeScript、上達の瞬間
sadnessojisan
48
14k
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
KATA
mclloyd
29
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
For a Future-Friendly Web
brad_frost
175
9.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Adaptive Systems
keathley
38
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Statistics for Hackers
jakevdp
796
220k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
430
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