프로그래밍/정리노트
정리노트: 브라우저의 렌더링 원리
김민쏭
2022. 8. 13. 23:00
GitHub - 1nno-vator/learn-archive
Contribute to 1nno-vator/learn-archive development by creating an account on GitHub.
github.com
브라우저의 렌더링 원리 (22.08.13)
Summary: CRP (Critical Rendering Path) 절차를 거쳐서 렌더링된다.
CRP란?
- HTML 파싱 + DOM 트리 구축
- CSS 파싱 + CSS 트리 구축
- Javascript 실행
- HTML 파싱 중 Javascript를 만나면, HTML 파싱이 중단된다.
- DOM 트리 & CSS 트리를 조합하여, Render 트리 구축
- 'Display: none' 과 같이 보이지않으며, 자리를 차지하지 않는 것은 Render 트리로 구축되지않는다.
- Render 트리의 각 Node들이 차지할 영역을 계산 (=픽셀계산) (Layout 혹은 Reflow)
- 계산된 영역을 기반으로 화면에 Render (=픽셀화) (Paint 혹은 래스터화)
추가 용어정리
- 렌더링 엔진: 렌더링을 수행하는 엔진
- Chrome의 Blink, Safari의 Webkit, Firefox의 Gecko 라는 엔진이 렌더링을 담당한다.
- Chrome의 V8 엔진은 Javascript 엔진이다.
- 파싱: 내부 포멧을 분석하고 변환하는 것 = 문서 내용을 Token화하고 Parse Tree를 생성하는 과정
- DOM (Document Object Model): 트리구조로 태그들을 만들어내 HTML, XML을 프로그래밍 언어에서 접근할 수 있도록 연결해주는 역할을 하는 일련의 인터페이스
- Reflow(리플로우): Render 트리에 각 Node들이 차지할 영역을 계산하는 것 (=Layout)
- Repaint(리페인트): 계산된 영역을 기반으로 화면에 그리는 것 (=Paint)
- Reflow가 발생하면 무조건 Repaint가 발생한다.
- 기존 요소 변경이 일어났다고 무조건 Reflow가 발생하진 않는다. (= Repaint 단계로 바로 이동)
- Reflow가 일어나는 속성: position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
- Repaint만 일어나는 속성: background, color, text-decoration, border-style, border-radius