[BROWSER]browser rendering

브라우저 렌더링

HTML, CSS, JavaScript 등 문서가 브라우저에서 출력되는 과정

1. 웹 사이트 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript 등 필요한 리소스 다운
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리 생성
4. 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리 생성
5. 만든 DOM 트리와 CSSOM 트리 결합, Render 트리 구축
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정
7. 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리 화면 출력. 이 과정을 paint라고 합니다.

---

파싱(Parsing)

프로그래밍 언어 파일 실행을 위한 구문 분석(syntax analysis) 단계

파서(parser)가 진행, HTML 파일의 코드를 문법적 의미를 갖는 최소 단위인 토큰(token)으로 한 번 분해, 문법적 의미와 구조에 따라 노드(node)라는 요소로 바꿈, 노드는 관계에 따라 하나의 트리 형성, 파스 트리(parse tree), 혹은 문법 트리(syntax tree)

문서 파싱(document parsing) - 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것, 렌더링 과정에서는 HTML 파일을 바탕으로 DOM 트리를 구축하고 및 CSS 파일로 CSSOM 트리를 만드는 것

• 브라우저는 HTML 문서를 받아들자마자 DOM 트리로 파싱. 이때 HTML 토큰 생성, 이 토큰에는 시작 태그, 마침 태그, 속성 이름, 값 포함. 이런 토큰으로 변한 입력 값은 파서에 의해 노드가 되고, 최종적으로 트리 구조 DOM으로 구성

• 브라우저는 HTML 문서를 파싱하면서 CSS을 만나면, 텍스트를 CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱, 태그를 만나면 렌더링을 차단하면서 HTML 파싱 또한 중단. script 파일을 다운 받아 파싱하고 실행시킨 뒤 다시 HTML 파싱

---

DOM Tree

CSSOM Tree

<link>, <style> 태그를 만나게 되면 파싱을 멈추고 해당 리소스 파일을 서버로 요청. 요청한 파일을 파싱을 하는데, 파일을 파싱해 만든 트리를 CSSOM

CSS는 부모의 속성을 자식이 상속 받음

렌더 트리(Render Tree)

보이지 않을 요소들은 이 트리에 포함시키지 않음

---

레이아웃

렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정, 위치에 대한 계산

페인팅

---

리플로우(Reflow)와 리페인트(Repaint)

어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것 리플로우, 페인트 과정을 반복해 수행하는 것 리페인트

---

리플로우와 리페인트의 최적화

초당 60 프레임은 반드시 유지

DOM은 변경이 되면 렌더 트리를 다시 구축, 변경이 될 때마다 리플로우와 리페인트를 다시 해야 함

리플로우는 렌더링을 다시, 배치를 위한 연산을 해야 해 CPU 많이 차지, 리페인트는 페인트를 다시 픽셀을 다시 화면에 그리기 때문에 GPU많이 차지. 따라서 프레임 드랍(Frame Drop) 현상과 연관 .

• 불필요한 레이아웃을 줄입니다.
• CSS에서 레이아웃, 페인트를 발생시키는 속성들
  • 리플로우가 일어나는 대표적인 속성 - position, width, height, reft, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align…
  • transform에 있는 translate를 사용하면 좌표 값을 사용해 위치를 이동, 레이아웃을 발생시키지 않고 페인트만 다시 발생
  • 리페인트가 일어나는 대표적인 속성 - background background-image, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, clear, display, float, font-family, font-size, font-weight, outline-color, visibility…
  • visibility/display 보다 opacitiy 사용
• 영향을 주는 노드를 줄입니다.