[Javascript] - 기초 01. async, defer


JavaScript를 HTML 파일에 불러 오는 방법

...

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

...

<body>

...

</body>

이렇게 하면 HTML 구조 안에서 순서대로 진행하기 때문에 script문서를 도중에 불러 오게 된다.

그렇기 때문에 js 파일이 크다면 중간에 load 하느라 화면이 불러오는데 delay가 발생할 수 있다.

옛날에는 그래서 script구문을 맨 아래에 넣는 방법으로 대처하였었다.

하지만 이 방법도 javascript에 의존적인 웹사이트면 결국 기다려야하는 문제가 발생한다.

async


그래서 비동기로 js 파일을 불러오는 async 방법이 있다.

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

하지만 이 방법도 js파일이 여러개이면서 서로 js파일이 의존적이라면 문제가 발생 할 수 있다.

js파일들이 동시에 불러와지고 실행이 동시에 되면 의존성 문제가 발생 할 수 있다.

defer


그래서 defer를 쓰면 이 문제가 해결된다.

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

defer는 async처럼 파일들을 비동기로 불러오지만 실행은 순차적으로 진행되기 때문에 (html이 준비가 되고 나서)

의존성 문제가 발생하지 않는다.

앞으로 defer를 써서 js를 불러오자.

추가로 항상 JS 코딩 할 때 'use strict'; 를 사용하자 문법을 강화해 에러를 사전에 어느정도 방지(?) 할 수 있다.