브라우저 렌더링

브라우저 렌더링

렌더링?

렌더링이란?  HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.

렌더링 과정 

1단계) DOM, CSSOM 트리 생성

사용자가 브라우저를 통해 웹사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드한다. 브라우저가 페이지를 렌더링 하려면, 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다.

 

DOM?

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 

 

🙌 파싱(Parsing 구문분석)  : 파싱이란 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출

                                              하여 정보를 가공하는 것이다.

 

DOM 트리 생성

 

1. 변환 : 브라우저는 전송받은 HTML의 8비트의 데이터(바이트 스트림 : 바이트 스트림은 데이터를 바이트 단위로 주고받는 것을 말

                함)를 문자로 변환한다

 

2. 토큰화 :  가지고 있는 토큰과 비교하여, 해당 문자가 html 코드인지 확인하는 과정

 

🙌 토큰이란?

      브라우저에 저장되어 있는 시작 혹은 종료태그  그리고 속성, 속성 값 등 약속된 여러 가지 값들을 의미한다.

      즉 해당 문자(8비트의 데이터 ==> 문자)가 html코드인지 확인하는 일종의 설명

 

3. 노드 :  토큰화 과정을 통해 노드가 생성됨. 노드란, dom 트리를 이루는 한 단위

 

4. dom 트리 : 노드들이 모여서 트리 구조를 이루는데, 'dom 트리'라고 한다.

 

출처 : 멋사 FE 교안

 

CSSOM(CSS Object Model) 트리 생성

 

HTML 파싱 과정과 유사하다

브라우저로부터 전달받은 CSS파일을 문자로 해석, 가지고 있는 토큰과 비교하여 노드 발행, 노드들이 모여서

CSSOM 트리 생성

 

출처 : 멋사 FE 교안

2단계) 렌더 트리 생성(레이아웃 단계)

렌더링을 목적으로 만드는 트리이다. 렌더링은 브라우저가 이제 진짜로 사용자에게 보여주기 위한 화면을 그리는 과정이기 때문에, 보이지 않을 요소들은 이 트리에 포함하지 않는다. 예를 들어, DOM에서는 meta태그 같은 정보전달 목적의 태그나, CSSOM에서는 display:none으로 보이지 않게 해 둔 요소 (정확히는 노드)들은 렌더 트리에서는 제외된다. (단, visibility: hidden은 레이아웃 트리에 포함되니 주의하기!)

 

3단계) 페인팅 단계

브라우저 화면은 픽셀이라고 하는 정말 작은 점들로 이루어져 있다. 각각 정보를 가진 픽셀들이 모여 하나의 이미지, 화면을 구성하는 것이다. 따라서 화면에 색상을 입히고, 어떤 요소를 보여주기 위해서는 이 픽셀에 대한 정보가 있어야 한다. 페인팅은 이러한 픽셀들을 채워나가는 과정이다. 

4단계) Composite

생성된 레이어를 합성하는 과정 하여 모니터로 내보내는 과정이다. 이 단계 끝나면 화면상에 웹페이지가 나타나게 된다.

번외. 리플로우 리페인트

리플로우 = 레이아웃 계산을 다시 하는 것
리페인트 = 새로운 렌더트리를 바탕으로 다시 페인트를 하는 것

만약 사용자가 브라우저 화면을 늘리거나 줄이는 등 크기를 조절하거나, 어떤 버튼을 눌러 화면에 요소가 추가되거나 삭제되는 경우가 생기면, 당연히 화면에 있던 요소들의 위치나 크기 등이 바뀌는 일이 생기게 될 것이다. 굉장히 당연하게 여겨지지만, 이렇게 화면에 나타나는 모습을 바꾸기 위해서는 모든 요소들의 위치와 크기를 다시 계산하고, 다시 그려서 보여주어야 한다. 이렇게 어떤 인터랙션으로 인해 앞서 보았던 레이아웃, 페인팅 과정을 반복하는 것을 리플로우, 리페인트라고 한다.

 

🙌 리플로우와 리페인트가 반드시 순차적으로 동시에 실행하는 것은 아니다. 레이아웃의 영향이 없는 변경은 리플로우

      없이 리페인트만 실행

 

🙌 transform, opacity는 리플로우 리페인트 생략

      why? 돔 트리를 변경하지 않도록 설계가 되어, 브라우저는 굉장히 쾌적하게 화면을 렌더링 할 수 있다.

      때문에 transform은 애니메이션 작업을 많이 한다.