<script> 태그는 어디에 위치하는게 가장 효율적일까?
<script>를 적는 크게 4곳을 정리해 보았습니다:
1. <head> 태그 안에 <script> 가 있는 경우
2. <body> 태그 안에 <script> 가 있는 경우
3. <head> 안에 <script async> 가 있는 경우
4. <head> 안에 <script defer> 가 있는 경우
이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다.
브라우저의 동작 방식
- HTML을 읽기 시작한다.
- HTML을 파싱한다.
- DOM 트리를 생성한다.
- Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
- Display에 표시한다
<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>
<body></body>
</html>
| parsing HTML | Blocked | parsing HTML | |
| fetching js | executing js | ||
<body> 태그 안에 <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>
</body>
</html>
| parsing HTML | fetching js | executing js |
<head> 안에 <script async> 가 있는 경우
<!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>
<body></body>
</html>
| parsing HTML | Blocked | parsing HTML | |
| fetching js | executing js | ||
<head> 안에 <script defer> 가 있는 경우
<!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>
<body></body>
</html>
| parsing HTML | executing js | ||
| fetching js | |||
parsing을 하다가, script에서 defer을 보면,
"main.js를 다운 받자" 명령만 시켜두고 나머지 HTML을 끝까지 parsing 한다.
parsing이 끝난뒤에 다운로드 되어지 JavaScript 파일을 실행한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [ JavaScript ] currentTarget vs target 차이점 (0) | 2022.11.17 |
|---|---|
| [ JavaScript ] ES6의 화살표 함수 (0) | 2022.10.23 |
| [ 자바스크립트 ] Filter() 함수: 배열에서 조건을 만족하는 요소를 추출하는 방법 (0) | 2022.09.15 |
| [ 자바스크립트 ] reduce() 함수 이해하기 (1) | 2022.09.13 |
| [자바스크립트] sort, 배열 정렬하기 (오름차순, 내림차순, 문자열, 객체) (0) | 2022.08.27 |
댓글