async & defer / Strict Mode

1. async vs defer

Boolean 속성값으로 선언 시 자동으로 true 설정됨
외부 스크립트를 참조하는 경우에만 사용할 수 있으므로, src속성이 명시된 경우에만 사용할 수 있음

2. async

<script async src="main.js"></script>

병렬구조로 HTML을 보여주면서 JS파일을 fetching(다운)
fetching이 완료되면 HTML 실행시키던 것 멈추고 다운로드된 JS파일을 executing(실행)
executing이 끝나면 나머지 HTML을 parsing

장점

다운로드 시간을 절약할 수 있음

단점

자바스크립트를 실행하는 과정에서 DOM을 통해 조작하려는 요소가 HTML에서 아직 정의되지 않았을 수도 있음
HTML parsing되는 동안에 스크립트도 실행되며, 스크립트가 실행될 때 parsing이 멈추기 때문에 브라우저 준비가 속도가 늦어짐 → 사용자가 페이지를 보는 시간이 오래걸림
순서대로 JS가 실행되는 것이 아니라 parsing이 먼저 끝나는 순서대로 실행이 되어서 순서가 중요한 작업의 경우 문제가 생길 수 있음

3. defer

<script defer src="main.js"></script>

HTML을 parsing 하는 동안 script defer을 만나면 필요한 JS파일을 다 다운로드 받아 놓음
HTML parsing을 먼저해서 사용자에게 바로 페이지를 보여 줌
바로 이어서 다운로드 된 자바스크립트 실행

defer을 쓰는 것이 가장 효율적이고 안전한 방법!

HTML을 parsing하는 동안 필요한 JS 파일을 다 다운로드 받아 놓고 순서대로 실행하기 때문에 개발자가 정의 한 순서가 지켜짐 → 개발자가 원하는 대로 스크립트가 실행 됨

3. Strict mode(엄격 모드)

// Whole-script strict mode syntax
// Javascript is very flexible
// but flexible === dangerous
// added ECMAScript 5
// use this for Vanila Javascript

'use strict';

console.log('Hello World!');

Vanilla JavaScript를 이용할때는 'use strict' 를 사용하는 것이 좋다!

Why? 자바스크립트는 굉장히 유연하기에 개발자가 많은 실수를 할 수 있기 때문에 때론 위험할 수도 있음

ECMAScipt 5에 추가되어져 있고 기존에는 무시되던 에러들을 막아주므로, 자바스크립트 엔진이 좀 더 효율적이고 빠르게 분석할 수 있도록 함

PreviousJavaScript 역사 NextVariable / Hoisting / Data Type

Last updated 3 years ago

2. async

<script async src="main.js"></script>

병렬구조로 HTML을 보여주면서 JS파일을 fetching(다운)

fetching이 완료되면 HTML 실행시키던 것 멈추고 다운로드된 JS파일을 executing(실행)

executing이 끝나면 나머지 HTML을 parsing

장점