[자바스크립트] 1. 기초 개념(async vs defer, use strict)

김학재·2021년 1월 20일
0

자바스크립트

목록 보기
2/17
post-thumbnail

html에서 자바스크립트를 포함할 때는 script를 활용한다.

<script src="~~"></script>

사용자가 HTML 파일을 다운로드 받았을 때 브라우저는 이를 분석, parsing 후 CSS와 병합해 DOM 요소로 변환한다.

브라우저가 script 문을 만나게 되면 HTML 문을 parsing 하다가 자바스크립트 문을 다운로드, 실행 후 다시 HTML 문을 parsing 하게 된다. 이 때, 자바스크립트 파일의 용량이 매우 크거나 인터넷 속도가 느리다면 브라우저의 속도가 현저하게 느려진다. 이를 해결하기 위해 다음과 같은 2가지 방법이 존재한다.

1. async

<script async src="~~"></script> 

위와 같이 선언하게 되면 HTML 문을 parsing 하다가 자바스크립트 문을 다운로드 후 완료되면 parsing을 멈추고 자바스크립트 문을 실행하게 된다.

이는 다운로드 시간의 절약이 가능하나 자바스크립트가 HTML보다 먼저 다운로드되므로 존재하지 않는 요소에 대한 에러가 발생할 수도 있다.

2. defer

<script defer src="~~"></script>

위와 같이 선언하게 되면 HTML 문을 parsing하다가 자바스크립트 문을 다운로드 받고, HTML 문의 parsing이 완료되면 자바스크립트 문을 실행하게 된다.

다수의 스크립트 문을 다운로드 받는 경우에도 async의 경우 다운로드가 되는 대로 자바스크립트 문이 실행되기 때문에 바라지 않는 결과가 나올 수도 있다. defer의 경우 필요한 자바스크립트 문을 다운로드 받은 후 순서에 따라 실행이 된다.


use strict

developer mozila - Strict mode
자바스크립트에서만 사용 가능한 비상식적인 코드들의 사용을 제한한다.
존재하지 않는 변수에 값을 할당하는 등의 오류를 잡아낼 수 있다.

profile
YOU ARE BREATHTAKING

0개의 댓글