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
440
拡張機能でええんちゃう?
maepon
1
520
UDフォントの話
maepon
0
340
箱ひげ図
maepon
0
520
Core Web Vitals についてあれやこれや
maepon
1
390
大規模サイトにおけるSEO観点でのURL設計
maepon
4
3.6k
ミーティングの「進行役」を考える
maepon
1
530
ミーティングの「進行役」考
maepon
1
560
DB使わずWordPressのデータ取得
maepon
0
540
Other Decks in Technology
See All in Technology
APIテスト自動化の勘所
yokawasa
7
4.1k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.4k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
とあるユーザー企業におけるリスクベースで考えるセキュリティ業務のお話し
4su_para
3
320
Featured
See All Featured
Become a Pro
speakerdeck
PRO
24
5k
GitHub's CSS Performance
jonrohan
1030
460k
Teambox: Starting and Learning
jrom
132
8.7k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Producing Creativity
orderedlist
PRO
341
39k
Facilitating Awesome Meetings
lara
49
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Designing Experiences People Love
moore
138
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Making Projects Easy
brettharned
115
5.9k
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