HTML렌더링 중 JavaScript가 실행되면 왜 렌더링이 멈출까?

 

렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다가

JavaScript를 만나면 DOM생성을 임시 중단한다.

DOM생성을 임시 중단하고, JavaScript코드를 파싱하기 위해 JavaScript엔진에 렌더링 제어권을 넘긴다.

JavaScript코드 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨준다.

중단된 부분부터 HTML 파싱을 재개하며 DOM트리를 생성한다.

 

 

JavaScript엔진과 렌더링 엔진은 직렬적으로 실행된다.

즉, 위에서부터 한줄씩 내려가며 코드가 실행되며, 한 엔진이 실행되면 다른 엔진에 실행 권한은 없다.

 

 

만일, script파일을 먼저 로드할 경우!!!

script문서가 파싱하는 동안 브라우저는 다른 작업을 수행하지 않기 때문에 스타일이 파싱되지 않은 상태가 되고

화면 레이아웃이 제대로 구성되지 않은 상태로 사용자에게 view를 제공하게 될 확률이 높다.

이렇게 되면 사용자 경험을 떨어뜨리는 결과가 나올 수 있다...

 

 

그렇다면 어떻게 해야할까?

script파일은 body태그 끝에 두는 것이 권장된다.

HTML문서가 화면에 표시되는 속도가 빨라지고, 사용자가 view를 보는데 필요한 문서의 파싱이 종료된 상태이기 때문에 불편이 감소된다.

 

 

HTML 파싱 블로킹현상을 해결하기 위한 async, defer가 HTML5부터 추가되었다.

이는 HTML파싱과 외부 JavaScript 파일 로드가 비동기적으로 동시에 진행되도록 만들어준다.

• async 
  • HTML파싱과 JavaScript파일 로드가 비동기적으로 동시에 진행된다.
  • JavaScript 실행은 로드되면 바로 진행되며 HTML파싱이 중단된다.
  • JavaScript파일 로드는 동기적으로 진행할 수 있지만 JavaScript파일이 바로 실행되므로 실행 순서를 보장할 수 없습니다.

 

• defer
  • HTML파싱과 외부 JavaScript파일 로드가 비동기적으로 진행된다.
  • HTML파싱이 완료된 직후(DOM생성된 이후) JavaScript가 실행된다.

 

---

파싱

하나의 프로그램을 런타임 환경이 실제로 실행할 수 있는 내부 포맷으로 분석하고 변환하는 것 의미.

문서의 내용을 token으로 분석하고, 문법적 의미와 구조를 반영한 parse tree를 생성하는 과정이다.

 

DOM(Document Object Model)

웹 페이지를 이루는 태그들을 JavaScript가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미.

HTML과 스크립팅 언어(JavaScript)를 서로 이어주는 역할을 한다.