[javascript] async와 defer 그리고 'use strict'

브라우저는 위에서 아래로 코드를 읽는다. (파싱)

그러므로 html을 읽다가 script태그를 만나면 브라우저는 script를 먼저 실행해야하므로

비교적 가벼운 html을 읽을 때보다 오랜 시간이 걸리게 된다.

 

 

이러한 브라우저의 동작 방식엔 두가지 문제점이 있다.

 

1. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해진다.
2. 페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막아버려, 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 된다.

 

 

async와 defer는 위의 문제점을 해결하기 위한 속성이다.

 

async

 

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

 

async 속성을 사용하게 되면 브라우저는 html을 읽다가 script를 만났을 때,

파싱을 멈추지 않고 백그라운드에서 script를 다운로드를 시작한다.

 

html을 끝까지 읽기 전에 script 다운로드가 끝난 경우, 파싱을 잠시 멈추고 script가 실행된다.

만약 async가 여러 개인 경우에는 다운로드가 끝난 script부터 실행되게 된다.

 

script 다운로드가 완료되면 파싱을 멈추고 script를 먼저 실행하기 때문에

아직 덜 읽혀진 html의 요소를 script에서 활용해야 할 때 충돌이 일어날 수 있고,

script 실행 시 파싱을 멈추기 때문에 사용자가 화면을 보는 데에 시간이 조금 걸릴 수 있다.

 

 

 

 

defer

 

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

 

defer 속성을 사용하게 되면 async 속성을 사용했을 때와 같이 브라우저는

파싱을 멈추지 않고 백그라운드에서 script를 다운로드를 시작한다.

 

html을 끝까지 읽기 전에 script 다운로드가 끝난 경우, html을 다 읽을 때까지

script는 실행되지 않는다.

 

만약 defer이 여러 개인 경우에는 파싱이 끝난 후 다운로드가 먼저 끝난 script부터 차례대로 실행되게 된다.

 

 

 

 

 

'use strict' 선언

 

'use strict';

 

javascript를 사용하기 전 최상단에 'use strict'를 선언해주는 것이 좋다.

 

javascript는 선언 되지 않은 변수를 사용하는 등 오류가 많기 때문에 'use strict'를 선언해주면

이런 오류들을 인식하여 오류를 방지하는 데 도움이 된다.