브라우저 렌더링 정리

웹 브라우저의 구조는 다음과 같다.

1. User Interface

: 주소 표시줄, 이전/다음/새로고침 버튼 등의 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스

2. Browser Engine

: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

3. Rendering Engine

: HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진

4. Networking

: 각종 네트워크 요청을 수행하는 네트워킹 파트

5. Javascript Interpreter

: 자바스크립트 코드를 실행하는 인터프리터 (V8)

6. UI Backend

: 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트

7. Data Persistence

: localStorage나 Cookie 같이 보조 기억장치에 데이터를 저장하는 파트

 

 

- 웹 브라우저 마다 렌더링 엔진이 다르다.

safari: webkit

firefox: gecko

chrome: blink (webkit 사용하다가 교체)

 

- 렌더링 엔진은 무엇을 하는가?

1. html, css, js, 이미지 등을 웹 페이지에 포함된 모든 요소들을 화면에 보여줘야함.

2. 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성함.

 

 

- 렌더링 엔진은 어떻게 동작하는가?

1.

html을 DOM tree로 파싱한다.

css도 CSSOM tree로 생성한다.

 

2.

이제 렌더링엔진이 DOM tree와 CSSOM tree를 합쳐서 Render Tree를 만든다.

(Render Tree: 화면에 표시되어야할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리)

 

DOM tree를 순회하면서, 각 노드에 맞는 CSSOM을 찾아서 적용하여 렌더링 트리에 포함한다.

meta, display: none은 포함되지 않는다. (화면에 그려지지 않기 때문.)

 

3.

Layout (Reflow)

해당 요소가 차지하는 영역의 배치가 이루어진다.

 

4.

Paint (Repaint)

렌더링, 이미지등이 실제로 화면에 렌더링된다.

 

이 일련의 과정을 Critical Rendering Path라고 부른다.

 

 

- UI가 업데이트 되면 어떻게 동작하나요?

3가지로 구분할 수 있다.

 

1. 다시 Layout이 발생하는 경우

요소의 크기나 위치가 바뀔 때, 브라우저 창의 크기가 바뀔 때 발생.

reflow가 일어나면 repaint는 필연적으로 발생한다.

 

2. 다시 Paint가 발생하는 경우

배경 이미지나 텍스트 생상, 그림자 등의 레이아웃 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생한다.

 

3. 다시 Composite만 발생하는 경우

레이아웃의 합성만 일어나는 경우는 다음과 같다.

Layout과 Paint를 수행하지 않으니까 당연히 비용이 적다.

 

어떤 css가 변경되었을때 어떤 것이 다시 발생하는지는

=> csstriggers.com에서 확인가능

 

 

 

https://www.youtube.com/watch?v=sJ14cWjrNis&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9CTech 

https://www.notion.so/Rendering-994f91c0b5cc493481876d04be028b76