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
570
拡張機能でええんちゃう?
maepon
1
610
UDフォントの話
maepon
0
410
箱ひげ図
maepon
0
610
Core Web Vitals についてあれやこれや
maepon
1
420
大規模サイトにおけるSEO観点でのURL設計
maepon
4
4.1k
ミーティングの「進行役」を考える
maepon
1
590
ミーティングの「進行役」考
maepon
1
600
DB使わずWordPressのデータ取得
maepon
0
600
Other Decks in Technology
See All in Technology
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
0
300
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
430
みんなのSRE 〜チーム全員でのSRE活動にするための4つの取り組み〜
kakehashi
PRO
2
140
LLM 機能を支える Langfuse / ClickHouse のサーバレス化
yuu26
3
270
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
340
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
890
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
300
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
Rubyの国のPerlMonger
anatofuz
3
730
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Become a Pro
speakerdeck
PRO
29
5.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing for humans not robots
tammielis
253
25k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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