HTML 안에 자바스크립트를 포함 시킬 때 다양한 방법이 존재합니다. 크게 4가지를 알아보겠습니다.
1. <head> 태그 안에 <script src=" "> 태그를 포함시킨 경우
- 브라우저는 HTML을 쭉 읽다가 <script> 태그를 만나면 스크립트를 먼저 실행해야 되므로 HTML 파싱(DOM 생성)을 멈춥니다.
- 필요한 .js 파일을 서버에서 받아와 다운로드 후 실행합니다.
- 다시 HTML 파싱을 시작합니다.
- 모든 DOM 생성이 완료됩니다.
이런 방식으로 스크립트를 불러오게 될 경우, 스크립트 파일 용량이 크거나 인터넷 환경이 느린 경우에 페이지 로딩이 길어질 수 있는 문제가 발생할 수 있습니다. 또한 <script> 태그 아래의 DOM 요소를 접근하는 코드가 있을 경우 JavaScript가 먼저 실행됐기 때문에 DOM 요소에 접근이 불가능합니다. 따라서 좋은 방법은 아니라고 생각됩니다.
2. <body> 태그 안에 <script src=" "> 태그를 포함시킨 경우
- 브라우저가 HTML을 파싱합니다.
- 모든 DOM 생성이 완료됩니다.
- .<script> 태그를 읽고 .js 파일을 서버에서 받아와 다운로드 후 실행합니다.
이번엔 <script> 태그를 <body> 태그 맨 아래에 위치시켰습니다. 이 경우엔 첫번째와 같은 부작용은 피하겠지만 완벽한 방법은 아닙니다. HTML 문서가 매우 큰 경우, 브라우저가 HTML 문서 전체를 다운로드 한 다음에 스크립트를 다운 받는다면 페이지가 느려지게 됩니다. 또한 웹 페이지가 JavaScript에 의존적인 페이지라면 이 역시 느려지게 됩니다.
그래서 존재하는 async와 defer
다행히 1, 2번의 문제점을 해결할 수 있는 <script> 태그 속성이 있습니다. 바로 async(비동기 속성)와 defer(지연 속성)입니다.
3. <head> 태그 안에 <script async src=" "> 태그를 포함시킨 경우
- 브라우저가 HTML을 파싱합니다.
- <script> 태그를 읽고 .js 파일을 서버에서 받아와 '백그라운드'에서 다운로드합니다. 따라서 스크립트 파일을 다운로드하는 도중에도 HTML 파싱이 멈추지 않습니다.
- JavaScript가 실행이 되면 HTML 파싱을 멈춥니다.
- 실행 후 나머지 HTML을 파싱합니다.
- 모든 DOM 생성이 완료됩니다.
async(비동기) 속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작합니다. 스크립트 파일을 다운로드 하는동안 HTML 파싱을 하기때문에 다운로드 시간을 줄여주지만 여전히 JavaScript를 실행할 때 HTML 파싱이 멈추기 때문에 페이지가 느릴 수 있습니다. 또한 <script> 태그의 파일이 여러개인 경우, 그 실행 순서가 제각각일 수 있습니다.
이러한 특징 덕분에 async 속성은 다음과 같이 쓰입니다.
비동기 스크립트는 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적인 역할을 하는 서드 파티 스크립트를 현재 개발 중인 스크립트에 통합하려 할 때 아주 유용합니다. async 스크립트는 개발 중인 스크립트에 의존하지 않고, 그 반대도 마찬가지이기 때문입니다. - 모던 자바스크립트 튜토리얼
4. <head> 태그 안에 <script defer src=" "> 태그를 포함시킨 경우
- 브라우저가 HTML을 파싱합니다.
- async와 마찬가지로 <script> 태그를 읽고 .js 파일을 서버에서 받아와 '백그라운드'에서 다운로드합니다. 스크립트 파일을 다운로드하는 도중에도 HTML 파싱을 합니다.
- 모든 DOM 생성이 완료됩니다.
- JavaScript가 실행됩니다.
<script> 태그의 파일이 여러개인 경우 순서대로 실행이 됩니다.
4가지의 경우 중에 defer 속성이 안정적이고 일반적인 경우에 자주 쓰인다고 볼 수 있겠습니다.
async와 defer 스크립트는 다운로드 시 페이지 렌더링을 막지 않는다는 공통점이 있습니다. 따라서 async와 defer를 적절히 사용하면 사용자가 오래 기다리지 않고 페이지 콘텐츠를 볼 수 있게 할 수 있습니다. - 모던 자바스크립트 튜토리얼
참고
script async 와 defer의 차이점 - 드림코딩 유튜브
defer, async 스크립트 - 모던 자바스크립트 튜토리얼
'JavaScript' 카테고리의 다른 글
| [JavaScript] 날씨 API 사용하기 - 2 (10) | 2020.11.19 |
|---|---|
| [JavaScript] 날씨 API 사용하기 - 1 (0) | 2020.11.17 |
| 호이스팅(Hoisting) 이해하기 (0) | 2020.11.14 |
| 왜 자바스크립트일까? (0) | 2020.11.04 |
| JS 콜백 함수(Callback Function) (0) | 2020.10.23 |