먼저 렌더링이란?
HTML, CSS, JS등 개발자가 작성한 문서라 브라우저에 출력되는 과정
Brower Structure
- User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
- Browser Engine: User Interface와 Rendering Engine 사이의 동작을 제어
- Rendering Engine: 요청한 콘텐츠를 표시, HTML을 요청하면 HTML과 CSS를 파싱 하여 화면에 표시한다.
- Networking: HTTP 요청과 같은 네트워크 호출에 사용됨
- Javascript Interpreter(혹은 Engine): 자바스크립트 코드를 해석하고 실행함. (크롬에서는 v8 엔진을 사용)
- Display Backend: 기본적인 위젯을 그림
- Data Persistence: Local Stroage, 쿠기 등 클라이언트 사이드에서 데이터를 저장하는 영역
브라우저 렌더링 과정
-
DOM(Document Object Model)생성
: HTML 마크업을 처리하고 DOM 트리 빌드 (DOM 파싱) -
CSSOM 생성
: CSS 마크업을 처리하고 CSSOM 트리를 빌드 (CSS 파싱) -
Render Tree 생성
: DOM과 CSSOM을 결합하여 렌더 트리 형성 (Attachment) -
Render Tree 배치
: 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산 -
Render Tree 페인팅
: 개별 노드를 화면에 페인트 합니다.DOM 트리 과정
- uri에 naver.com을 검색할 경우
- naver.com에 들어갔을 때 보여질 페이지가 그려진 html파일을 서버에 요청(request)한다.
- 서버는 요청을 받고 자기가 갖고 있는 파일을 찾아 응답(response)한다.
-> 이때 받은 html은 우리만 읽을 수 있고 브라우저는 이해하지 못한다! 그렇기 때문에 파일을 받으면 브라우저가 이해하기 위해 DOM 트리를 그린다.
- 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서, HTML에 정의된 인코딩(ex.UTF-8)에 따라 개별 문자로 변환
- 토큰화: 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환
- 렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 “객체"로 변환
- DOM 생성: 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결
- 브라우저는 HTML 마크업을 처리 할 떄마다 위의 모든 단계를 수행
절차적으로 파일을 읽기 때문에 아래로 내려가다 보면 head안에 링크 된 css 파일을 만날 것이다.
css파일을 읽는 것은 또 다른 CSSOM 트리를 만든다.
자바스크립트를 만나면 자바스크립트는 따로 자바슼립트 엔진이 파싱한다.
결국 제일 큰 오브젝트인 window의 구성요소는 DOM과 CSSOM과 자바스크립트라 할 수 있다.
CSSOM
DOM 트리로 만들어진 모든 태그들의 관계도와 CSSOM의 관계도를 합친다.
→ Cascading Rule 이라고 한다. (fun fact: CSS는 Cascading Style Sheet의 약자다)
이러한 과정을 거쳐 최종적으로 우리에게 RenderTree가 보이게 된다.
→ 우리가 직접적으로 보는 트리이기 때문에 보이는 것만 그려진다.
참고
https://medium.com/개발자의품격/브라우저의-렌더링-과정-5c01c4158ce
https://d2.naver.com/helloworld/59361
