async 와 defer의 비교

html에 javscript를 포함하는 방법은 여러가지가 있다.

1. head 태그에 안에 속성없이 script태그를 포함하여서 사용 하는 경우

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

사용자가 html 파일 즉, 웹페이지를 로딩하면 브라우저가 코드의 가장 상단부터 한줄씩 코드를 읽고 실행한다. 위와같이 코드를 작성할 경우 html 코드를 파싱하다가 script태그를 만나면 html을 파싱하는 과정은 잠깐 멈추고 해당 스크립트 파일을 다운로드하고 곧 바로 실행하고 나서야 html을 파싱한다. 이 경우, html의 로딩이 javascript 코드가 모두 실행되고 난 후 진행되므로 많은 시간이 소요되고 사용자의 입장에서는 웹페이지의 로딩이 느리다고 느낄 수 있다.

2. body의 끝에 script를 추가

body끝에 script요소가 있다면 html을 모두 파싱하고 나서 javascript를 다운로드받고 실행하게된다. 페이지가 가장먼저 로드되므로 사용자입장에서는 빠르게 로딩될 수 있으나 만약 웹사이트가 자바스크립에 의존적이라면 정상적으로 화면이 로딩될 수 없어 다시 자바스크립트의 다운로드, 실행시간을 기다려야 한다.

3. head안에 script를 이용하되 async라는 속성값을 사용

async를 사용하면 html을 파싱하다가 script요소를 만난다면 html파싱과 동시에 js파일을 다운받는 병렬구조로 작업이 진행된다. 이후 js파일 다운로드가 완료되면 html 파싱을 멈추고 js를 실행하고 남은 html을 파싱한다. 시간은 감소하나 자바스크립트내에서 돔요소를 조작한다면 오류가 발생할 수 있다. 그리고 여전히 js를 실행할 때 html의파싱이 멈추므로 사용자 경험에 부정적인 요소가 존재한다.

4. ead안에 script를 이용하되 defer 속성값을 사용

defer속성을 사용하면 html을 파싱하다가 script요소를 만났을때 js파일의 다운로드와 html의 파싱이 병렬구조로 진행된다. 여기까지는 async와 유사하나 defer의 경우 js파일의 실행을 다운로드 직후가 아닌 html파싱이 완료되고 나서 마지막에 진행한다. 이 경우 병렬구조로 진행되므로 다운로드 시간을 감소하며 html이 먼저 로딩되므로 사용자는 로딩된 화면을 먼저볼 수 있다. 또한 html ,js가 서로 의존적이여도 실행 시간을 최소화할 수 있는 가장 효율적인 방법이라고 할 수 있다.

+ 여러개의 script를 실행할 경우

async를 사용하면 작성순서, 의도와는 무관하게 다운로드가 완료되는 순서대로 실행이 되므로 js 파일이 순서에 의존적이라면 정상적으로 작동하지않을 수 있다.
반면 defer를 사용하면 다운로드를 모두 완료 후 위에서부터 차례대로 실행되므로 원하는 순서대로 실행이 가능하다.

use script

javascript를 사용할 때, use strict를 선언하는것이 좋다.
자바스크립트는 매우 유연한 언어이므로 하위호환을 위해 새롭게 제정된 ES5에서 더이상 존재하지 않는 기능들도 사용할 수 있도록 지원한다.새롭게 정의된 변경사항이 제대로 실행되게 하기 위해서는 use strict를 선언하여 해당 스크립트는 ES5 문법을 따르겠다는 'use strict' 선언이 필요하다.
! use strict는 반드시 최상단에 위치시켜야한다.

ref:
javascript.ingo
elly 드림코딩

Author And Source

이 문제에 관하여(async와 defer 그리고 use strict), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pro-yeong/async와-defer-그리고-use-strict

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

async와 defer 그리고 use strict