async와 defer 그리고 'use strict'

 

대부분 html파일에 script태그를 이용하여 js 파일을 사용한다. 

하지만 이럴 경우의 수행 순서는

이렇게 되는 데 이때 JS파일이 클 경우 사용자는 웹사이트를 보는 데 걸리는 시간이 오래 걸린다. 따라서 이 문제를 해결하기 위해 async와 defer라는 속성 값을 이용해볼 수 있다. 

 

async

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

이렇게 속성 값을 추가할 수 있고 순서는 이렇게 된다. 

이렇게 설정을 해놓았을 경우, 좀 더 빠르게 html을 parsing할 수 있지만 queryselector를 통해 dom요소를 조작하려고 한다면, 원하는 html요소가 정리되어 있지 않을 가능성도 있다. 또한 js를 실행할 때는 역시 멈추기 때문에 js가 클 경우 사용자가 웹사이트를 보기 까지 시간이 좀 걸릴 수 있다. 만약 밑에 처럼  다수의 script태그를 추가한다면 

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

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

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

순서에 상관없이 js를 fetching 하고 끝날 때마다 실행하여 html이 멈추게 된다. 

 

 

defer

defer 속성 값은 HTML을 parsing하면서 같이 js를 fetching하고 html parsing이 다 끝난 다음에 js를 실행한다. 

하지만 defer 속성 값을 사용했을 경우, 여러개의 js파일을 우선 fetching을 다 한 다음에 html parsing을 다 끝마친 후 js를 실행하기 때문에 js도 적은 순서대로 실행할 수 있다. 

 

use strict

마지막으로 자바 스크립트는 급하게 만들어지다보니 유연한 언어라 개발자들이 혼동하기 쉬워 상단에 use strict를 선언하여 조금 더 상식적인 범위 내에서 자바스크립트를 이용할 수 있게 된다.