요약하기
HTML를 파싱 후, DOM트리를 구축합니다.
CSS를 파싱 후, CSSOM트리를 구축합니다.
Javascript를 실행합니다.(HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다.)
DOM과 CSSOM을 조합하여 렌더트리를 구축합니다.
뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산합니다. (Layout 단계)
계산한 위치/크기를 기반으로 화면에 그립니다. (Paint 단계)
1️⃣ 웹 브라우저의 구조
사진에 나와있듯이 웹 브라우저는 총 7가지로 구성되어있습니다.
1. 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어합니다.
3. 렌더링 엔진 : 요청한 URI를 브라우저 엔진에게 받아서 server에게 요청합니다.(통신). server로 부터 URI에 해당하는 데이터(HTML, CSS, JavaScript)를 받아서 파싱한 후 렌더링합니다.(chrome webkit)
4. 통신 : 렌더링 엔진으로부터 HTTP 요청 등을 받아서 네트워크 처리 후 응답을 전달합니다.(OS 단에서 실행)
5. 자바스크립트 해석기 : JavaScript 를 파싱합니다.(chrome V8)
6. 자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장합니다. (HTML5 부터 Web Database에 저장가능)
7. UI 벡엔드 : render tree를 browser 에 그리는 역할을 담당합니다.
렌더링 엔진
렌더링 엔진에 대하여 더 자세히 알아봅시다.
웹 브라우저마다 렌더링 엔진은 조금씩 다릅니다.
Safari의 Webkit, Firefox의 Gecko, Chrome의 Blink 등이 있습니다.
렌더링 엔진의 목표는 HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소들을 화면에 보여주는 것과 업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성하는 것입니다.
렌더링 엔진은 다음과 같이 동작합니다.
먼저 사용자가 요청한 웹페이지 문서를 불러오고 Parsing합니다. (DOM Tree, CSSOM Tree 생성 > Render Tree 생성)
Layout : Render Tree에서 각 노드의 위치와 크기를 계산합니다.
Paint : 화면에 그려지도록 변환하는 과정을 거칩니다.
UI가 업데이트 되는 3가지 상황
- 다시 Layout이 발생하는 경우
- Paint부터 다시 발생되는 경우(레이아웃의 수치 변화 X)
- 레이어의 합성만 다시 발생하는 경우
2️⃣ 브라우저 동작 과정
- 사용자가 웹사이트를 접속합니다.
- 웹 브라우저(크롬, 사파리 등)는 DNS를 통해 서버의 아이피 주소를 파악합니다. 그리고 브라우저는 IP 서버로 이동합니다.
- 브라우저와 서버가 3Way-Handshake를 합니다.
3-1. 3 Way-Handshake 란, 전송제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정/방식입니다. 더 쉽게 말해서 송수신자(데이터를 주고 받는 두 사람이라고 생각하면 쉬움)사이에 연결을 확인하는 과정입니다. - 서버에게 자료를 요청합니다.(HTTP Request)
- 서버는 브라우저에게 데이터를 전달합니다.(HTTP Response)
- 브라우저의 렌더링 엔진은 HTML과 CSS 파일을 파싱해서 각각 Tree를 만듭니다.(Parsing)
6-1. script 태그를 만나면 자바스크립트 엔진에게 제어 권한을 넘겨 추상 구문 Tree인 AST를 생성 후 실행합니다. - DOM Tree + CSSOM Tree => Render Tree(Style)
- Render Tree에서 각 노드의 위치와 크기를 계산하여 레이어를 만들고 레이어를 합성하여 화면에 나타냅니다.(Layout, Paint, Composite)
참고자료
https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
