HTML 에서 JS 를 포함 할 때 어떻게 포함하는 것이 더 효율적일까?
1.
<head>안에<script>태그가 단순하게 포함 되어 있는 경우<head> <script src="main.js"></script> </head>🟡 순서
1. 사용자가html파일을 다운 받았을 때, 브라우저가 한 줄씩분석(parsing)한다.
2.parsing하다가,script태그가 보이면html파일의parsing을 멈추고
필요한js파일을 서버에서 다운받아서 실행한 다음에 다시parsing한다.
🔴 단점
만약js파일이 엄청 크고 인터넷이 엄청 느리다면?
사용자가 웹사이트를 보는 시간이 많이 소요되기 때문에 좋은 방법은 아니다.
2.
<body>내부 제일 끝에<script>태그를 추가 하는 경우<body> <script src="main.js"></script> </body>🟡 순서
1.parsing다 끝나고 나서js파일을서버에서 다운(fetching)한다.
🔵 장점
사용자가 기본적인html컨텐츠를 빨리 볼 수 있다
🔴 단점
만약 우리의 웹사이트가js에 굉장히 의존적으로 제작됐다면
즉, 사용자가 의미있는 컨텐츠를 보기 위해서는js파일이 필수적이라면
사용자가 정상적인 페이지를 보기 위해서js파일의parsing&fetching을 기다려야 함.
결국 이 또한 사용자가 웹사이트를 보는 시간이 많이 소요되기 때문에 좋은 방법은 아니다.
3.
<head>안에<script>태그에async속성이 포함되어 있는 경우<head> <script async src="main.js"></script> </head> // boolean` 타입의 속성값이라 선언하는 것 만으로도 `true`로 설정이 되어 사용 가능🟡 순서
1. 브라우저가parsing하다가async를 발견하면 병렬로js다운 명령만 하고
계속html파일을parsing한다.
2.js가 다운 완료되면 그때parsing을 멈추고 다운된js파일을 실행 한다.
3. 그리고 나머지html파일을parsing한다.
🔵 장점
다운로드 받는 시간 절약이 가능하다.
🔴 단점
htmlparsing전에html파일이 실행되기 때문에 만약js파일에서querySelector를 통해DOM을 조작 한다면 개발자가 원하는 요소가 정의되지 않을 수 있다.
parsing하는 동안 언제든지js의 실행을 위해 멈출 수 있기 때문에 사용자가 페이지를 보는 시간이 조금 더 소요 될 수 있다.
4.
<head>안에<script>태그에defer속성이 포함되어 있는 경우 (가장 좋음!)<head> <script defer src="main.js"></script> </head>🟡 순서
1. 브라우저가parsing하다가defer를 발견하면js다운 명령만 시켜놓고
나머지html파일을parsing한다.
2.parsing이 다 끝나면 다운된js파일을 실행 한다.
즉, 필요한 파일 받아놓고htmlparsing먼저 한 뒤,
사용자에게 페이지 보여준 다음js를 실행 하는 것
🔵 장점
다운로드 받는 시간 절약이 가능하다. 빠르게js파일을 실행 할 수 있다.
async 와 defer 의 차이
async
정의된 스크립트 순서 상관 없이 다운된 애들 먼저 실행 한다.
만약 우리의 웹사이트가 스크립트 순서에 의존적이라면 위험defer
정의된 스크립트 순서대로 실행한다.
번외
일반적인 바닐라JS 로 코딩 할 때,
'use strict';를 무조건 맨위에 선언하고 적는게 좋다고 한다.
자바스크립트는 아주 빠른 기간 동안 유연한 언어로 만들어졌기 때문에 때로는 위험하고,
그만큼 개발자들이 많은 실수를 할 수 있다는 것을 의미하기에
'use strict';를 적게 되면...
1. 상식적인 범위 안에서js를 사용 할 수 있다고 한다.
2.js엔진이 조금 더 효율적으로, 빠르게js를 분석 할 수 있고 성능 개선을 기대 할 수 있다.
출처: https://youtu.be/tJieVCgGzhs
