브라우저 렌더링 과정
- 사용자가 브라우저를 통해 웹사이트 접속
- 브라우저가 리소스 다운받음 (HTML, CSS, JS 등)
- 렌더링 엔진이 HTML을 파싱해 DOM 트리를 만듦
- 렌더링 엔진이 CSS를 파싱해 CSSOM 트리를 만듦
- DOM 트리 + CSSOM 트리 = Render 트리 구축
- Layout: 각 요소의 배치 결정
- Paint: 구축된 Render 트리를 화면에 어떻게 그릴 지 결정하는 페인트 레코드 생성
- Layerize: Paint 결과물을 특정한 레이어들로 쪼갬
- Commit: Layerize 결과물을 Composite Thread로 옮김
- Composite: Render 트리에 존재하는 레이어들을 합치는 과정
- Display: 렌더링 ~~
Layer
여기서 말하는 레이어란, 포토샵의 레이어처럼 페인팅 영역을 나누는 것. 기본적으로 같은 좌표공간상에서는 같은 레이어를 가진다.
Paint Layer
- 페인트 레이어가 생성되는 조건
root element- 명시적인
position속성값을 가지고 있는 경우 - 투명도가 1 미만인 경우
filter,mask,transform을 가진 경우
Graphics Layer
- GPU 활용 변환 + 병렬처리 특화 로 빠르게 변환 가능
- 기존 레이어에서 새롭게 분리되어 주변 레이어 영향 없이 해당 레이어만 빠르게 렌더링 가능
- 그래픽 레이어가 생성되는 조건
video나canvas태그를 사용하는 경우3d transform속성이 존재하는 경우- 하드웨어 가속이 된 2D canvas 요소인 경우
transitionoranimation속성 +opacity,transform,filter속성 적용backdrop-filterwill-change
JS는 언제 반영될까?
- HTML 파싱 과정에서 script 태그를 만나면,
- DOM 생성을 중단, JS 리소스를 요청,
- JS 코드를 받아와 파싱한다. (JS 엔진)
- JS 코드에 따라 DOM/CSSOM을 동적으로 변경한다.
따라서 <body> 아래에 <script> 태그가 위치하면, DOM 생성 완료 이후에 조작이 가능하다. 즉 <script> 태그를 최하단에 위치시키는 것이 렌더링 최적화에 유리하다.
UI 업데이트 상황들
Reflow
- 리플로우란
- 웹 인터랙션 발생 ➡️ 렌더링 과정의 레이아웃 처리를 다시 수행
- 리플로우를 발생시키는 속성
width,height,padding,margin,positon,border등 레이아웃에 영향을 주는 모든 속성
Repaint
- 리페인팅이란?
- 웹 인터랙션 발생 ➡️ 렌더링 과정의 페인팅을 다시 수행
- 리페인팅을 발생시키는 속성
color,background,boder-radius등 시각적으로 보여지는 모든 속성
Composite
- reflow, repaint가 일어나지 않는 속성
참고자료
브라우저 렌더링 과정을 (더 깊게) 알아보자
브라우저 렌더링 박사가 되고싶어요
velog.io
'TIL > Web' 카테고리의 다른 글
| [240205] 이미지 최적화 (1) | 2024.02.05 |
|---|---|
| [240203] CSR, SSG, SSR (0) | 2024.02.03 |
| [240112] 스크린리더 UX 개선하기 (0) | 2024.01.13 |
| [240111] 웹 표준, 웹 접근성 (0) | 2024.01.11 |
