|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<meta name="description" content="The HTML5 Herald">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
</body>
</html>
|
cs |
위와 같은 html이 있을 때 보통 <script src="js/main.js"></script>의 위치에 따라 장단점이 발생합니다. 이번 글에서는 이에대해 알아보겠습니다.
우선 head tag안에 넣게 되는 경우를 보겠습니다.
브라우저는 위에서부터 html을 한줄씩 파싱하게 됩니다. 그러다가 중간에 script tag가 보이면 서버에 필요한 js 파일들을 요청하고 다운받게 됩니다. 이 과정이 끝날때까지 html 파싱을 잠시 멈추게됩니다. 즉, 만약 js파일이 꽤 크다면 사용자는 웹사이트를 보기까지 시간이 꽤 걸릴 것입니다.
body tag 끝에 놓는 경우를 보겠습니다.
body tag 끝에 놓으면 html을 막힘없이 쭉 파싱을 할 것입니다. 그러나 해당 웹사이트가 js에 많은 의존을 하고 있다면 사용자가 정상적인 이용을 하기까지 시간이 걸릴 것입니다. 또 body tag끝에 놓으면 html 파싱이 완료된 후에 js를 실행하므로 아직 파싱이 되지 않은 html에 대한 js조작을 하면서 생기는 문제가 사라집니다.
다음은 head tag에 asyn 옵션입니다.
|
1
2
3
4
5
6
7
8
9
|
<head>
<meta charset="utf-8">
<title>Document</title>
<meta name="description" content="The HTML5 Herald">
<script asyn src="main.js"></script>
</head>
|
cs |
위처럼 script tag에 asyn 옵션을 사용하면 브라우저가 html파싱을 하다가 script tag를 보고 다운을 받으면서 html파싱을 이어갑니다.
그러다가 js파일이 다운이 완료되면 이때만 잠시 html파싱을 멈추고 js를 실행한뒤 html파싱을 이어서합니다.
그러나 js 실행이 될때 아직 파싱이 되지 않은 html에 관한 js 조작을 할때 문제가 생길 수 있는 단점이 있습니다.
또한, script tag가 여러개이고 순서대로 js가 실행되야하는 경우 asyn는 적절치 않습니다.
다음은 head tag에 defer 옵션입니다. (asyn 대신 defer을 사용하면 됩니다.)
asyn과 마찬가지로 js를 병렬처리로 다운받으면서 html 파싱을 계속 진행합니다. 그러나 js파일이 다운이 완료되면 asyn는 바로 html 파싱을 멈추고 js를 실행했지만 defer은 html 파싱을 끝내고 js를 실행합니다.
script tag가 여러개라면 코드에 써져잇는 script tag순서대로 js를 html파싱이 끝난 후 실행하게 됩니다.
결론적으로는 head tag + defer 옵션을 사용하는게 제일 나은 선택입니다.
** 출처: www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
'javascript' 카테고리의 다른 글
| 자바스크립트 fetch와 axios (0) | 2021.05.15 |
|---|---|
| 자바스크립트 this binding (0) | 2021.05.13 |
| 자바스크립트 ... 이용하기 (0) | 2021.05.12 |
| 자바스크립트 싱글스레드와 Event Loop (0) | 2021.05.08 |
| javascript var을 쓰지 말아야 하는 이유 (0) | 2021.05.03 |
