Html에서 JavaScript파일을 어떻게 포함하는 것이 더 효율적일까?
웹 브라우저는 html을 parsing하다가 <script>를 만나면
html parsing을 중단하고 <script>를 다운받아 실행한다.
이 과정에서 DOM의 랜더링 시간이 지연된다.
그래서 보통 <script>를 <body> 제일 마지막에 선언하기도 하지만,
async, defer 속성과 함께 사용하여 <head>영역에 선언하는 것이 더 좋은 방법이다.
1. < head > + < script >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="style.css">...</script>
</head>
<body>
<div></div>
</body>
</html>
html을 parsing 하다가 <script>코드를 만나면 html parsing은 중단하고,
<script>를 다운받고, 실행을 한 후에 다시 html parsing을 하게 된다.
JS파일의 크기가 크고, 인터넷이 느리다면, 사용자가 웹사이트를 보기까지
많은 시간이 소요되기 때문에 <script>를 그냥 <head> 안에 포함하는 것은 좋은 방법이 아니다.
2. < body > + < script >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script src="style.css">...</script>
</body>
</html>
그래서 많이 사용하는 방법이 <body>안 제일 마지막 부분에 <script>를 추가하는 방법이다.
이 경우에는 JS파일을 받기전에 사용자가 빠르게 웹사이트를 컨텐츠를 볼 수 있다.
사용자가 기본적인 html을 빠르게 볼 수는 있지만
웹사이트가 JS에 많이 의존적이고, 동적인 요소가 많다면 사용자가 정상적인 웹사이트를 확인하기까지
여전히 많은 시간이 지연된다.
3. < head > + < script async >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="script.js">...</script>
</head>
<body>
<div></div>
</body>
</html>
<head>안에 <script>를 포함 하되 async라는 속성값을 사용하는 방법이 있다.
async는 Boolyan 타입의 속성 값이기 때문에 선언하는 것만으로 true로 설정된다.
async 속성을 사용하게 되면 html을 parsing하다가 <script async>를 만나면
<script>파일 다운로드 명령을 내려놓고 속 html을 parsing한다.
<script>파일 다운로드가 완료되면 그때 html parsing을 멈추고, 다운로드 된 <script>를 실행한다.
<script>를 다 실행하고 나면 계속해서 html을 parsing 한다.
JS파일이 html이 parsing 되기도 전에 실행이 되기 떄문에
만약 JS파일에서 DOM요소를 조작하거나 한다면 조작하려는 시점의 html이
원하는 요소가 아직 정의되어 있지 않을 수 있다. 이 부분이 위험요소로 남는다.
4. < head > + < script defer >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="script.js">...</script>
</head>
<body>
<div></div>
</body>
</html>
html을 parsing하다가 <script defer>를 만나면 <script>파일 다운로드 명령만 내려놓고,
나머지 html을 끝까지 parsing 하게 된다. html parsing이 끝나면 다운받아진 <script>파일을 실행하게 된다.
html이 parsing되는 동안 필요한 <script>파일을 다운로드 받아놓고
html parsing을 다해서 사용자에게 웹사이트를 먼저 보여주고, 바로 이어서 <script>를 실행한다.
<head>안에 <script>파일을 defer속성과 함께 사용하는 것이 가장 좋은 방법이다.
본 포스팅은 개인 공부를 목적으로 기록한 글입니다.
'JavaScript' 카테고리의 다른 글
| [JS] Class Ingeritance (클래스 상속) (0) | 2021.01.16 |
|---|---|
| [JS] Class 선언과 Object 생성 (0) | 2021.01.16 |
| [JS] JavaScript Function & Arrow Function (0) | 2021.01.15 |
| [JS] Primitive Type 과 Reference Type (0) | 2021.01.14 |
| [JS] 변수 선언 - var, let, const 비교 (0) | 2021.01.14 |
