[WEB] 브라우저 렌더링 원리

브라우저 주요 기능

사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
1. 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석
2. 해석된 문서는 브라우저 렌더링 엔진에 따라서 브라우저에 사용자가 볼 수 있도록 그리기 시작
-> 브라우저 별로 화면에 그리는 방식은 다름
-> 대표적으로 Chrome과 Safari는 Webkit 엔진을 사용하며, 파이어폭스는 Gecko 엔진을 사용하기 때문

 

Webkit과 Gecko 렌더링 엔진 동작과정 차이 ❓
- Gecko 엔진을 사용하는 Firefox에서 프리젠테이션은 DOM 업데이트를 위한 리스너로 등록하고 "Frame Constructor"에서 프레임을 생성
- Webkit은 "Attachment"에서 스타일을 결정하고 랜더러를 만듬. Webkit은 HTML 태그와 Body 태그를 처리하고 렌더 트리를 만듬
-> Gecko에 콘텐츠 싱크 과정이 있지만 DOM 요소를 생성함에 있어 Webkit과 큰 차이는 없다
참고 : https://12bme.tistory.com/208

 

http://taligarsiel.com/Projects/howbrowserswork1.htm

브라우저 주요 구성요소

1. 사용자 인터페이스 : 사용자가 브라우저에서 직접조작 할 수 있는 영역
2. 브라우저 엔진 : 사용자 인터페이스가 렌더링 엔진에 쿼리를 전달할 수 있게 조작을 담당
3. 렌더링 엔진 : HTML과 CSS 문서를 파싱, 해석하여 화면에 표현
4. Networking : Http 요청을 할 수 있으며, 네트워크 호출할 수 있다
5. Javascript 해석기 : Javascript 코드를 해석하고 실행
6. UI Backend : select / Input 등 기본적인 위젯을 그리는 인터페이스
7. 자료 저장소 : Cookie, Local storage 등 모든 자료를 저장하는 영역

https://it-eldorado.tistory.com/87

동작 과정

1. DOM 트리 구축을 위한 HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
서버로부터 받은 HTML, CSS를 다운로드 받음
HTML, CSS는 단순한 텍스트 파일이므로 연산과 관리가 유리하도록 Object Model로 만듬
HTML, CSS 파일은 각각 DOM Tree와 CSSOM으로 만들어짐

DOM

https://jess2.xyz/web/browser-rendering/

CSSOM

https://jess2.xyz/web/browser-rendering/

2. Render Tree 생성
DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다
순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표시되는 노드들로만 구성된다

https://jess2.xyz/web/browser-rendering/

3. Layout
브라우저의 뷰포트내에서 각 노드들의 정확한 위치와 크기를 계산
-> 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계
-> Layout 단계를 통해 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 pixel 단위로 변환

뷰포트 ❓
그래픽이 표시되는 브라우저의 영역, 크기

4. Paint
이전 단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀값을 채워넣는다
-> 처리해야 하는 스타일이 복잡할수록, Paint 단계에 소요되는 시간이 늘어나게 된다

5. Reflow (Layout 다시 수행)
어떠한 액션이나 이벤트에 따라 HTML 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 자식 요소나 부모 요소를 포함하여 Layout 과정을 다시 수행

6. Repaint (Paint 다시 수행)
Reflow만 수행되면 실제 화면에 반영되지는 않는데, Paint를 다시 수행해주는 이 과정을 Repaint라고 한다
하지만 무조건 Reflow가 일어나야 Repaint가 일어나는건 아니다
-> background-color, visibility와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow(계산)를 수행할 필요가 없기 때문에 Repaint만 수행한다.