웹 개발을 할 때 HTML head에 script를 포함한다.
브라우저는 사용자가 HTML 파일을 다운로드하였을 때 브라우저를 한 줄씩 분석하게 되는데,
script 태그가 보이면 script파일을 다운받아야 한다.
script를 다운받는 방법은 한 가지 일까?
효율적으로 script파일을 다운로드하는 방법은 무엇일까?
fetching : 스크립트를 서버에서 받아온다.
executing : 스크립트 실행
1. 헤더에 그냥 추가하기
<head>
<script src="main.js"></script>
</head>이 방법은 HTML을 파싱하다가 script태그를 만났을 때 파싱을 멈추고,
. js파일을 다운로드, 실행한다.
. js파일이 크기가 크거나 인터넷이 느린 경우 사용자가 웹 페이지를 볼 때까지
오랜 시간이 걸린다는 단점이 있다.
2. body 끝부분에 추가하기
<body>
<div></div>
<script src="main.js"></script>
</body>브라우저가 HTML을 파싱 해서 페이지가 준비된 다음
스크립트를 다운받고 실행한다.
스크립트가 준비가 안되어도 페이지를 볼 수 있다는 장점이 있지만,
웹사이트가 자바스크립트에 의존적이라면 (ex: 서버에서 데이터를 받아오거나, DOM요소를 더 꾸며야 할 때)
스크립트를 받기 전까지 정상적인 페이지를 볼 수 없다.
3. 헤더에 asyn 옵션으로 추가하기
<head>
<script asyn src="main.js"></script>
</head>- asyn 옵션은 boolean 타입이라 선언하면 true로 설정된다.
이 방법은 HTML과 script 다운로드를 동시에 진행하면서 시간을 단축할 수 있다.
script다운로드가 끝나면 HTML파싱을 멈추고 script 실행을 한 다음,
남은 HTML을 파싱한다.
단점
이 방법은 script가 HTML이 파싱 되기 전에 실행될 수 있기 때문에
script 파일에서 DOM접근을 해야 하는데 파싱이 되지 않아서 접근하지 못할 수 있다.
또한 파싱이 끝나기 전에 멈추고 script를 실행하기 때문에
사용자가 페이지를 볼 때까지 오랜 시간이 걸릴 수 있다.
script가 여러 개라면 순차적으로 실행되지 않을 수 있다.
4. 헤더에 defer 옵션으로 추가하기
<head>
<script defer src="main.js"></script>
</head>이 방법은 HTML과 script 다운로드를 동시에 진행하면서 시간을 단축할 수 있다.
HTML 파싱이 끝나면 script를 실행한다.
script가 여러개라면 선언한 순서대로 실행된다.
결론
사용자에게 웹 페이지를 가장 빠르게 보여주고, script를 순서대로 보여주는
defer 옵션이 가장 안전하다.
'개발공부 > JavaScript' 카테고리의 다른 글
| 함수형 프로그래밍의 특징 (0) | 2022.02.17 |
|---|---|
| [JS] const, let 차이점 (0) | 2022.02.03 |
| JavaScript에서 var을 쓰면 안되는 경우 (feat. var hoisting) (0) | 2022.01.18 |
| Promise와 Async await (0) | 2022.01.18 |
| JavaScript 파일에서 use strict를 쓰는 이유 (0) | 2022.01.17 |