스크립트 태그의 속성 요약

<script> 의 태그의 속성에 대해 무엇이 어떤 효과인지 매번 조사하고 있는 생각이 들었으므로, 정리해 둡니다.

async

JS가 렌더링을 블로킹하지 않도록 하는 속성 그 1입니다.
HTML 퍼스와 병렬로 JS를 로드합니다.

로딩, 그렇다고 정확하지 않은 부분이 있으므로 상세하게 설명하면,

JS 데이터의 fetch 통신

JS 데이터 실행

의 2 단계가 있어, 병렬로 처리되는 것은 JSデータのfetch通信 의 부분입니다.
실제 실행시에는 렌더링을 블로킹하므로 주의가 필요합니다.

defer

JS가 렌더링을 블로킹하지 않도록 하는 속성 그 2입니다.
차이는 읽기 타이밍이며, defer는 DOMContentLoaded 이벤트가 실행되기 전에 JS 데이터가 실행됩니다.
async와 defer의 차이에 대해서는.
매우 알기 쉬운 그림이 있었으므로 위 기사에서 빌렸습니다.

"script 태그에 async / defer를 붙일 때의 타이밍"

실행을 퍼스에 인터럽트시킬지 어떨지가 다르므로, JS의 목적에 의해 지정하는 속성은 다르게 됩니다.

<script async>....</script>
<script defer>....</script>

nomodule

ES2015가 지원되지 않는 브라우저(IE 또는 레거시 브라우저 등)만 로드하는 경우 이 속성을 지정합니다.
user-agent 등의 번거로운 지정을 피할 수 있으므로 사용에 따라 편리합니다.

<script nomodule>....</script>

type="module"

코드를 JS 모듈로 처리합니다.
ES2015 대응 브라우저가 아니면 사용할 수 없기 때문에 nomodule 와 세트로 사용하면 좋을 것입니다.
모듈은 모듈이므로 동작이 일반 스크립트와 다른 장면이 있습니다.

defer 속성의 효과가 디폴트로 붙어있다 (defer 속성을 붙여도 무시된다)

자동으로 use strict 된다

스코프가 모듈 단위이기 때문에, 디폴트의 글로벌 변수에 액세스 할 수 없다 (window 생략 등)
등에서 자세히 확인해 주십시오.

샘플로서, 자바 SC리 PT. 인포 의 readme 의 예문을 기재합니다.

<script type="module" src="/path/to/js.cookie.mjs"></script>
<script nomodule defer src="/path/to/js.cookie.js"></script>

참고

js-cookie
MDN 스크립트 태그