콘솔에 출력
<!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="main.js"></script>
</head>
<body>
</body>
</html>
자바스크립트 공식 사이트 : ecma-international.org, developer.mozilla.org
script async와 defer의 차이점
html은 한 줄 한 줄 읽어가며 파싱한뒤 화면을 출력하게 된다.
헤더 안에 JavaScript가 있는 경우
<!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="main.js"></script>
</head>
<body>
</body>
</html>- 브라우저가 한 줄 한 줄 분석하며 이해한다.
- CSS와 병합하여 DOM요소로 변환한다.
- Scrpit가 보이면 html을 파싱 하는 것을 잠시 멈춘 뒤 필요한 JavaScript를 서버에서 받아와 실행한다.
- JS 파일이 엄청 크고 인터넷이 느리다면 웹사이트를 보는데 많은 시간이 소요된다.
바디 끝부분에 JS를 추가하는 경우
<!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 = "main.js"></script>
</body>
</html>- 웹페이지가 준비된 다음 JS 파일을 받아오고 실행한다.
- 사용자가 JS를 받기 전에 웹페이지를 볼 수 있다.
- 웹사이트가 JS에 의존적이라면, 의미 있는 콘텐츠를 보기 위해선 JS 파일을 받아오고 실행하는 시간을 기다려야 한다.
헤더 안에 JS가 있으며 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="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>- HTML을 다운로드하여 파싱 하다 script 태그가 나올 경우 병렬로 JS파일을 받자고 명령만 한 후 파싱을 하다가 파일 다운로드 완료된 경우 파싱을 잠시 멈추고 실행을 하고 실행이 되면 파싱을 재개한다.
- 다운로드가 병렬적으로 되어 시간을 아낄 수 있는 장점이 있지만 JS가 실행되었지만 그와 연관된 HTML이 파싱이 안되어 위험할 수 있고 파싱 하는 동안 언제든지 JS파일을 실행하기 위해 멈출 수 있기 때문에 웹페이지를 보기 위해서 기다려야 한다.
- 다운 순서가 아니라 다운로드된 JS파일을 먼저 실행하기 때문에 순서가 상관있다면 문제가 생길 수 있다.
헤더 안에 JS가 있으며 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 defer src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>- HTML을 다운로드하여 파싱 하다가 script 태그가 나올 경우 병렬로 JS파일을 받자고 명령한 후 계속해서 HTML을 파싱 한다. 그 뒤 파싱이 끝나면 JS파일을 실행한다.
- 사용자에게 웹페이지를 보여준 다음 JS를 실행한다.
- JS 파일을 순서대로 실행하기 때문에 정의한 순서, 원하는 순서를 지킬 수 있다.
- 가장 안전한 방법이다.
자바스크립트 공부 방향
- 바닐라 자바스크립트 파일을 작성할 때는 'use strict';를 작성하는 것이 좋다. 비상식적인 문법 사용을 막는다.(ex. 선언되지 않은 변수를 사용 등)
- 효율적으로 자바스크립트를 분석하여 성능개선에 도움이 된다.
'인터넷강의 > 자바스크립트' 카테고리의 다른 글
| 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 (0) | 2020.09.14 |
|---|---|
| Arrow Function은 무엇인가? 함수의 선언과 표현 (0) | 2020.09.14 |
| 코딩의 기본 operator, if, for loop, 코드리뷰 팁 (0) | 2020.09.11 |
| 데이터타입, data types, let vs var, hoisting (0) | 2020.09.11 |
| 자바스크립트 역사와 현재 그리고 미래 (0) | 2020.09.07 |