1.Javascript 환경설정
1. script 의 위치
첫번째 위치 : HTML을 parsing(분석) 하다가 script를 다운받고(fetching) 실행(executing)한뒤에 , 그다음에 다시 HTML을 parsing 하는 형태
<!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>
단점 : JS파일의 크기가 어마어마하다면, 그 JS파일을 다 다운로드 받을때가지 나머지 HTML이 Parsing을 못하게 된다. 즉 사용자가 웹사이트를 볼때가지 오랜시간이 걸리게 된다.
두번째 위치 : HTML을 parsing(분석) 을 다 하고나서 JS을 다운받고(fetching) 시작(executing)한다.
<!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>
<script src="main.js"></script>
</body>
</html>
단점 : 사용자가 기본 HTML을 본다는 장점이 있겟지만, 우리의 사이트가 JS에 굉장히 의존한다면 즉 사용자가 의미있는 콘텐츠를 보기 위해서는 예를들어 사용자가 움직이는 배너광고를 보기 위해서는 JS가 동작을 해야하는데, 그러지 못하게 되므로 사용자 입장에서 불편함이 있을수 있다.
세번째 위치 : 첫번째와 같은 위치이지만 , 비동기적(async)으로 동작하도록 만들시 HTML을 Parsing하는 중에 JS도 다운(fetching)과 실행(executing)하고 실행한뒤에 나머지 HTML을 Parsing한다. 따라서 HTML에서 조작하려는 요소가 정의가 미리 안되어있을수가 있다. 참고로 JS를 실행하는 기간은 동기적으로 작동을 하므로 사진처럼 blocked 되는 기간이 있다.
<!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 async src="main.js"></script>
</head>
<body></body>
</html>
장점 : JS를 다운로드 받는 시간을 줄일수 있다.
단점 : 하지만 HTML을 하기도 전에 JS가 실행이 되므로, DOM같은거를 사용해 조작하려고 할때 그 조작하려는 요소가 정의가 미리 안되어있을수가 있다. 또한 사용자가 페이지를 보는 시간도 조금 걸릴수가 있다. 또한 다수의 script를 받을때에도 script 위치 순서대로 다운받고 실행하므로 그 기간동안에 계속 블록되는 시간이 늘수 밖에 없다.
네번째 위치 : HTML을 Parsing(분석) 하다가 script를 만나면 , JS를 다운로드를 비동기적으로 받되, 실행은 HTML이 다 parsing된 다음에 JS를 executing 한다. (가장 좋은방법)
<!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></body>
</html>
결론 : 네번째를 사용하자
2. strict를 사용하자
why? javascript는 너무 flexible 하기 때문에 , let const 같은것들이 선언되어있지 않고 a=6; 만 하더라도 아무 문제가 되지 않기 때문이다. 허나 이것은 개발자의 입장에서 매우 문제가 되는 부분이다.
"use strict";
console.log("Hello World");
Leave a comment