[Web front-end] script 위치와 defer async

브라우저를 렌더링 하는데, 

다음과 같은 레이어를 가지고, 각각의 역할은 아래 링크 보기.

 

 

 

렌더링 엔진에 주목할 것인데, 

렌더링 엔진은 HTML, CSS를 파싱한 결과물로 페이지를 화면에 표시하고 JS를 해석한다.

 

그 과정에서 파싱을 진행하는데, 

파싱은 가장 작은 단위로 쪼개진 코드(토큰)를 구조화하는 과정이다.

입력받은 문자열이 정해진 문법(grammar) 들을 모두 따르는지를 어휘와 규칙은 맞았는지 확인을 한다.

 

브라우저는 HTML, CSS, JavaScript 세 종류의 언어를 해석할 수 있고, 그 중에서 JavaScript는 별도의 레이어에서 언어를 해석한다. 따라서 렌더링 엔진에서는 HTML과 CSS만 파싱한다.

 

1. head 태그 내부에 script 태그

HTML은 파싱 도중, HTML은 파싱 도중, script 태그를 만나게 되면 중간에 파싱이 멈춘다.

파싱을 멈추고 다운로드 및 실행을 한 후 HTML파싱을 재개한다.

작은 웹은 그렇다 쳐도 만약에 script 파일이 너무 크고 무겁다면, 
HTML 파싱을 하다 만 화면을 사용자들에게 보여주고 말 것이며 이는 사용자 경험에 좋지 않은 영향을 미칠 것이다.
또한, HTML 파싱이 다 되기 전에 script 파일을 실행시키기 때문에
만약 script 파일이 DOM 요소를 조작한다면 존재하지 않는 DOM 요소에 접근하려는 시도로 예상치 못한 문제가 발생할 수 있다.

 

 

2. BODY 태그 마지막에 script 태그

HTML파싱을 마치고 script를 다운로드 및 실행한다.

이는 빠른 속도의 장점이 있지만, 스크립트 의존적이라면 스크립트 다운 및 실행을 기다려야만 한다.

 

 

3. async

async와  head 내부 위치

 

async는 HTML파일을 파싱하면서 script를 만나면 script를 다운로드 해두고, 다운로드 완료 후script를 실행 시킨다.

실행시키는 동안에는 HTML파싱이 멈추게 된다.

 

자바스크립트에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다는 점이 있지만, 결국에는 HTML파싱이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 그냥 head부분에 넣는 헤드에 스크립트를 넣는 상황에서 일어날 문제를 겪을 수 있다.

또한, 실행시켜야 할 script 태그가 여러개일 때, 순서에 상관 없이 먼저 다운로드 받아지는 script를 먼저 실행시키기 때문에 해당 프로젝트가 script 파일의 실행 순서에 영향을 받는다면 문제가 될 수 있다.

 

 

4. defer

defer은 HTML을 파싱하다 script 태그를 만나면 HTML을 파싱하면서 script는 동시에 다운로드만 시켜둔다.그 후 async와 다르게 HTML 파싱이 완료된 후에 script를 실행시킨다

이는 위의 방법들 중 가장 이상적이라고 할 수 있는데,

HTML파싱이 중간에 멈출 염려도 없고, body가장 하단에 script를 넣는 것의 단점도 개선시킬 수 있다.

여러개의 script 태그를 이용해도 미리 다운을 다 받고 HTML도 끝까지 파싱시킨 후에 순서대로 실행되기 때문에 async의 단점을 보완할 수 있다.

 

 

 

 

참고 블로그 : https://wormwlrm.github.io/2021/03/27/How-browsers-work.html

참고 블로그 : https://jae04099.tistory.com/entry/HTML-script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98-%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C