모든 내용은 Youtube의 ellie teacher가 한 것을 기반으로 한다.
영상을 보길 원하면 위에 들어가면 된다. 그렇다... 나는 그녀의 충실한 노예다...
하여간
여기서 script를 불러오는 방식에서 Async와 Defer가 있다.
우선 가장 기본적으로 사용하는 html 형식을 보자 .
<!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="test.js"></script>
</head>
<body>
</body>
</html>
브라우저에서 위에서 부터 천천히 html을 읽어들이기 시작한다.
순차적으로 쭉 내려오다가 script를 만난다.
어! test.js를 그러면 다운받아야 한다고 이해를 한다.
그렇게 되면 html parsing를 잠시 멈추고
필요한 javascript 파일을 서버에서 다운받아서 이것을 실행한 다음에 그 다음에 다시 parsing 하는 부분으로 넘어간다.
이것의 단점은 우리 js파일이 엄청 크거나 인터넷이 느리다면 생긴다. 사용자가 우리가 만든 웹사이트를 보는데까지 많은 시간이 소요가 된다.
그래서 script를 그냥 head에 포함하는 것은 좋은것이 아니다!
그래서 그에 대한 대안으로 많이 하는 것이 body tag 제일 끝에 script를 추가하는 것이다.
이렇게 되면 먼저 html를 모두 parsing하고 나서 페이지가 준비가 된 다음에 스크립트를 만나서 서버에서 받아 실행하게 된다.
장점은 js를 받기 전에 사용자에게 화면을 볼수가 있다.
여기서 단점은 만약에 우리 웹사이트가 자바스크립트에 매우 의존적인 사이트라면
즉, 사용자가 의미있는 컨텐츠를 보기 위해서는 이 자바스크립트를 이용해서 많은 일을 할 때에는 정상적인 페이지를 보기 전까지는 받아오고... (fetching) 실행하고...(executing) 하는 시간이 오래 걸리는것이 단점이다.
뭔가 동시에 다 받아주면 좋을거 같은데...
그다음 옵션은 head + async다.
async는 boolean type의 속성값이기 때문에 선언하는 것만으로도 true로 설정이 되어서 옵션을 사용할 수 있다.
async를 사용하게 되면 브라우저가 html를 다운로드 받아서 파싱하다가
어? async가 있네 하고 병렬로 main.js 를 다운받는다고 명령을 내리고 다시 html을 parsing해준다.
그러다가 main.js가 다운이 완료가 되면 html parsing을 멈추고 js파일을 실행한다.
실행을 하고 나서 이제 나머지 html을 전부 parsing 해준다.
장점은 다운로드 받는 시간을 줄여줄 수 있다.
하지만 html이 parsing 되기도 전에 js가 실행이 되기 때문에 만약
javascript 파일에서 dom 요소를 조작하는 일이 생긴다면 .... 조작하는 순간에 html tag 가 생성이 안되서 망하는것이다 ㅎㅎ
그리고 사용자가 페이지를 보는데 js를 실행한다고 멈춰버리게 되면 오류라고 생각할 수 도 있다.
또다른 방법으로는 head + defer가 있다.
똑같이 parsing을 하다가 script안에 defer를 발견하면 main.js를 다운로드 받으라는 명령만 시켜 놓은채로
나머지 html를 끝까지 parsing한다. 그리고 마지막에 parsing이 끝난 다음에 다운로드된 javascript를 실행하면 된다.
딱봐도 defer이 가장 좋은 옵션이다.
'programming language > javascript' 카테고리의 다른 글
| Callback 과 Promise 사용하기! (0) | 2021.09.05 |
|---|---|
| Let vs Var? 무엇을 써야 할까? (4) | 2021.09.03 |
| Prototype이란? (4) | 2021.09.02 |
| Closure란? (0) | 2021.09.01 |
| Callback Fucntion 이란? (0) | 2021.09.01 |