JavaScript : script async 와 defer, 'use strict'

 

script async & defer

 

 

 

JavaScript를 사용할 때 코드의 양이 별로 없으면 상관 없지만 그 양이 많을 때 Javascript 파일을 어떻게 HTML파일에 붙여야 효과적으로 코드가 실행이 될지 고민해야한다.

 

async 와 defer은 boolean 타입이여서 return처럼 그대로 사용하면 프로그램이 인식한다.

 

고려해야될 사항은 총 3가지 인데 Script가 다운받는데 걸리는 시간, Script가 실행되는데 걸리는 시간, Script가 실행되기 전에 필요한 HTML이 파싱이 되었는지이다. 이 세가지를 고려하면서 어떤 코드가 제일 효율적일지 생각해봐야 한다. async 또는 defer 이 들어가지 않은것이 제일 비효율적일 것이다. async, defer 중에서 어떤것이 나을지 봐야한다.

 

async

 

async를 넣게 되면 script가 다운될 때 HTML 파싱을 멈추지 않고 병합진행된다. 그리고 script가 다운되고나서 실행할 때 HTML 파싱이 멈춘다. 그리고 script가 실행이 끝나고 남은 HTML파싱을 마무리한다. HTML 파싱이 끝나기전에 script 실행이 끝나면 생기는 문제는 script가 실행될 때 필요한 HTML 코드가 파싱이 안되면 script가 정상적으로 실행될 수 없는 문제가 생긴다.

 

defer

 

defer을 넣게 되면 script가 다운될 때 HTML파싱을 병합해서 같이 하고 script 다운이 다 끝나도 HTML파싱이 끝날 때 까지 script를 실행하지 않고 기다리다가 HTML파싱이 끝나면 script를 실행한다. 3가지 고려사항에 만족하는 제일 효율적인 코드라고 볼 수 있다.

 

 

 

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

 

 

 

 

use strict

 

use strict는 JavaScript 제일 상단에 작성해서 사용할 수 있다. 이것에 기능은 flexible한 자바스크립트를 제어하는 역할을 한다.

• 기존에 무시되던 에러들을 throwing한다. 

• JavaScript가 최적화로 작동하기 위해 실수들을 잡아내고 더 빨리 코드를 실행 시킨다.

'use strict';

// 선언되지 않은 변수의 값을 에러로 처리한다.
a = 1;

// 이렇게 변수가 선언되어야 에러가 생기지 않는다.
let a = 1

---

출처: 앨리 드림코딩(자바스크립트), MDN(Strict mode)