질문

<script>, <script async>와 <script defer>의 차이점에 관해 설명해주세요.

✔️ plain / async / defer <script>

1. plain script tag

<script src="main.js"></script>

| 작동 순서

DOM 파싱(...ing) ➡ script태그를 만남 ➡ parsing 멈추고 fetching & executing js

• 장점 : (body태그 끝에 선언시)파싱이 모두 끝난 뒤 순차적으로 script 실행되기 때문에 파싱 중단없이 html&css 화면이 먼저 빠르게 로딩된다.
• 단점 : 웹사이트가 js에 크게 의존적이라면 (UI 조작, 서버 데이터 가져오는 등) script가 모두 실행될 때까지 기다려야 한다.

2. async script

헤더에 <script async src="main.js"></script>선언
(*async=boolean 타입→ 기본 선언시 true)

| 작동 순서

• 병렬적으로 parsing DOM & fetching script
• executing script 단계에서는 parsing 중지
• executing 끝나면 다시 parsing 시작

Parsing ➡ Parsing DOM & Fetching JS ➡ Executing JS(&Parsing paused) ➡ Parsing restart

| 장단점

• 장점 : 비동기적으로 fetching하기 때문에 다운로드 시간 줄일 수 있다.(하지만 중간에 parsing 중지되기때문에 여전히 베스트는 아님)
• 단점 : html 모두 실행되기 전에 js가 실행되기 때문에 돔조작시 위험하다.
  , script 정의 순서 관계없이 빨리 다운로드되는 순으로 실행된다.(순서 의존적이라면 문제)

3. defer script (🙌 )

헤더에 <script defer src="main.js"></script>선언

| 작동 순서

• 병렬적으로 parsing & script fetching
• parsing 모두 끝나면 (when page ready) execute js

Parsing ➡ Parsing & JS Fetching ➡ Parsing Done ➡ JS Executing

| 장단점

• 장점 : 스크립트 정의 순서 지켜지며 js 다운로드 속도 줄일 수 있음 (파싱하는동안 다운로드(fetching) 다 되고 page ready 됐을 때 실행하기 때문)

결론

<script>, <script async>와 <script defer>를 구분하여 사용하는 것은 프론트 단에서 속도 향상할 수 있는 방법 중 하나가 될 수 있다. 각각 장단점 참조하여 적합한 태그를 선택한다. DOM조작을 하거나 다른 파일에 종속적인 js 파일로드시 <script defer> 태그 사용이 적절하다.