JavaScript에 궁금한 점이 있을때 들어가는 사이트!
MDN은 모든 프로그래머들이 애용하는 사이트 이다!
JavaScript를 HTML에 효율적으로 포함 시키는법
1. head안에 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>
<script src="variable.js"></script>
</head>
<body>
</body>
</html>브라우저는 html문서를 위에서 한줄씩 parsing하다가 JS파일이 나오면 parsing을 멈추고 JS파일을 다운받고 실행한 다음에 다시 HTML을 parsing 한다.
단점
만약 JS파일의 크기가 아주 크다면(JS파일에 의존하고 있다면) 사용자가 웹페이지를 로딩하는데 시간이 많이 걸린다.
2. body안의 제일 밑에 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>
.
.
.
.
.
<script src="variable.js"></script>
</body>
</html>HTMl문서의 Parsing이 전부 끝난 후 JS파일을 서버로 다운받고 실행시킨다
단점
혹시 페이지가 JS에 많이 의존하고 있거나 JS에 많은 효과를 주고 있는 페이지라면 사용자가 원하는 컨텐츠를 보여주기까지의 시간이 많이 소요가 된다.
3. head안에 script를 쓰되 속성에 asyn를 사용할 때
<!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 aysn src="variable.js"></script>
</head>
<body>
</body>
</html>
- HTML Parsing중 aysn이 있는 경우 병렬로 JS파일을 서버로부터 받는다
- JS파일의 다운이 끝나면 HTML Parsing을 멈추고 JS파일을 실행한다
- 실행이 끝나면 나머지 HTML을 Parsing한다
장점
Parsing 하는 도중에 병렬로 처리를 하기 때문에 다운받는 시간을 절약할 수 있다
단점
- HTML이 Parsing되기 전에 JS파일을 다운받기 때문에 혹시 JS파일을 처리할때 일정 부분은 아직 Parsing이 안되어 있을 가능성이 있기에 조금 위험할 수 있다.
- JS파일을 실행할때 Parsing이 잠시 멈추기 때문에 페이지 로딩이 조금 길어질 수 있다.
4. head안에 script를 쓰되 속성에 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="variable.js"></script>
</head>
<body>
</body>
</html>Parsing을 할때 JS파일을 먼저 다운을 받아놓고 Parsing이 끝나면 그때 JS파일을 실행시킨다
장점
병렬로 JS파일을 다운받으면서 사용자에게 먼저 컨텐츠를 보여준후 JS파일을 실행시킨다
5. aysn과 defer의 차이점
aysn은 먼저 다운을 받은 JS파일이 먼저 실행이 되기 때문에 원하는 순서대로 파일을 실행 시킬 수가 없다.
이건 내 생각이지만 JS파일이 많은 경우 HTMLParsing이 자주 멈추기 때문에 웹로딩에 많은 시간이 걸릴 것 같다
defer는 Parsing하는 동안에 JS파일을 다운 받고 개발자가 지정한 순서대로 실행이 된다는 장점이 있다
6. 추가적으로 해주면 좋은 것
바닐라 JS파일 위에 'use strict';를 해주는 것이 좋다
WHY?.🤔?
선언되지 않은 값을 할당한다던지 기존의 프로토타입을 변경하는 위험한 일이 생길 수 있으므로 미리 방지하고자
'use strict'; 을 맨 위에 써줘야 한다
예를 들면
a=1;
이렇게 변수를 생성하면 'use strict';을 안썼을때는 브라우저에 아무런 문제가 없지만
다른언어에서는 에러가 난다
그렇기 때문에 상식적인 선에서 변수를 생성해야 되기때문에
'use strict';
let a = 1;
이렇게 써야지 에러가 나지 않는다
