브라우저의 구조 중 렌더링 엔진에 대해서 알아보자.
요약
브라우저 렌더링은 크게 4가지 단계로 구성되어 있습니다.
1) 요청 :
브라우저는 서버로부터 요청하여 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운 받는다2) 트리 생성 :
HTML과 CSS를 파싱하여 DOM 트리와 CSSOM 트리를 만들고 둘을 결합하여 Render 트리를 만든다.3) Layout :
렌더 트리에 있는 노드를 배치한다.4) Paint :
렌더 트리에 있는 노드의 UI를 만듭니다.
Construction 단계
요청
-
사용자가 브라우저로 웹 사이트에 접속
-
DNS를 통해 서버의 IP 주소 확인
-
브라우저와 서버가 3 Way Handshake하여 연결를 설정한다.
-
브라우저가 서버에게 HTTP Request한다.
-
브라우저가 서버로부터 HTTP Response를 받는다.
DOM, CSSOM, AST
- 서버로부터 받은 데이터 중 HTMP 파일을 파싱하여 DOM 트리 생성
- 중간에 HTML 파싱을 잠시 멈추고 스타일 태그가 나오면 CSSOM 트리 생성
(또 중간에 HTML 파싱을 잠시 멈추고 스크립트 태그가 나오면 AST(Abstract Syntax Tree) 생성 후 실행)
- DOM 트리 + CSSOM => Render 트리 생성
Operation 단계
Layout 단계
렌더 트리에 있는 노드를 브라우저 화면의 어느 위치에 어떤 크기로 출력할지 계산한다.
리플로우될 경우
레이아웃부터 다시 발생되는 경우로는
주로 요소의 크기나 위치가 바뀔 때 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생한다.
Paint 단계
렌더 트리에 있는 노드의 UI를 그린다.
이때 텍스트, 색, 이미지, 그림자 효과등을 모두 처리한다.
리페인트될 경우
페인트부터 다시 발생되는 경우로는
주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생
리플로우, 리페인트 생략될 경우
transform, opacity는 리플로우, 리페인트 생략
(GPU가 관여할 수 있는 속성이기 때문이다.)
Composition 단계
렌더 트리에 있는 노드를 순서대로 구성
꼬리 질문
리플로우와 리페인트
리플로우와 리페인트에 대해 설명하시오.
리플로우 (reflow)
리플로우는 요소의 너비, 높이, 위치 등이 변경되어 렌더트리를 재생성하는 작업이다.
리플로우는 비용이 큰 작업인데, 그 이유는 특정 요소에서 리플로우가 발생하면 주변 요소(부모, 자식, 형제)에도 영향을 주기 때문이다.
리페인트 (repaint)
변경된 요소를 화면에 그려주는 작업을 리페인트라고 한다.
리페인트는 요소의 스타일이 변경되었을 때 발생하므로 리플로우보다 비용이 적다.
리페인트 발생 시점
a. 리플루우가 발생했을 때
b. 요소의 스타일(색상, 배경색 등)이 변경되었을 때
c. visibility: hidden ↔ visble로 변경될 때
참고 링크
