HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유

먼저!!

브라우저 렌더링과정

서버로부터 HTML과 CSS 자원을 받아와서 DOM Tree와 SSOM Tree를 생성한다.
DOM Tree와 SSOM Tree로 브라우저에 레이아웃을 잡아줄 렌더트리를 생성한다.
렌더트리 노드 있는 속성이나 스타일을 기반으로 브라우저에 크기, 위치, 크기에 맞게 레이아웃을 잡는다.
브라우저에 페인트 한다.

이유 #1

브라우저 렌더링 과정 중에 <script> 태그를 만나게 되면 진행중인 HTML파싱을 중지하고

js엔진으로 제어 권한을 넘긴다. JS파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다.

그렇기에 사용자는 속도가 느려진 것 처럼 느껴지고 효율성이 떨어진다.

이러한 원리 때문에 스크립트 소스는 body 태그 끝에 두는 것을 권장한다.

자바스크립트 파싱과 실행은 브라우저 엔진이 아닌 자바스크립트 엔진에서 처리한다.

💨 만약 스크립트 파일을 먼저 로드하게 되는 경우
- 스크립트가 문서를 파싱하는 동안 브라우저는 다른 작업을 수행하지 않기 때문에 스타일이 파싱되지 않은 상태가됨
- 화면 레이아웃이 제대로 구성되지 않은 상태로 사용자에게 뷰를 제공하게 될 확률이 높다.
- 스크립트 소스를 하단에 두게 되면 HTML문서를 화면에 표시하는 속도가 빨라지게 되고 사용자가 뷰를 보는데 필요한 웬만한 문서를 해석한 상태기 때문에 사용자의 불편을 초래하지 않을 수 있다.

이유 #2

자바스크립트가 DOM API 통해서 DOM 트리를 변경시킬 수 있다.

위의 이유 #1에서 언급했듯 JS 엔진과 렌더링 엔진은 직렬적으로 실행한다.

즉, 위에서 부터 한줄한줄 내려가며 코드를 실행시키고, 한 엔진이 실행되면 다른 엔진은 실행 권한을 상실한다.

만약 자바스크립트파일이 읽어지는 동안에도 HTML ,CSS 파싱이 중단되지 않으면 렌더트리가 다 구성되지 않았을 때 JS 엔진의 js코드 해석에 의해서 DOM 트리 변경시킬 수도 있고 아직 그려지지 않은 DOM 트리의 노드에 접근한다면 오류가 날 수도 있기 때문에 정지한다.

같은 이유로 <script> 태그 를 <body> 태그 끝에 두는 것을 권장.

HTML 파싱 블로킹현상을 근본적으로 해결하기 위해 HTML5부터 async와 defer 추가됨.

async와 defer는 HTML파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행되도록 만들어줌.

런 이유에서 보통 async, defer 속성을 이용한다.

async속성은 HTML렌더링을 멈추지 않고 동시에 js 파일을 다운로드 하고

다운로드가 끝난 후에 자바스크립트를 실행합니다.

defer속성은 HTML렌더링을 멈추지 않고 동시에 js 파일을 다운로드 하고

HTML렌더링이 끝난 후에 자바스크립트를 실행합니다.

CSS는 파싱 중단하지 않음
→ 스타일 시트는 이론적으로 DOM 트리를 변경하지 않기 때문에 문서 파싱을 기다리거나 중단하지 않는다.

728x90

'📋Technical interview(Front)' 카테고리의 다른 글

Get과 Post의 차이 (0)	2022.12.16
[JS]이벤트 버블링과 캡처링(Bubbling & Capturing) (0)	2022.11.27
브라우저 저장소 차이점 ( Localstorage, SessionStorage, Cookie ) (0)	2022.11.16
Promise (0)	2022.11.16
[JavaScript] 스코프 체인이란? (0)	2022.11.09

🐸개구리창고

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유

브라우저 렌더링과정

이유 #1

이유 #2

자바스크립트가 DOM API 통해서 DOM 트리를 변경시킬 수 있다.

'📋Technical interview(Front)' 카테고리의 다른 글

티스토리툴바

HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유

브라우저 렌더링과정

이유 #1

이유 #2

자바스크립트가 DOM API 통해서 DOM 트리를 변경시킬 수 있다.

'📋Technical interview(Front)' 카테고리의 다른 글

관련글

티스토리툴바