개발을 시작할때 한번쯤 공부하지만
세월이 지나면서 잊게되는 HTML 로드 순서.
그치만 웹 개발자라면 잊어서도 안되고 계속해서
공부해야한다.
브라우저는 계속 발전하기 때문에 새로이 업데이트 되는 사항들을 놓치지 말자.
--------------------------------
HTML이 브라우저에 의해 호출되면
기본적으로 위에서 아래의 순서로 파싱된다.
<html>
<head></head>
<body>
<div>
<p>Hello world</p>
</div>
</body>
</html>위와 같다면 문제없이 위에서 아래로 파싱되며
끝이 난다.
문제는 script 태그를 만났을때다.
브라우저는 HTML을 읽다가 script 태그를 만나면
파싱을 중단하고 script태그를 다운로드 및 파싱한다.
여기서 두가지 문제가 발생한다.
[ 브라우저가 script 태그를 만났을 때, 발생할 수 있는 두가지 문제 ]
1. script 태그가 다운로드 되고 실행되는 것을 기다리느냐, 페이지 로딩이 지연된다.
2. script 태그가 하단의 dom 요소들 보다 먼저 파싱되기 때문에,
script 태그에서 dom요소에 접근하여 이벤트 핸들러를 등록하는 등의 행위가 불가능하다.
2번의 문제로 HTML, Javascript를 처음 배울때면
body 가장 밑쪽에 script태그를 배치하라고 배우게된다.
하지만, 그것만으로 모든 문제가 해결될까?
그것은 아니다.
페이지에서 핵심적으로 작용하는 script가 최하단에서 다운로드 및 파싱된다면
사용자가 끔찍한 화면을 본다거나,
에러상황을 마주하게 될 수 있다.
그리고 최신 웹사이트들은
써드파티 라이브러리를 많이 사용하다보니
script 태그를 예전보다 더 적극적으로 많이 사용하게된다.
혹은, 번들러를 통해 빌드하게되면
html에 상당히 많은 script 태그가 자동으로 추가된다.
페이지에 필수적으로 적용되는 script태그를
계속해서 페이지 최하단에 위치시킬것인가?
--------------------------------
그래서 script 태그에는 defer와 async라는 속성이 존재한다.
먼저, defer를 알아보자.
<html>
<head>
<script defer src="cdn-subway-tastgood.js" />
</head>
<body>
<div>
<p>Hello world</p>
</div>
</body>
</html>위 처럼 defer가 적용된 script가 있을때
HTML의 로드 순서는 어떻게될까?
script는 완전히 독립적으로 실행되게 된다.
브라우저는 HTML을 읽다가 script를 만나도
파싱을 중단하지 않고 계속해서 아래로 파싱해나간다.
HTML을 읽다가 script 태그를 마주친 순간부터
script는 백그라운드(Background)에서 다운로드 된다.
defer script의 실행은 domContentLoaded 직전에 실행된다.
(* domcontentloaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생하는 이벤트이다.)
따라서, 어느정도 실행 순서가 보장되며
페이지 로딩 속도를 지연시키지 않기 위한 방법이라고 볼 수 있다.
그렇다면 async는 어떨까?
<html>
<head>
<script async src="cdn-lotteria-tastgood.js" />
</head>
<body>
<div>
<p>Hello world</p>
</div>
</body>
</html>async가 적용된 script를 만났을때 역시
파싱이 중단되지 않고 진행된다.
마찬가지로, 백그라운드에서 script가 다운로드된다.
async는 defer와 실행순서에 있어 차이가 있는데,
defer가 domcontentloaded 직전의 실행 시점을 갖는 반면
async는 백그라운드에서 다운로드가 완료된 순가 실행된다.
따라서, async는 그 실행순서가 보장되지는 않는다.
그래서 async는 써드파티 스크립트 중에서도
페이지의 핵심 기능과 독립적인 기능으로 동작하는..
예를들어, 광고나 페이지 방문자수 카운터 등에 사용된다.
'개발, 코딩 > 일반상식' 카테고리의 다른 글
| MVC / MVP / MVVM 이해하기 (2) | 2022.09.23 |
|---|---|
| 테스트 코드를 작성하는 노하우 (0) | 2022.08.08 |
| 내가 보다 나은 개발자가 되기 위한 조언 (0) | 2022.03.04 |
| [이니시스] 아임포트 없이 결제 연동하기 5탄 (CSR 환경) (3) | 2021.07.30 |
| [이니시스] 아임포트 없이 결제 연동하기 4탄 (CSR 환경) (0) | 2021.07.30 |