HTML 렌더링 중에 javaScript가 실행되면 렌더링이 멈추는 이유는 주로 자바스크립트가 단일 스레드에서 동작하기 따문이다. 이를 더 상세히 설명하면 다음과 같다.
1. 자바스크립트의 단일 스레드 모델
자바스크립트는 단일 스래드(single-threaded) 언어이다. 즉, 한 번에 하나의 작업만 수행할 수 있다. 브라우저는 자바스크립트 코드를 실행하기 위해 단일 이벤트 루프(event loop)를 사용하며, 이는 다른 작업들과 병렬로 수행되지 않는다.
2. 자바스크립트 실행과 브라우저의 렌더링 엔진
브라우저는 웹 페이지를 렌더링하기 위해 여러 단계를 거친다.
- HTML 파싱: HTML 코드를 파싱하여 DOM(Document Object Model) 트리를 생성한다.
- CSS 파싱: CSSfmf vktldgkdu CSSOM(CSS Object Model) 트리를 생성한다.
- 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
- 레이아웃: 각 요소의 위치와 크기를 계산한다.
- 페인팅: 화면에 요소들을 그린다.
브라우저의 렌더링 엔진은 이 과정 중에 script 태그를 만나면 자바스크립트 엔진에 해당 코드를 실행하도록 요청한다. 이 때, 자바스크립트 엔진이 실행을 시작하면 HTML 파싱 및 렌더링 프로세스는 일시 중단된다.
3. 렌더링 중단의 이유
자바스크립트 코드가 HTML 문서의 구조(DOM)을 변경할 수 있기 때문에, 브라우저는 DOM을 안전하게 업데이트하기 위해 현재 진행 중인 렌더링을 중단해야 한다. 이는 자바스크립트 코드가 DOM에 영향을 미치는 변경을 할 경우를 대비한 것이다. 예를 들어, 다음과 같은 작업을 수행할 수 있따.
- 새로운 요소를 추가
- 기존 요소를 제거
- 요소의 속성을 변경
- 스타일을 조정
이런 작업들은 페이지의 구조와 레이아웃에 큰 영향을 미칠 수 있기 때문에, 브라우저는 자바스크립트 코드가 실행되고 나서 렌더링을 재개한다. 이를 통해 자바스크립트 코드가 DOM이나 CSSOM에 적용한 모든 변경사항을 반영할 수 있다.
4. 비동기적 자바스크립트 실행
이를 피하기 위해, 비동기적으로 자바스크립트를 실행하는 방법이 있다. 예를 들어, async 또는 defer 속성을 script 태그에 추가하면 스크립트가 비동기적으로 실행된다. async는 스크립트가 로드되는 대로 바로 실행되며, defer는 모든 HTML 파싱이 완료된 후에 실행된다. 이를 통해 HTML 파싱이 자바스크립트 실행으로 인해 중단되지 않도록 할 수 있다.
따라서, 자바스크립트 코드가 실행되면 렌더링이 멈추는 이유는 자바스크립트가 DOM에 영향을 미칠 수 있으며, 이를 안전하게 처리하기 위해 브라우저가 일시적으로 렌더링으 중단하는 것이다.
