렌더링 엔진

🤚🏻 잠깐! 렌더링 엔진의 역할이 뭐라고 했지?

 

렌더링 엔진은 '사용자가 요청한 html문서를 브라우저 화면에 표시 한다' 라는 아주 단편화 된 정의로 간단하게 설명할 수 있겠습니다! 만..

 

 

 

렌더링 엔진의 동작 과정

 

 

사용자가 요청한 내용을 브라우저 화면에 표시 할 수 있게 되는 과정은

그리 간단하지만은 않겠습니다.

 

렌더링 엔진은 통신으로 부터 요청한 문서의 내용을 얻어

 

 

 

1. HTML 문서를 파싱하여 DOM트리 구축

 

 

html문서를 파싱하여 dom트리를 생성하고

 

 

 

2. 외부 CSS파일을 파싱하여 CSSOM트리 구축

 

 

외부css파일과 함께 포함된 스타일 요소를 파싱하여 cssom트리를 생성합니다.

 

 

 

3. 파싱된 스타일 정보와 HTML 표시 규칙이 렌더 트리를 생성

 

이렇게 파싱된 스타일 정보와 html 표시 규칙이 렌더 트리를 구축하게 됩니다.

 

 

 

4. 렌더 트리 배치

 

생성된 렌더 트리는 아직 위치와 크기를 가지고 있지 않기 때문에 배치 과정을 거치면서 어느 공간에 위치 할지 결정되게 됩니다.

 

 

 

5. 렌더 트리 그리기

 

각자의 위치에 배치 완료된 렌더 트리의 노드들은 ui백엔드에서 그려내기 시작합니다.

 

 

 

 

렌더링 엔진은 모든 html이 파싱 될 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다.

네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에

받은 내용의 일부를 먼저 화면에 표시함으로써 보다 빠르게 사용자에게 화면을 제공할 수 있도록 하는것이지요.