브라우저 렌더링

브라우저 기본 구조

User Interface	주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용하는 사용자 인터페이스
Browser Engine	유저인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
Rendering Engine	HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
Data Storage	localStorage나 Cookie같이 보조기억장치에 데이터를 저장하는 파트
Networking	각종 네트워크 요청을 수행하는 네트워킹 파트
Javascript Interpreter	자바스크립트 코드를 실행하는 해석기
UI Backend	체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트

 

렌더링 순서

웹킷 동작 과정 - 네이버 D2

1. DOM 트리 생성

html문서를 tokenization, lexing, parsing을 통해 DOM tree로 만든다.

DOM tree를 생성중일 때, js script를 만나면 DOM tree 생성을 중단하고 js 인터프리터에게 제어권을 넘긴다.

js 인터프리터가 실행을 끝내면 중단된 DOM tree생성을 재개한다.

DOM이 생성되지 않은 순간에 js가 HTML요소로 접근하면 찾을 수 없다.

2. CSSOM 트리 생성

외부 css와 함께 포함된 스타일 요소를 파싱하여 CSSOM(css object model) 트리를 만든다. cssom은 dom이 어떻게 화면에 표시될 지를 알려준다.

3. 렌더 트리 생성

DOM 트리와 CSSOM 트리를 합쳐서 렌더 트리를 만든다. 렌더 트리는 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 담고있는 트리이다.

meta태그나 display:none;속성을 가진 노드들은 화면에 표시되지 않기 때문에 렌더트리에 포함되지 않는다.

4. 레이아웃(리플로우)

viewport에서 요소들의 위치와 크기를 계산한다.

상대적인 값은 화면에 맞게 px값으로 변환시킨다.

5. 페인트(리페인트)

화면에 실제 픽셀로 변환하는 과정이다. 

composite단계를 마지막으로 화면에 출력된다.

 

렌더링 최적화

렌더링 과정에서 Layout, Paint, Composite단계가 일어나는데, 화면에 변화가 일어날 때 Layout을 생략하거나 Layout과 Paint 과정을 생략할 수 있으면 프레임을 보장할 수 있다.

브라우저 개발자도구의 Performance탭에 성능측정을 사용해보면 어떤 과정이 일어나는지 알 수 있다.

left, top같은 속성은 Layout, paint, composite가 모두 실행되는데 반면 transform, opacity속성은 layout, paint없이 composite만 실행된다.

그래서 transform속성을 이용해서 애니메이션 작업을 많이 이용한다고 한다.

 

 

참고: https://www.youtube.com/watch?v=z1Jj7Xg-TkU

https://www.youtube.com/watch?v=sJ14cWjrNis

https://d2.naver.com/helloworld/59361

-