Browser Rendering

Shortdary·2020년 4월 30일

공부

프론트엔드공부

목록 보기

1/3

TL;DR

객체모델 생성 (HTML markup => DOM, CSS markup => CSSOM)
렌더링 트리 생성 (DOM + CSSOM)
레이아웃 계산
페인트

1. 객체모델 생성

TL;DR

바이트 → 문자 → 토큰 → 노드 → 객체 모델.
HTML 마크업은 DOM(Document Object Model)으로 변환되고, CSS 마크업은 CSSOM(CSS Object Model)으로 변환됩니다.
DOM 및 CSSOM은 서로 독립적인 데이터 구조입니다.
Chrome DevTools Timeline을 사용하면 DOM 및 CSSOM의 생성 및 처리 비용을 수집하고 점검할 수 있습니다.

1. 변환: 브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어와서, 해당 파일에 대해 지정된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다.
2. 토큰화: 브라우저가 문자열을 W3C HTML5 표준에 지정된 고유 토큰으로 변환합니다(예: '', '' 및 꺽쇠괄호로 묶인 기타 문자열). 각 토큰은 특별한 의미와 고유한 규칙을 가집니다.
3. 렉싱: 방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환됩니다.
4. DOM 생성: 마지막으로, HTML 마크업이 여러 태그(일부 태그는 다른 태그 안에 포함되어 있음) 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결됩니다. 이 트리 데이터 구조에는 원래 마크업에 정의된 상위-하위 관계도 포합됩니다. 즉, HTML 객체는 body 객체의 상위이고, body 는 paragraph 객체의 상위인 식입니다.

DOM과 CSSOM은 위와 같은 과정을 거친다.

DOM

이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용합니다.

CSSOM

왜 트리형식인가요? - 가장 일반적인 규칙을 적용하고 아래로 내려가는 '하향식' 구조이기 때문이다. (ex. body를 적용시키고 p, span, img 하위 항목을 적용한다.)
위 그림은 사용자가 정의한 스타일만 나타낸 것이고 전체 스타일트리를 보여주는 것이 아니다. 모든 브라우저는 User Agent Style이라 하는 기본 스타일이 있다. 사용자가 정의한 스타일은 그 기본 스타일 트리를 덮어씌우는 것이다.

2. 렌더링 트리 생성

TL;DR

DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.
렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.
레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다.
마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다.

1. DOM트리를 루트에서부터 순회하기 시작합니다. 이 때 <script>나 <meta>같은 태그나 display: none같은 것들을 렌더링 트리에서 제외 합니다.
2. 노드에 맞는 CSSOM 규칙을 찾아 적용합니다.
3. 해당 노드를 컨텐츠와 계산된 스타일과 함께 내보냅니다.