TIL]JavaScript-defer,asyncスクリプト

🌼Scriptタグの特徴

ブラウザがHTMLファイルを読み込むときに、Inline/External Scriptタグを作成すると、DOMの生成が停止し、スクリプト実行またはダウンロード操作が最初に実行されます.この動作は2つの重要な話題を生み出す.

Scriptラベルの下にあるDOM要素にアクセスできないため、DOMを操作できません.

ページの上部に容量の大きいスクリプトがある場合、このスクリプトはページの生成を阻止します.

TIP. HTMLドキュメントのscriptタグに記述されているコードはJavaScript言語とみなされるため、HTMLファイルにJavaScriptコードを記述することは推奨されず、すべてのファイルを別々に使用することも推奨されません.

//internal script 방식
<script> 
  function sayHi() { 
    console.log('여기는 index.html파일입니다.'); 
  } 

  sayHi();
</script>

🌼defer、asyncスクリプトの設定

head 안에 script로 연결:HTMLの解析中に作業を停止し、JavaScriptファイルを取得/実行するため、jsファイルの容量が大きい場合は、Webサイトを表示するのに長い時間がかかる場合があります.

body 안에 script로 연결:Webページがjsに依存している場合(サーバデータを受信したり、jsによってDOM要素を装飾したりするなど)、jsの完了/実行を待つ時間が必要です.

head + async로 설정:HTML을 parsing 하는 동안 async 속성이 있는 스크립트를 '백그라운드'에서 다운로드 한다. 하지만 HTML이 parsing 되기 전에 js가 실행되므로 js를 이용해 DOM 요소를 조작하거나 할 때 HTML 요소 정의가 안 됐을 수 있어 js 코드가 정상적으로 동작하지 않는 단점이 있다.(async:boolean、trueとしてのみ宣言)asyncプロパティを持つscriptは、他のscriptのダウンロードを待たない.したがって、複数のタグがある場合、ファイルはダウンロードが完了したスクリプトの順序で実行され、実行順序は保証されません.

head + defer로 설정:HTML을 parsing 하는 동안 defer 속성이 있는 스크립트를 '백그라운드'에서 다운로드 한다. 즉, fetching이 병렬로 이뤄지고 실행은 HTML 페이지 구성이 끝날때까지 지연되는 방식이다. 가장 안정적인 방법으로 이 방법을 추천한다.遅延スクリプトは、ページの生成をブロックしませんが、DOMContent Loadedイベントが発生する前に実行されます.

TIP. deferおよびasyncプロパティは、外部スクリプトにのみ有効です.
出典:YOUTUBE-DREAMコード、JAVASCRIPT.INFO