자바스크립트는 파서 차단 리소스(parser blocking resource)입니다.
브라우저는 HTML을 파싱 하다가 자바스크립트를 만나면 진행하던 파싱을 중단하고 자바스크립트 리소스를 다운로드해 파싱하고 실행합니다.
브라우저는 <script>
를 만나면 파싱을 차단하고 리소스를 다운로드하고, 파싱하고, 실행하기 때문에 화면을 렌더링 하는데 그만큼 시간이 소모되어 사용성이 떨어집니다. 이번 포스트에서는 <script>
를 비동기 처리하여 브라우저의 파싱을 차단하지 않는 방법에 대해 이야기할 것입니다.
<aside> 💡 JavaScript 코드 작성 방식 : inline / internal / External
*async
와 defer
모두 사용하지 않는 기본 모드입니다.*
*<script>
는 인라인 코드인 경우 파싱 되고 실행되지만 외부 스크립트인 경우 리소스를 다운로드하고, 파싱 되고, 실행됩니다. 브라우저는 스크립트 파일을 다운로드하고, 파싱 되고, 실행될 때까지 HTML 파싱을 중단합니다.*
위의 그림과 같이 기본적으로는 스크립트를 가져와서 실행이 끝날 때까지 HTML 파싱이 중단되어 화면이 출력되는 시간이 길어집니다.
*async
속성은 브라우저에게 스크립트 리소스 다운이 완료되면 파싱을 중단하고 스크립트 파일을 실행하라고 알려주는 역할을 합니다.*
위의 그림과 같이 async
속성을 추가할 경우, 스크립트 리소스를 다운로드 하는 동안에는 파싱이 중단되지 않습니다. 다운로드가 완료되면 HTML 파싱을 중단하고 스크립트를 실행합니다.
스크립트의 실행 순서는 다운로드가 완료된 시점에 결정됩니다. 예를 들어