Q. HTML에서 JavaScript를 포함할 때 어떻게 포함하는 게 효율적일까?
1. <head> 안에 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>단점 : 인터넷이 느리고, js 파일이 크면 사용자가 웹사이트를 보는데까지 시간이 오래 걸린다.
2. <body> 안에 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>장점 : 사용자가 기본적인 HTML을 빠르게 볼 수 있다.
단점 : JavaScript에 의존적인 웹사이트라면 = 사용자가 의미있는 컨텐츠를 보기 위해서 js가 필요하다면 사용자가 정상적인 페이지를 보기까지 기다려야하는 시간이 필요하다.
3. <head> 안에 <asyn>를 추가해서 넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
<script asyn src="main.js"></script>
</head>
<body>
</body>
</html>장점 : <body>안에 넣는 것보단 빠르게 사용자가 볼 수 있다.
단점 : 여전히 시간이 소요된다.
4. <head> 안에 <defer> 를 추가해서 넣기
* 가장 효율적, 안정적인 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>장점 : parsing HTML 동안 필요한 js를 다운 받아서 먼저 사용자에게 HTML을 보여준 다음에 바로 이어서 js를 실행하게 된다.
Q. 여러 JavaScript 파일을 받을 땐 어떤 걸 사용하는 게 좋을까?
1. <asyn>의 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
<script asyn src="a.js"></script>
<script asyn src="b.js"></script>
<script asyn src="c.js"></script>
<script asyn src="d.js"></script>
</head>
<body>
</body>
</html>단점 : 정의된 Script 의 순서에 상관없이 다운로드가 완료된 js부터 실행하기 때문에 "순서에 의존적인 JavaScript"라면 문제가 될 수 있다.
2. <defer>의 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scake=1.0">
<title>Document</title>
<script defer src="a.js"></script>
<script defer src="b.js"></script>
<script defer src="c.js"></script>
<script defer src="d.js"></script>
</head>
<body>
</body>
</html>장점 : <asyn>와는 다르게 정의한 Script 순서대로 실행한다.
바닐라 JavaScript 파일 맨 위에 꼭 써야하는 것.
'use strict';
'use strict';
//이하 상관없음
console.log('');써야하는 이유 : JavaScript는 굉장히 유연한 언어이기 때문에 오히려 개발자가 많은 실수를 할 수 있기 때문이다. 또한 엔진을 좀 더 효율적이고 빠르게 사용할 수 있다.
공부한 영상
'JavaScript' 카테고리의 다른 글
| [22.02.12] JavaScript - let(1주차) (0) | 2022.02.12 |
|---|