HTML에서 자바스크립트를 포함할 때 어떻게 포함하는 것이 좋은지 async와 defer의 차이점을 알아두면 효율적으로 사용할 수 있다.
head 안에 포함되어 있을때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
html 읽기(title까지) - script 다운로드 - script 실행 - 나머지 html 읽기
먼저 사용자가 html 파일을 다운로드하였을 때 브라우저는 그것을 한줄한줄 분석한다. 그러다가 스크립트를 만나면 그 스크립트를 다운로드하여야 된다고 읽기 때문에 html을 파싱 하는 것을 잠시 멈추고 필요한 자바스크립트를 서버에서 다운로드하여서 이것을 실행한 다음 html을 다시 파싱 한다.
이 과정에서 만약 자바스크립트 파일이 크기가 큰 파일이라면 다운로드하는 시간이 길어지고 그동안 html이 파싱 되지 못하고 브라우저에 보이지 않는 불편함이 생긴다. 그래서 head에 스크립트를 넣는 것은 바람직하지 못하다.
body의 맨 끝부분에 포함되어 있을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src="script.js"></script>
</body>
</html>
boby가 끝나기 바로 전까지의 html 읽기(모든 html이라고 봐도 됨) - script 다운로드 - script 실행
반면에 바디의 최 하단에 스크립트가 존재하게 되면 먼저 html을 모두 파싱 하고 자바스크립트 파일을 만났을 때 그때 서버에서 자바스크립트 파일을 다운로드하여서 실행시킨다. 그러므로 사용자는 자바스크립트 파일이 모두 실행될 때까지 빈 화면으로 기다리지 않고 먼저 html를 볼 수 있게 된다.
async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script asyn src="script.js"></script>
</head>
<body>
</body>
</html>
html 읽기 - - html 읽기 중단 - html 나머지 읽기 시작 - html 읽기 끝
-asyn 만남 & 다운로드 시작 -다운로드 실행
async는 불리언 타입의 속성 값이기 때문에 선언하는 것만으로도 true값으로 설정이 된다. 브라우저가 html을 다운로드하여서 파싱을 하다가 async 파일을 만나면 스크립트를 다운로드하자 라고 명령만 해놓고 다시 html을 읽기 시작한다. 그러다가 다운로드가 완료가 되면 그때 파싱을 잠시 멈추고 스크립트를 실행시킨 다음 나머지 html을 파싱 한다.
바디 끝에 사용하는 것보다 파싱이 병렬적으로 일어나기 때문에 다운로드하는 시간을 절약할 수 있다.
하지만 자바스크립트가 html이 완벽히 파싱 되기 전에 실행이 되기 때문에 dom요소를 선택하는 것 등의 dom과 관련된 조작하는 것이라면 원하는 html의 요소가 아직 정의되어 있지 않을 수 있다.
또 자바스크립트를 실행하기 위해 언제든지 파싱을 멈추기 때문에 사용자가 페이지를 보는 데 여전히 시간이 걸릴 수 있다.
주의할 점은 async는 정의된 스크립트의 순서에는 상관없이 먼저 실행이 된 스크립트부터 실행이 되기 때문에 스크립트의 실행 순서가 중요한 자바스크립트라면 문제가 생길 수 있다.
defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="script.js"></script>
</head>
<body>
</body>
</html>
html 읽기 - - html 읽기 끝
-defer 만남 & 다운로드 시작 -다운로드 실행
html을 파싱 하다가 defer을 만나면 일단 스크립트 파일을 다운로드하으라고 명령만 시켜놓고 나머지 html을 모두 파싱 한 다음 다운로드된 자바스크립트를 실행시킨다.
사용자에게 페이지를 먼저 보여주고 바로 다운로드하여놨던 자바스크립트를 실행시키기 때문에 사용자 편의상 속도면에서 훨씬 효율적이다.
자바스크립트를 모두 다운로드를 하고 마지막에 같이 실행시키기 때문에 정의된 순서대로 실행이 된다.
제일 효율적이고 안전하다고 볼 수 있다.
// 추가적으로 배운 사항
API
application programming interface
자바스크립트에서 제공하는 함수가 아닌 브라우저가 제공하는 브라우저가 이해할 수 있는 함수이다.
유튜버 드림 코딩 엘리님의 영상을 기반으로 공부한 것을 정리한 내용입니다.
문제시 댓글로 남겨주세요!
'웹개발 > javascript' 카테고리의 다른 글
| 클래스와 상속 그리고 인스턴스오브 (Class & Inheritance &instanceof) (0) | 2020.08.15 |
|---|---|
| Hoisting(호이스팅), Scope(스코프) (0) | 2020.08.13 |
| [반응형 웹의 기초] 이벤트 추가하기 addEventListener, 스크롤바 만들기 (0) | 2020.08.03 |
| 자바스크립트 Date 오브젝트 (0) | 2020.07.30 |
| 자바스크립트 Global 오브젝트 (0) | 2020.07.29 |