dev_eun
[JS] HTML에서 javascript 파일 옵션 + use strict 본문
html에서 script를 포함할 때
1. <head> 안에 있는 경우
브라우저가 html 파싱을 할 때 blocking 된 후 js파일을 로드한다.
단점 : 만약 파일이 클 경우 웹페이지가 보이지 않을 수 있다.
2. <body> 맨 끝에 있는 경우
파싱이 모두 끝난 후 js 파일을 로드한다.
단점 : 웹사이트가 js에 의존적일 경우(서버 데이터 받아옴, UI 꾸미기 등) fetching하기까지 오래걸릴 수 있다.
3. async
<script async src="main.js"></script>js 파일을 병렬로 로드하고 blocking이 되지 않고 파싱을 계속한다.
단점
- 파싱이 끝나기도 전에 js파일이 fetching이 되면 js에서 조작해야 할 DOM 요소가 정의되지 않을 수 있다.
- js를 실행할 때 파싱이 blocking이 될 수 있다.
- 스크립트가 정의된 순서되로 실행되는 것이 아니라 로드가 완료된 순서대로 실행된다. 때문에 순서에 의존적인 script일 경우 문제가 발생할 수 있다.
4. defer
<script defer src="main.js"></script>js 파일을 병렬로 로드하고 fetching한다. HTML이 모두 파싱된 후 script가 정의된 순서대로 실행된다.
제일 효율적이고 안전!
use strict
'use strict';
console.log('Hello World!');선언하지 않은 변수에 대해서 에러를 발생하게 된다.
728x90
'Web > vanilla js' 카테고리의 다른 글
| [JS] 함수 (0) | 2021.06.28 |
|---|---|
| [JS] 데이터 타입, let/var, hoisting (0) | 2021.06.28 |
| [JS] javascript map, filter, find 함수 (0) | 2021.04.29 |
| [JS] c++ 에서 javascript로 갈아타기 - 기본 코테 함수 (0) | 2021.04.29 |