html에서 자바스크립트를 포함할 때는 script
를 활용한다.
<script src="~~"></script>
사용자가 HTML 파일을 다운로드 받았을 때 브라우저는 이를 분석, parsing 후 CSS와 병합해 DOM 요소로 변환한다.
브라우저가 script
문을 만나게 되면 HTML 문을 parsing 하다가 자바스크립트 문을 다운로드, 실행 후 다시 HTML 문을 parsing 하게 된다. 이 때, 자바스크립트 파일의 용량이 매우 크거나 인터넷 속도가 느리다면 브라우저의 속도가 현저하게 느려진다. 이를 해결하기 위해 다음과 같은 2가지 방법이 존재한다.
async
<script async src="~~"></script>
위와 같이 선언하게 되면 HTML 문을 parsing 하다가 자바스크립트 문을 다운로드 후 완료되면 parsing을 멈추고 자바스크립트 문을 실행하게 된다.
이는 다운로드 시간의 절약이 가능하나 자바스크립트가 HTML보다 먼저 다운로드되므로 존재하지 않는 요소에 대한 에러가 발생할 수도 있다.
defer
<script defer src="~~"></script>
위와 같이 선언하게 되면 HTML 문을 parsing하다가 자바스크립트 문을 다운로드 받고, HTML 문의 parsing이 완료되면 자바스크립트 문을 실행하게 된다.
다수의 스크립트 문을 다운로드 받는 경우에도 async
의 경우 다운로드가 되는 대로 자바스크립트 문이 실행되기 때문에 바라지 않는 결과가 나올 수도 있다. defer
의 경우 필요한 자바스크립트 문을 다운로드 받은 후 순서에 따라 실행이 된다.
use strict
developer mozila - Strict mode
자바스크립트에서만 사용 가능한 비상식적인 코드들의 사용을 제한한다.
존재하지 않는 변수에 값을 할당하는 등의 오류를 잡아낼 수 있다.