정리노트: 브라우저의 렌더링 원리

 

GitHub - 1nno-vator/learn-archive

브라우저의 렌더링 원리 (22.08.13)

---

Summary: CRP (Critical Rendering Path) 절차를 거쳐서 렌더링된다.

CRP란?

1. HTML 파싱 + DOM 트리 구축
2. CSS 파싱 + CSS 트리 구축
3. Javascript 실행
   • HTML 파싱 중 Javascript를 만나면, HTML 파싱이 중단된다.
4. DOM 트리 & CSS 트리를 조합하여, Render 트리 구축
   • 'Display: none' 과 같이 보이지않으며, 자리를 차지하지 않는 것은 Render 트리로 구축되지않는다.
5. Render 트리의 각 Node들이 차지할 영역을 계산 (=픽셀계산) (Layout 혹은 Reflow)
6. 계산된 영역을 기반으로 화면에 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

---

추가 자료

• 깃허브 soolgnah님 - Frontend-Interview-Questions
• 10분 테코톡 - 체프의 브라우저 렌더링