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
630
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
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
240
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
130
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
420
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
1
260
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
230
Introdução a Service Mesh usando o Istio
aeciopires
1
270
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
430
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
0
130
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
190
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
260
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Writing Fast Ruby
sferik
629
62k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Adaptive Systems
keathley
44
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Unsuck your backbone
ammeep
671
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Become a Pro
speakerdeck
PRO
29
5.6k
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