2020. 5. 25. 23:09ㆍ프론트엔드/JAVASCRIPT
1. <head>태그 안에 <script>태그를 포함할 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
1-1. 사용자에게 보여지는 순서
사용자가 html파일을 다운받았을 때 브라우저가 한줄씩 분석
css와 병합해서 Dom요소로 변환
html태그를 쭉 parsing하다가 scipt태그를 만나면 .js파일을 다운받기 위해 html parsing을 잠시 멈춤
필요한 자바스크립트 파일을 서버에서 다운
이것을 실행한 다음 멈췄던 html parsing부분으로 넘어감
1-2. 특징
만약 자바스크립트 파일이 어마어마하게 크다거나 인터넷도 엄청 느리다면, 사용자가 웹사이트를 읽는데 많은 시간이 소요됨
2. <body>태그 내부 맨 끝에 <script>태그를 포함할 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
2-1. 사용자에게 보여지는 순서
브라우저가 html을 다운 받아서 쭉 parsing해서 페이지가 준비가 됨
준비가 된 상태에서 script태그를 만남
필요한 자바스크립트파일을 서버에서 다운 후 자바스크립트 실행
따라서 페이지가 자바스크립트파일을 다운받기 전에 준비가 되기 때문에 자바스크립트파일을 다운받기 전에 사용자가 미리 페이지 컨테츠들을 확인 가능
2-2. 특징
사용자가 기본적이 html컨텐츠들을 빨리 볼 수 있다는 장점이 있지만, 만약에 웹사이트가 자바스크립트에 굉장히 의존적이라면(사용자가 웹페이지의 의미 있는 컨텐츠를 보는데 자바스크립트가 필수적 요소라면) 사용자가 정상적인 페이지를 보기 전까지는 서버에서 자바스크립트를 받아오는 시간도 기다리고 실행하는 시간도 기다려야하는 단점이 있음
3. 'async' 속성을 사용할 경우 (head태그 안에 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>asyn속성은 boolean타입의 속성값이기 때문에 선언하는 것만으로도 true로 설정이 됨
3-1. 사용자에게 보여지는 순서
브라우저가 html을 다운 받아서 parsing하다가
'asyn'속성을 만나면 병렬로 자바스크립트파일을 다운로드 받겠다는 명령만 해놓고 다시 parsing을 하다가 자바스크립트파일 다운로드가 완료가 되면 그때 parsing을 멈추고 다운로드 된 자바스크립트파일을 실행
자바스크립트파일을 실행완료 후 나머지 html을 parsing 마저함
3-2. 특징
body태그 끝에 script태그를 사용하는 것보다는 자바스크립트파일이 html을 parsing하는 동안 병렬로 이루어지기 때문에 자바스크립트파일 다운로드 시간을 절약할 수 있음. 하지만 자바스크립트가 html이 완전히 parsing되기 전에 실행이 되기 때문에 만약 쿼리설렉터를 이용해서 Dom요소를 조작한다면 조작하는 시점에 아직 html이 parsing되지 않은 상태에선, 조작하려는 Dom요소가 정의되지 않은 상태일 수 있어서 위험할 수 있음. 또한 자바스크립트를 실행하기 위해 html parsing을 언제던지 멈출 수 있기 때문에 사용자가 페이지를 보는데 여전히 시간이 좀 걸릴 수 있음.
4. 'defer' 속성을 사용할 경우 (head태그 안에 )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>defer속성은 boolean타입의 속성값이기 때문에 선언하는 것만으로도 true로 설정이 됨
4-1. 사용자에게 보여지는 순서
브라우저가 html을 다운 받아서 parsing하다가
'defer'속성을 만나면 자바스크립트 파일을 다운받으라고 명령만 시켜놓고 html을 완전히 parsing한 상태에서 마지막에 다운로드된 자바스크립트 파일을 실행
4-2. 특징
지금까지 살펴봤던 방법들 중엔 가장 효율적이고 안전한 방법
5. 'async' vs 'defer'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
<script asyn src="a.js"></script>
<script asyn src="b.js"></script>
<script asyn src="c.js"></script>
</head>
<body>
</body>
</html>
'asyn'속성과 'defer' 속성을 잠시 비교해보자면, 'asyn'속성은 만약 여러개의 다운받아야할 스크립트 파일이 있다면, 먼저 다운로드 되는 아이들을 실행하게 되기 때문에 , 정의된 자바스크립트 순서와는 상관없이 다운로드가 먼저된 아이들을 먼저 실행하기 때문에 현재 웹페이지가 자바스크립트 순서에 의존적이라면 문제가 될 수 있음
반면, 'defer' 속성 html을 parsing하는 동안 다운로드만 받아놓고 html parsing을 완전히 끝낸 상태에서 자바스크립트파일이 정의된 순서에 맞게 실행이 되기 때문에 개발자가 원하는대로 작동이 가능
'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글
| [JS] 클래스(Class) (0) | 2020.06.04 |
|---|---|
| [JS] 함수(Functions) (0) | 2020.06.03 |
| [JS] 반복문(Loops) (0) | 2020.05.31 |
| [JS] 연산자(Operator) (0) | 2020.05.31 |
| [JS] 데이터 타입(Data Type) (0) | 2020.05.26 |