# html dom 성능개선 관련 async/defer 적용하기!
조금 더 빨리 dom을 구성하고 화면을 보여주기?
# 설명
참조: https://ko.javascript.info/script-async-defer
모든 내용은 아래 링크에 있습니다. 핵심 내용만 인용하여 글 씀.
1. dom 구성 프로세스
브라우저는 HTML을 읽다가 <script>...</script> 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다.
이는 src 속성이 있는 외부 스크립트 <script src="..."></script>를 만났을 때도 마찬가지입니다.
외부에서 스크립트를 다운받고 실행한 후에야 남은 페이지를 처리할 수 있습니다.
페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 ‘막아버립니다’. 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없게 됩니다.
2. defer
브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연 됩니다.
defer 스크립트는 DOM이 준비된 후에 실행되긴 하지만 DOMContentLoaded 이벤트 발생 전에 실행됩니다.
3. async
async 속성이 붙은 스크립트(이하 async 스크립트 또는 비동기 스크립트)는 페이지와 완전히 독립적으로 동작합니다.
async 스크립트는 defer 스크립트와 마찬가지로 백그라운드에서 다운로드됩니다.
따라서 HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력합니다(하지만 async 스크립트 실행중에는 HTML 파싱이 멈춥니다 – 옮긴이).
DOMContentLoaded 이벤트와 async 스크립트는 서로를 기다리지 않습니다.
- 페이지 구성이 끝난 후에 async 스크립트 다운로딩이 끝난 경우, DOMContentLoaded는 async 스크립트 실행 전에 발생할 수 있습니다
- async 스크립트가 짧아서 페이지 구성이 끝나기 전에 다운로드 되거나 스크립트가 캐싱처리 된 경우, DOMContentLoaded는 async 스크립트 실행 후에 발생할 수도 있습니다.
다른 스크립트들은 async 스크립트를 기다리지 않습니다.
async 스크립트 역시 다른 스크립트들을 기다리지 않습니다.
이런 특징 때문에 페이지에 async 스크립트가 여러 개 있는 경우, 그 실행 순서가 제각각이 됩니다.
실행은 다운로드가 끝난 스크립트 순으로 진행됩니다.
# 그림 설명
참조: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
1. <script>
<script type="text/javascript" src="/js/common/common-js-utils.js"></script>
어떤 속성도 없는 <스크립트>가 무엇을 하는지 정의하는 것부터 시작합시다. HTML 파일은 스크립트 파일이 히트할 때까지 구문 분석되며, 그 시점에서 구문 분석이 중지되고 파일을 가져오도록 요청이 생성됩니다(외부 파일인 경우). 그런 다음 구문 분석을 다시 시작하기 전에 스크립트가 실행됩니다.
2. <script defer>
<script defer type="text/javascript" src="/js/common/common-js-utils.js"></script>
HTML 구문 분석 중에 파일을 다운로드하고 파서가 완료된 후에만 파일을 실행합니다. 또한 지연 스크립트는 문서에 나타나는 순서대로 실행됩니다.
3. <script async>
<script async type="text/javascript" src="/js/common/common-js-utils.js"></script>
async는 HTML 구문 분석 중에 파일을 다운로드하고 다운로드가 완료되면 HTML 파서를 일시 중지하여 실행합니다.
# TEST
<script defer type="text/javascript" th:src="@{/js/bootstrap-4.6.1/bootstrap.js}"></script>
<script defer type="text/javascript" th:src="@{/js/bootstrap-4.6.1/bootstrap.bundle.js}"></script>
<script async type="text/javascript" th:src="@{/js/datatables-1.11.3/datatables.js}"></script>
<script async type="text/javascript" th:src="@{/js/datatables-1.11.3/dataTables.dateTime.js}"></script>
<script async type="text/javascript" th:src="@{/js/datatables-1.11.3/dataTables.moment.js}"></script>
- async로 다운로드 받은 script가 DCL(document ready) 이후 다운로드 되는 경우!
# 내용
기본기를 잡고 간다는 생각을,,, dom구성의 프로세스를 알아가는 겸!
스타일은 <head>안에,, script는 <body> 안에, 최 하단으로!
'자바스크립트' 카테고리의 다른 글
| [JavaScript] async, await를 이용한 ajax 통신 (0) | 2022.09.10 |
|---|---|
| [JavaScript] async, await 테스트 (2) | 2022.09.10 |
| [Vanilla JS] fetch - POST, application/json 로 요청하기! (0) | 2022.09.04 |
| [Vanilla JS] fetch - POST, application/x-www-form-urlencoded 로 요청하기! (0) | 2022.09.04 |
| [Vanilla JS] fetch - GET, application/x-www-form-urlencoded 로 요청하기! (0) | 2022.09.04 |