html head 에 javascript 자바스크립트 body 에 javascript
사용자에게 어떤 순서로 페이지가 보여질까?
사용자가 페이지에 접속했을 때 (html 파일을 다운 받았을 때) 브라우저가 해당 파일을 위에서 부터 아래로 한줄 씩 분석(Parsing) 합니다. 그리고 링크 된 css 파일과 함께 DOM 요소로 변환합니다.
자바스크립트 파일이 html <head></head> 에 있는 경우,
JS 파일의 크기가 크면 html 전체 페이지를 분석하기도 전에 JS 파일을 분석하느라 페이지가 느리게 분석되어 사용자가 느리게 느낍니다.
자바스크립트 파일을 html <body></body> 끝 부분에 넣으면,
해당 페이지의 html 을 다 훑은 후 마지막에 JS 파일을 분석하여 사용자는 먼저 페이지를 보게 됩니다. 단, JS 파일의 분석이 마지막에 이루어지기 때문에 동적 기능이 느리게 적용 된다거나 JS 의존도가 높은 웹 페이지는 사용자 또한 완전한 페이지를 보기까지 시간이 걸립니다.
ASYNC 속성 값을 사용한 자바스크립트 파일이 html <head></head> 에 있는 경우,
ASYNC 는 Boolean type의 속성값이라 스크립트 태그 내에 선언은 곧 true 를 의미합니다.
<script async src="script.js"></script>
브라우저가 html 을 위에서 부터 parsing 하다가 병렬로 JS 파일을 parsing 하여, 다시 html 을 훑음과 동시에 JS 파일을 동시에 parsing 하게 됩니다.
단, 여전히 html parsing 에 시간이 걸립니다.
ASYNC 는 다운로드가 먼저 된 JS파일을 사용하기 때문에 JS파일을 불러오는 순서가 중요한 웹사이트면 다른 선택을 해야겠습니다.
DEFER 속성 값을 사용한 자바스크립트 파일이 html <head></head> 에 있는 경우,
<script defer src="script.js"></script>Defer 속성을 사용하는 경우 일단 JS 파일을 다운받아놓습니다. 일단 다운만 받고 html 을 다시 parsing 합니다. 그리고 JS 파일이 다운 받아져 있으니 html 을 다 parsing 한 뒤, JS 가 필요한 경우에 그 때 JS 파일이 읽힙니다.
Defer 은 parsing 하는 동안 JS파일을 먼저 다운받아 놓고 필요시 순서대로 불러옵니다.
시간의 개념으로보면 head 내의 script defer 선언이 이 가장 좋은 선택지가 되겠습니다.
'JavaScript' 카테고리의 다른 글
| 도대체 DOM 이 무엇일까? Object 는? (0) | 2022.09.22 |
|---|---|
| 피보나치수열 만들기 - 자바스크립트 입문 3 (최종) (0) | 2022.05.04 |
| 기본 기능 & 변수 정의하기 - 자바스크립트 Javascript 입문 2 (0) | 2022.04.30 |
| 자바스크립트 Javascript 입문 1 (0) | 2022.04.29 |
| 자바스크립트 입문 자바스크립트 역사 (0) | 2022.04.29 |
