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

렌더링 중에 자바스크립트가 실행되면 렌더링이 멈추는 이유

• 지난 번, HTML + CSS + JS 렌더링 방식에서, 자바스크립트 실행시 멈추는 동작을 확인했다.
  브라우저의 렌더링 원리, HTML 렌더링 방식
• 왜 자바스크립트가 실행되면, 렌더링이 멈출까?

---

렌더링 도중, 자바스크립트가 실행된다면?

1. 브라우저의 렌더링 엔진은 HTML을 한 줄씩 파싱해서 DOM을 생성한다.
   

2. 그러다가, JavaScript의 script 태그를 만나면, DOM 생성을 중단하고,
   코드를 해석하고 실행하기 위해, 자바스크립트 엔진에 제어권을 넘긴다.
   
   이렇게, 제어권을 받아 자바스크립트 코드를 파싱한다.

3. JS 코드 파싱이 끝나면, 다시 제어권을 렌더링 엔진에게 넘기고,
   중단된 부터 다시 HTTML 파싱을 재개하고 DOM 트리를 생성한다.
   

---

렌더링 멈추는 문제를 해결하기 위한 방법

• 따라서, 이러한 렌더링 방식은 페이지 로딩 성능을 저하시킬 수 있다.
• 해결하기 위한 다음과 같은 방법이 있다.
  • script 태그 위치 조정.
  • async 비동기 속성
  • script 태그의 defer 속성

---

✨ 출처

blog, 프론트엔드 면접 문제 은행
HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유

---