브라우저의 렌더링 원리, 과정

 

 

브라우저가 화면에 렌더링을 할 때는 렌더링 엔진을 사용한다.

 

렌더링 엔진의 역할은 요청받은 내용을 화면에 표시하는 일이다.

파이어폭스는 게코엔진, 사파리와 크롬의 경우 웹킷 엔진을 사용한다.

 

렌더링 엔진이 HTML, CSS, Javascript를 렌더링 할 때

CRP(Critical Rendering Path)프로세스를 사용하며 단계는 아래와 같다.

 

1. HTML문서를 파싱하여 DOM 트리 구축 (Constructing the DOM Tree)

2. CSS를 파싱하여 CSSOM 트리 구축 (Constructing the CSSOM Tree)

3. 자바스크립트를 실행한다. (Running JavaScript)

4. DOM트리와 CSS트리를 조합하여 렌더트리 구축. (Creating the Render Tree)

* head 요소와 같은 비시각적 DOM 요소, display 속성에 "none" 값인 요소는 렌더 트리에 나타나지 않음

5. 뷰포트 기반으로 각 노드의 위치와 크기 계산. (Generating the Layout)

6. 계산한 결과대로 화면에 그린다. (Painting)

 

위의 과정들이 점진적으로 진행되며,

렌더링 엔진은 보다 빠른 사용자 경험을 제공하기 위하여

모든 HTML문서를 파싱할 때 까지 기다리지 않고 배치(layout/reflow)와 그리기(paint)를 진행한다 

네트워크로 내용을 기다림과 동시에 그리기를 실행하는 것이다.

 

HTML

HTML의 장점은 부분적으로 실행될 수 있다는 것이다.

페이지에 내용이 표시하기 위해 전체 문서를 로드할 필요가 없다.

그러나 다른 리소스인 CSS와 JavaScript는 페이지 렌더링을 차단할 수 있다

 

Javascript

javascript는 파서 차단 리소스(parser blocking resource)이다.

파서는 < script >를 만나면 스크립트가 실행되는 동안 문서의 파싱은 중단된다.

문서 내의 요소를 참조하는 JavaScript 파일이 있는 경우 해당 문서가 표시된 후에 배치 해야 한다.

 

JavaScript가 파서 차단(parser blocking)되는 것을 피하기 위해

async 속성을 적용하여 비동기적으로 로드 할 수 있다.

<script async src="script.js">

 

CSS

CSS는 렌더링 차단 리소스(render blocking resource)로 간주된다.

HTML과 달리 CSS는 계단식 상속 특성 때문에 부분적으로 실행될 수 없다.

문서의 맨 뒷부분에 있는 스타일을 무시하고 먼저 적용을 해버릴 수 없기 때문에

다음 단계로 넘어 가기 전에 CSS를 완전히 파싱 해야 한다.

 

 

 

https://csstriggers.com/

https://blog.asamaru.net/2017/05/04/understanding-the-critical-rendering-path/