2021. 6. 30. 00:46ㆍ자바스크립트
HTML 파일 다운로드 동작 과정
사용자가 HTML 파일을 다운받았을 때, 브라우저는 한 줄씩 분석한다.
HTML 문서와 CSS를 함께 DOM으로 받고, script에 있는 js 파일도 다운 받고 실행시킨다.
이때 script가 어떤 위치에 있느냐, 혹은 어떤 옵션을 가지고 있느냐에 따라 다양한 장단점이 존재한다.
0. script 태그에 옵션이 없는 경우의 동작과정
1. 한 줄마다 HTML을 파싱하며 CSS와 결합한 DOM을 만든다.
2. 이때 script 태그가 보이면 파싱을 멈추고 js파일을 다운받아서 실행한다.
* fetching js, excuting js
3. js파일을 다운 받고, 실행한 뒤, 다시 HTML 문서를 파싱한다.
1. head에 옵션 없이 script 태그 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='main.js'></script> // head + 옵션이 없는 script 태그
</head>
<body>
</body>
</html>
단점
- js 파일을 모두 다운받은 뒤에야 HTML 문서를 파싱할 수 있기 때문에 js 파일의 데이터가 많은 경우 HTML을 읽는 데 오랜 시간이 걸릴 수 있다.
2. 마지막에 옵션 없이 script 태그 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src='main.js'></script> // 마지막 + 옵션이 없는 script 태그
</body>
</html>
단점
- js 파일에 의존적인 웹 사이트의 경우 js 파일을 다운받기 전까지 온전치 못한 브라우저가 나타난다.
3. head + async 옵션 사용
- js 파일의 다운로드를 병렬적으로 처리한다. (실행 x)
* fetching js (o) / excuting js (x)
- js 파일이 실행될 때 파싱을 중간에 멈춘다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src='main.js'></script> // head + asyn
</head>
<body>
</body>
</html>동작 과정
1. script 태그의 async 옵션이 있다면 병렬로 HTML을 파싱하면서 js 파일을 다운받는다.
2. js 파일의 다운로드가 완료된다면 HTML 파싱을 멈추고 js 파일을 실행한다.
3. js 파일을 실행한 뒤, 다시 HTML 문서를 파싱한다.
장점
- 앞서 확인한 옵션이 없는 script보단 더 빠른 속도로 HTML을 파싱할 수 있다.
단점
- js 파일에서 DOM 요소를 조작하고자 하지만 HTML에 아직 원하는 요소가 정의되지 않을 수 있기 때문에 에러가 발생할 수 있다.
- js 파일의 실행은 다운로드가 끝나자마자 시작하기 때문에, 여러개의 js 파일이 존재하고 각 js 파일의 실행 순서가 중요할 때 문제가 생길 수 있다.
- 파싱해서 보는데 여전히 많은 시간이 걸린다.
4. head + defer 옵션 사용
- js 파일의 다운로드를 병렬적으로 처리한다. (실행 x)
* fetching js (o) / excuting js (x)
- HTML 문서의 파싱이 끝나면 js 파일을 순차적으로 실행시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src='main.js'></script> // head + asyn
</head>
<body>
</body>
</html>동작 과정
1. script 태그의 defer 옵션이 있다면 병렬로 HTML을 파싱하면서 js 파일을 다운받는다.
2. HTML 문서를 모두 파싱한 뒤, js 파일을 실행한다.
장점
- 앞서 확인한 옵션이 없는 script와 async 옵션이 있는 script보단 더 빠른 속도로 HTML을 파싱할 수 있다.
- 파일의 실행 순서가 중요할 때, 문제 없이 실행할 수 있다.
결론
- defer 옵션이 있는 script 태그가 가장 빠르고 정확하다.
'자바스크립트' 카테고리의 다른 글
| 자바스크립트_4-1 / 함수의 선언과 표현 (0) | 2021.07.14 |
|---|---|
| 자바스크립트_3 / 연산자 (0) | 2021.07.06 |
| 자바스크립트_2 / 변수 선언과 데이터 타입, 그리고 다이나믹 타이핑 (0) | 2021.06.30 |