TIL13 - async vs defer
11952 ワード
1.headタグ内
<!DOCTYPE html>
<html>
<head>
<title>동작 원리</title>
<script src="main.js"></script>
</head>
<body>
<h1>자바스크립트는 어떻게 동작할까요?</h1>
<p>궁금하죠?</p>
</body>
</html>scriptタグに遭遇すると、操作が中断されます.
Webブラウザはjavascriptエンジンでjsファイルをダウンロードして実行し、HTMLパケットに戻り、ページロードの準備を完了します.
<head>タグに<script>タグを入れると、パケット期間中に作業が停止し、jsファイルがロードされて実行されるため、ページ全体を展開するのに長い時間がかかります.Webページの動作原理
2.bodyタグ内
<!DOCTYPE html>
<html>
<head>
<title>동작 원리</title>
</head>
<body>
<h1>자바스크립트는 어떻게 동작할까요?</h1>
<p>궁금하죠?</p>
<script src="main.js"></script>
</body>
</html>
コードがすべて読み込まれ、JavaScriptファイルが最後に呼び出されて実行されるため、headラベルよりもWebページのロード速度が速くなります.
しかし、JavaScriptに依存するページであれば、fetchと実行を待たなければ機能が見えないという欠点がある.
3. head + async
<!DOCTYPE html>
<html>
<head>
<title>동작 원리</title>
<script async src="main.js"></script>
</head>
<body>
<h1>자바스크립트는 어떻게 동작할까요?</h1>
<p>궁금하죠?</p>
</body>
</html>
コードを読むときにscriptタグのasyncに遭遇すると「並列処理だったんですね」ブラウザが認識します.
ブラウザは、HTMLファイルの下請け中にjsファイルをダウンロードして完了した後、下請けを停止してjsを実行し、下請けを完了します.
この方法でJavaScriptをダウンロードする時間を節約できます.
ただし、まだ定義されていないHTML要素がある場合、JavaScriptは実行できない場合があります.
また、サイズの異なるjsファイルが複数ある場合、ダウンロード速度が異なるため、完了時間も異なる.asyncは、javascriptを実行するためにパーティションをいつでも停止できるため、ページのロード時間が長い.
4. head + defer
<!DOCTYPE html>
<html>
<head>
<title>동작 원리</title>
<script defer src="main.js"></script>
</head>
<body>
<h1>자바스크립트는 어떻게 동작할까요?</h1>
<p>궁금하죠?</p>
</body>
</html>
deferは必要なすべてのスクリプトファイルをダウンロードし、すべてのページをロードしてJavaScriptファイルを実行します.
JavaScriptファイルが複数ある場合でも、asyncではダウンロードして順番に実行されるため、問題は発生しません.
注意:https://www.youtube.com/watch?v=tJieVCgGzhs
Reference
この問題について(TIL13 - async vs defer), 我々は、より多くの情報をここで見つけました https://velog.io/@silviaoh/TIL13-async-vs-deferテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol