JS 포함 시점
Html파일에 JavaScript파일을 효율적으로 포함하는 방법을 알아보려고 한다.
1. head +defer
작동 순서
- 사용자가 HTML파일을 다운받는다.
- script태그가 보이면 js를 다운받고 실행하게 된다.
- js 실행 완료 후 다시 HTML파일을 파싱한다.
단점
JS파일이 크고 인터넷 속도가 느릴 때 웹사이트 로딩 시간이 길어진다.
2. body안에 script 포함
작동 순서
- 사용자가 HTML파일을 전부 다운받는다.
- 페이지 준비 완료 후 js를 다운받고 실행하게 된다.
단점
기본적인 HTML의 콘텐츠를 빨리 보는 장점은 있지만, JS의 의존성(서버 데이터, DOM 요소 등)에 따라 성능이 달라진다.
3. head + async
작동 순서
- HTML을 다운로드 받아서 파싱하다 async js를 만나면 작업을 동시에 진행한다.
- js파일이 다운이 완료되면 HTML파싱을 멈추고 JS를 실행한다.
- 남은 HTML 부분을 다시 파싱한다.
단점
Body에서 사용하는 것보다는 Fetching이 병렬적으로 작동되기 때문에 다운로드 시간을 절약할 수 있지만, js가 html이 파싱되기 전에 실행되기 때문에 js에서 query selector을 이용해서 DOM요소를 조작한다고 했을 때 HTML에 아직 원하는 요소가 아직 정의되지 않았을 수가 있어 위험하다.그리고 HTML을 파싱하는 동안에 언제든지 JS를 실행하기 위해 파싱이 멈추므로 여전히 HTML로딩 시간에 문제가 있을 수 있다.
4. head + defer
작동 순서
- HTML을 다운로드 받아서 파싱하다 defer js를 만나면 js 다운로드 작업만 명령 후 계속 작업을 진행한다.
- HTML을 끝까지 파싱한다.
- HTML 파싱이 끝난 후 다운로드 받은 js를 바로 실행한다.
HTML 파싱과 Js파일 다운로드를 동시에 진행하고 HTML 파싱이 완료되면 다운로드 작업이 끝난 JS를 바로 실행시키기 때문에 가장 효율적이다
async vs defer
async
정의된 순서와는 상관없이 먼저 다운이 완료된 js파일부터 실행이 된다.
순서에 의존적일 경우 문제가 될 수 있다. (ex. b를 실행하기 위해 a가 선행되어야 하는 경우)
defer
다운로드 받은 후 HTML파일 파싱이 끝나는 동시에 JS는 정의된 순서대로 실행된다.
개발에 용이함, 원하는 대로 js파일 실행 가능
마지막 Tip!
바닐라 Script로 문서 작성시 'use strict'; 를 선언하는 것이 좋다 (TypeScript는 해당 안 됨)
// Whole-script strict mode syntax
// JavaScript is very flexible
// flexible === dangerous
// added ECMAScript 5
'use strict';
// if not existed ['use strict';], the file works.
a = 6;
console.log('Hello world');why?
ES5에 추가된 'use strict' 는 비상식적 행동을 사용하지 못하게 제한하는 것이다.
JS는 flexible한 언어이다.
규격이 엄격하지 않아 유연하고 빠르게 개발할 수 있지만
반대로 그만큼 유연하여 개발자가 많은 실수를 할 수 있는 요소가 많다는 뜻이다.
비상식적 행동 예시 : 선언되지 않은 변수 값 할당, 기존 존재하는 프로토타입 변경
출처
