TIL 7. JS(async&defer)

1348 ワード
async Defer JavaScript テキストリンク

📌 <script>tagはheadにあります


☝🏻 通常、JavaScriptをHTMLに関連付ける場合、HTMLやCSSのようにHTMLのファイルにscript tagが使用されます.(CSSはlink tag)
ただし、WebページでHTMLを開くと、JavaScriptはscript tagの位置に応じて全体の実行順序を変更します.
一般に、にはtagが含まれる.
解析HTMLはをダウンロードし、JavaScriptを先に実行します.そして、残りのHTMLをダウンロードします.
parsing HTML -> parsing HTML stop -> fetching JS  
		-> executing JS -> parsing HTML
この方式の欠点は、ウェブページのダウンロード速度が比較的遅いことである.

📌 <script> tag가 body끝에 있는 경우


☝🏻 HTMLをすばやくダウンロードし、最後にスクリプトをダウンロードして適用します.
parsing HTML -> fetching JS -> executing JS
この方法の欠点は,ウェブページが1つの作業を完了し,それに従って自然に次の作業を行い,時間消費が比較的大きいことである.

📌 <script> tag안에 async attribute를 사용하는 경우


☝🏻 この方法では、HTMLを解析しながらscriptを取得してページをダウンロードできますが、jsがキャプチャしてHTML解析を実行するときに停止するため、時間がかかります.
また、jsがHTMLより先に完了した場合、まだjsのHTMLが適用されていない可能性があるため、エラーが発生します.
parsing HTML, fetching js ->
parsing HTML stop, executing js -> parsing HTML

📌 <script> tag안에 defer attribute를 사용하는 경우


☝🏻 このメソッドは、HTMLとfetching jsを同時に解析し、fetching jsが完了した後でも常にHTMLを解析します.
HTML解析後すぐにjsが実行されるため、時間も効率も高い.
parsing HTML, fetching js -> executing js
Linux の定番シンタックスハイライトツール Source-highlight を覚える
Userefによる変数の保存