매번 헷갈리던 브라우저의 렌더링 과정을 짧게 정리해봤다!
웹 브라우저의 구조
- User Interface:주소 표시줄, 이전/다음 버튼, 북마크 메뉴
- Browser Engine: User Interface와 Rendering Engine을 연결
- Rendering Engine: HTML과 CSS를 파싱해서 요청한 웹 페이지를 표시하는 렌더링
- Network: 네트워크 요청 수행
- Javascript Interperter: 자바스크립트 코드를 실행하는 인터프리터(v8)
- UI Backend: 버튼과 같은 위젯을 그림
Rendering Engine
브라우저 별로 사용되는 렌더링 엔진은 각각 다르다.
- Safari: Webkit
- Firefox: Gecko
- Chrome: Blink
Rendering Engine 동작 과정
- 스크롤, 애니메이션, 비동기 요청 등 유저 인터렉션에 따라 효율적으로 렌더링할 수 있는 자료구조를 생성한다.
Critical rendering Path
Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다.
CRP는 6단계를 거치며 각 단계는 다음과 같다.
- DOM 트리 만들기
- CSSOM 트리 만들기
- JavaScript 실행
- Render 트리 만들기
- 레이아웃 생성하기
- 페인팅
DOM Tree 만들기
html 파일을 토큰화한다 -> 브라우저의 lexing 과정을 통해 노드 객체로 변화한다 -> 이 노드들이 tree를 생성한다(DOM Tree)
이때 브라우저는 파싱을 할 때 필요한 js, css 파일을 불러온다.
CSSOM Tree
Render Tree
- DOM Tree + CSSOM Tree
- Render Tree는 DOM 과 CSSOM 이 합쳐진 것으로 페이지에서 최종적으로 렌더링할 내용을 나타내는 트리이다.
- meta tag, display none 같은 태그는 렌더링과 관련 없기에 렌더 트리에 포함 되지 않는다.
Render Tree 배치(=Layout, Reflow)
- view port 내에서 요소들의 정확한 위치와 크기를 계산하는 과정이다.
- box model에 따라서 텍스트나 요소가 화면에서 차지하는 영역, 여백, 스타일 속성 등이 계산 된다.
- rem, em 같이 상대적인 단위를 사용했을 경우에 view port에 맞게 계산 된다.
Render Tree 그리기(=Paint, Repaint)
- 렌더 트리에 포함된 것들을 화면에 실제 픽셀로 그린다.
렌더링 이후 UI 업데이트
Layout부터 시작
element의 크기나 위치가 바뀔 때, 브라우저 창 크기가 바뀌었을 때(반응형) 다시 Layout 발생하는데 이때 다시 Layout이 발생한다.
Paint부터 시작
Layout 수치를 변화시키지 않는 선에서 업데이트가 일어났을 때(이미지, 텍스트 색상, 그림자 등)
Composite만 실행
Layout, Paint를 수행하지 않고 레이어 합성만 할 때