브라우저 렌더링

1. 브라우저 렌더링

• 렌더링(Rendering): HTML, CSS, JavaScript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

브라우저 렌더링 과정

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

 

1-1. 파싱(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 트리로 파싱하고, <script> 태그를 만날 경우 렌더링을 차단하면서 HTML 파싱 또한 중단함. 이어 <script> 태그 내 src 속성으로 연결된 파일을 다운받아 파싱하고 실행시킨 뒤 다시 HTML 파일을 파싱하기 시작함

 

1-2. DOM Tree

• DOM(Document Object Model): HTML문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것을 의미

 

1-3. CSSOM(CSS Object Model) Tree

CSSOM(CSS Object Model) Tree

• html 파일을 DOM 트리로 파싱하던 브라우저는 <link>, <style> 태그를 만나게 되면 파싱을 잠시 멈추고 해당 리소스 파일을 서버로 요청함. 이렇게 요청한 파일을 html 파일과 마찬가지로 파싱을 하는데, 파일을 파싱해 만든 트리를 CSSOM이라 함.

1-4. 렌더 트리(Render Tree)

렌더 트리(Render Tree)

• DOM 트리, CSSOM 트리는 구조만 트리로 같을 뿐, 서로 다른 속성을 가진 독립적인 트리라서 둘을 합치는 작업이 필요함. 
• 즉, 렌더 트리는 렌더링을 목적으로 이 둘을 합쳐서 만드는 트리임

 

1-5. 레이아웃

• 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정
• 렌더 트리는 페인팅이라는 작업을 거쳐야 브라우저 위의 화면으로 그려지게 됨.
• 각 요소가 전체 화면에서 어디에, 어떤 크기로, 어떻게 배치되어야 하는지 파악하기 위해 렌더 트리를 위에서 아래로 읽어 내려감. 모든 값은 절대적인 단위인 px 값으로 변환됨.

 

1-6. 페인팅

• 위치에 대한 계산이 끝나고 화면에 보여주기 위해 브라우저는 화면 위에 레이아웃에서 결정된 대로 그림을 그리기 시작함.
• 브라우저 화면은 픽셀이라 하는 작은 점들로 구성되어 있으며 각 정보를 가진 픽셀들이 모여 하나의 화면을 구성함.
• 이런 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정이 페인팅. 

 

2. 리플로우(Reflow), 리페인트(Repaint)

• 사용자가 브라우저 화면을 늘리거나 다른 사이트로 이동하는 등, 화면에 있는 요소들이 바뀔 때 화면에 나타나는 모습을 바꾸기 위해 모든 요소의 위치, 크기를 다시 계산하고 다시 그리는 것
• 리플로우(Reflow): 어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것
• 리페인트(Repaint): 페인트 과정을 반복해서 수행하는 것
• 최적화 방법
  1. 불필요한 레이아웃을 줄인다.
  2. 영향을 주는 노드를 줄인다.
• 리플로우가 일어나는 속성들

리플로우가 일어나는 속성들

• 리페인트가 일어나는 속성들

리페인트가 일어나는 속성들