[ CSS ] CSS 렌더링 흐름

# Reference

 

aproid blog - CSS Transition 성능 최적화 by aproid

https://aproid.github.io/2019/03/21/transition-optimize/

CSS Transition 성능 최적화 — Aproid

 

yceffort blog - CSS 성능 향상시키기

https://yceffort.kr/2021/03/improve-css-performance#css%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94%EA%B0%80

Home

 

wonism blog - Critical Rendering Path란?

https://wonism.github.io/critical-rendering-path/

WONISM's Blog

 

0) 학습개요

 

아주대학교 중앙동아리 Do-iT 21년 동계 웹팩 스터디에서 학습한 내용들을 블로그로 정리하며 복습하기 위함

 

1) CSS의 HTML 적용순서

 

CSS는 HTML이 로딩된 이후 파일 내에 포함된 css url을 통해 로드됩니다.

로드된 CSS는 총 4개의 단계를 거치며 HTML에 적용되는데,

이 단계는 주요 렌더링 경로 (Critical Rendering Path, 이하 CRP)에서 CSS와 관련된 단계만 정리한 것입니다.

 

1. CSS 객체 모델 만들기 ( CSSOM )

CRP에 따라 이 단계 이전에 DOM 트리가 완성됩니다.

CSSOM은 DOM과 비슷하게 CSS를 제어할 수 있는 객체기반 모델을 말합니다.

 

CSSOM의 특징은 부분적인 실행이 불가능하다는 것인데, 다시말해 모든 CSS가 파싱되기 전까지 다른 작업은 모두 일시적으로 중지됩니다.

이는 뒤에 추가된 css가 이전 css 속성을 덮는 css의 구조 상 잘못된 css가 적용되는 것을 막기 위한 대안입니다.

 

2. 렌더 트리 만들기

앞서 생성된 DOM과 CSSOM을 합치는 과정입니다.

최종적으로 화면에 렌더링되는 요소들만 이 트리에 포함되는데,

이 때문에 "display: none;"옵션으로 숨겨진 요소는 이 트리에서 제외됩니다.

 

3. 레이아웃

렌더트리의 각 객체에 대한 정확한 용량과 위치를 계산합니다.

 

4. 페인트

렌더트리를 순회하면서 화면에 CSS가 입혀진 요소들을 렌더링합니다.

 

 

2) CSS 내 연산순서

위의 과정들 중 3, 4 단계는 CSS 정보들을 실제로 표현하기 위한 연산이 진행되는 과정입니다.

이 과정을 조금 더 자세히 구분하면 아래와 같이 정리됩니다.

 

1. Styles

위 단계들 중 3번째에 해당합니다.

요소에 적용할 스타일을 계산하는 과정입니다.

 

2. Layout

3번째 단계에 포함되지만 Styles 과정이 완료된 후 실행되는 단계입니다.

css 옵션들 중 아래 옵션들이 이 단계에서 계산됩니다.

출처: aproid blog (https://aproid.github.io/2019/03/21/transition-optimize/)

 

3. Paint

4번째 단계에 해당하는 작업입니다. 각 요소들에 픽셀을 채우는 단계입니다.

css 옵션들 중 대표적으로 아래 옵션들이 이 단계에서 계산됩니다.

다른 단계에 포함되지 않는 다른 옵션들도 이 단계에서 계산됩니다.

출처: aproid blog (https://aproid.github.io/2019/03/21/transition-optimize/)

 

4. Composite

가장 마지막 단계로, 브라우저가 화면에 그려낼 때 적용되는 단계입니다.

2개의 옵션만 이 단계에서 적용됩니다.

 

transform

opacity

 

 

3) CSS 파싱 특징: 렌더링 차단

HTML과 마찬가지로, CSS는 일반적으로 CSSOM이 생성되기 전까지 다른 모든 컨텐츠를 렌더링하지 않습니다.

단, media를 통해 조건을 설정해줄 경우 해당 조건이 만족될 때에만 적용됩니다.