자바스크립트는 파서 차단 리소스(parser blocking resource)입니다.

브라우저는 HTML을 파싱 하다가 자바스크립트를 만나면 진행하던 파싱을 중단하고 자바스크립트 리소스를 다운로드해 파싱하고 실행합니다.

브라우저는 <script> 를 만나면 파싱을 차단하고 리소스를 다운로드하고, 파싱하고, 실행하기 때문에 화면을 렌더링 하는데 그만큼 시간이 소모되어 사용성이 떨어집니다. 이번 포스트에서는 <script> 를 비동기 처리하여 브라우저의 파싱을 차단하지 않는 방법에 대해 이야기할 것입니다.

<aside> 💡 JavaScript 코드 작성 방식 : inline / internal / External

• inline : 태그 내에 직접 자바스크립트 명령어를 작성하는 방법.
• internal : HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식
• External : HTML과 자바스크립트를 분리해서 외부 파일로 분리하는 방식 (확장자 js) </aside>

<script> 사용

*async 와 defer 모두 사용하지 않는 기본 모드입니다.*

*<script> 는 인라인 코드인 경우 파싱 되고 실행되지만 외부 스크립트인 경우 리소스를 다운로드하고, 파싱 되고, 실행됩니다. 브라우저는 스크립트 파일을 다운로드하고, 파싱 되고, 실행될 때까지 HTML 파싱을 중단합니다.*

위의 그림과 같이 기본적으로는 스크립트를 가져와서 실행이 끝날 때까지 HTML 파싱이 중단되어 화면이 출력되는 시간이 길어집니다.

<script ... async> 사용

*async 속성은 브라우저에게 스크립트 리소스 다운이 완료되면 파싱을 중단하고 스크립트 파일을 실행하라고 알려주는 역할을 합니다.*

위의 그림과 같이 async 속성을 추가할 경우, 스크립트 리소스를 다운로드 하는 동안에는 파싱이 중단되지 않습니다. 다운로드가 완료되면 HTML 파싱을 중단하고 스크립트를 실행합니다.

특징

스크립트의 실행 순서는 다운로드가 완료된 시점에 결정됩니다. 예를 들어