[개발지식] 브라우저 렌더링 과정

박예슬·2022년 6월 16일

브라우저 렌더링 과정에 대해 설명해보세요
: 브라우저가 페이지를 렌더링 하는 과정은 크게 parsing, attachment(style), layout, paint, 그리고 composite 단계로 나뉩니다.
우선 parsing 단계에서 HTML파일을 해석해 DOM Tree를 구성하는데, 파싱 중 HTML에 CSS가 포함되어 있으면 CSSOM Tree 구성 작업도 함께 진행됩니다. Attachment 단계에서 parsing 단계에서 생성된 DOM Tree 와 CSSOM Tree를 매칭시켜 실제로 화면에 그려질 Render Tree를 구성합니다. Layout 단계에선 Render Tree를 화면에 어떻게 배치해야 할 것인지 노드의 정확한 위치와 크기를 계산하고, 이후 paint 단계에서 그 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환합니다. 마지막으로 composite 단계에서 Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내게 됩니다.

브라우저

우선 브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.

MDN에서는 브라우저에 대해 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이라고 설명하고 있다. 여기서 중요하다고 생각하는 부분은 찾아서 보여준다는 것이다.

브라우저는 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여준다. 이 자원은 페이지(HTML 문서) 외에도 이미지, 비디오 등의 컨텐츠들도 포함된다. 받아온 자원들을 렌더링 과정을 통해 유저에게 보여주게 된다.

렌더링 과정 (Critical Rendering Path)

parsing

브라우저에서 사용자가 요청한 웹페이지 문서를 불러오고 parsing
DOM parsing 과정

- 변환(Conversion): HTML의 원시 바이트(raw bytes)를 읽어와 해당 파일에 지정된 인코딩(UTF-8 등...)에 따라 문자열로 변환하는 과정
- 토큰화(Tokenizing): 문자열을 W3C HTML5 표준에 따라 고유 토큰(, 등, 꺽쇠괄호로 묶인 문자열)으로 변환한다. 각 토큰은 특별한 의미와 고유한 규칙을 가진다.
- 렉싱(Lexing): 토큰을 해당 속성 및 규칙을 정의한 객체(Nodes)로 변환한다.
- DOM 생성(Dom construction): HTML은 상위-하위 관계로 정의할 수 있어, 트리 구조로 나타낼 수 있다. 렉싱 과정을 거쳐 생성된 노드들을 트리 구조로 변환

CSS parsing 과정
- CSSOM은 DOM 이 화면에 어떻게 보여줄지 알려주는 역할
- 위에서 아래로 스타일 규칙이 정해지기때문에 트리구조를 가짐
- DOM을 파싱하는 과정 그대로 CSSOM을 생성한다.
- CSS의 원시 바이트(raw bytes)가 문자열로 변환된 후 차례로 토큰과 노드로 변환되고 마지막으로 CSSOM(CSS Object Model)이라는 트리 구조를 만듦

Attachment(Style)

렌더링 엔진이 DOM Tree 와 CSSOM Tree 를 합쳐서 Render Tree를 만듦
Render Tree : 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리
과정
- DOM 트리의 루트에서 시작하여 화면에 표시되는 노드 각각을 탐색
  - 화면에 표시되지 않는 일부 노드들(script, meta 태그 등..)은 렌더 트리에 반영되지 않는다
  - CSS에 의해 화면에서 숨겨지는 노드들은 렌더 트리에 반영되지 않는다.
  (display: none...)
- 화면에 표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용
- 화면에 표시되는 노드를 콘텐츠 및 계산된 스타일과 함께 내보낸다.