브라우저 렌더링 과정을 설명할 수 있나요?

프론트엔드 개발자라면 필수로 알고 있어야 하는 브라우저 렌더링 과정!

사실 지금까지의 개발은 많은 부분들이 그 기술에 대해서만 공부하고, 원리만 조금 알고서 공식문서를 보며 코드를 작성했던 것 같습니다.

브라우저에 어떻게해서 이런 화면이 나타나고 그런건 고민해본 적이 없는 것 같은데요.

취업 준비를 하다보니 이러한 지식을 필수로 알고있어야 했고 저는 프론트엔드 개발자로서 한발자국 더 성장하기 위해 CS관련 지식을 쌓고 있습니다.

 

그래서 거두절미 하고 현재 면접에서 브라우저 렌더링 과정을 설명할 수 있나요? 라고 질문을 받는다면, 현재까지는 "아니요" 입니다.

관련 자료를 찾아봤습니다.

그래서 브라우저 렌더링이 뭔데..? 

브라우저 렌더링이란,

HTML, CSS, JavaScript 등 개발자가 작성한 문서들을 브라우저가 화면에 그려주는 동작 

이라고 합니다.

 

브라우저의 공통적인 구조

제가 알아본 브라우저의 공통적인 구조는 7가지 입니다.

• 주소표시줄, 이전/다음/새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 하는 "사용자 인터페이스"
• HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 “렌더링 엔진”
• 유저 인터페이스와 렌더링엔진을 연결하는 “브라우저 엔진”
• 네트워크 요청을 수행하는 “네트워킹 파트”
• 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 “UI백엔드 파트”
• 로컬스토리지나 쿠키같이 보조기억장치에 데이터를 저장하는 파트
• 자바스크립트 코드를 실행하는 “인터프리터”

이런 형식으로 되어있다고 합니다.

 

 

브라우저의 렌더링 과정

이제 렌더링 과정을 알아보려고 하는데요.

사용자가 브라우저를 통해 웹사이트에 접속하면 서버로부터 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받는다고 합니다.

브라우저가 페이지를 렌더링 하려면 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다고 합니다.

 

1-1. DOM 트리 생성

아래 그림은 HTML 코드가 DOM 트리로 변환되는 과정을 그림과 간단한 순서로 표현한 것 입니다.

돔트리 돔트리 얘기는 많이 들어봤는데 이렇게 생겼군요..!

https://bit.ly/2WochoN

1. 변환 : 브라우저가 HTML의 원시 바이트를 읽어와서 HTML에 정의된 인코딩(예: UTF-8)에 따라 개별 문자로 변환합니다.

2. 토큰화 : 브라우저가 문자열을 W3C표준에 지정된 고유 토큰으로 변환합니다.

3. 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 "객체"로 변환됩니다.

4. DOM 생성 : 마지막으로 HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결이 됩니다.

- 브라우저는 HTML 마크업을 처리 할 때마다 위의 모든 단계를 수행한다고 합니다.

 

1-2. CSSOM 트리 생성

HTML 마크업 내 직접(inline) 스타일을 선언할 수도 있지만, head 태그에 외부(external) CSS 파일을 참조하거나

head 태그에 style 태그(internal)를 정의 할 수 있다고 합니다.

HTML과 마찬가지로 외부(eternal) CSS 파일에 정의된 스타일과 style 태그에 작성된 스타일을 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 한다고 합니다.

 

아래는 DOM트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성하는 과정을 표현한 그림입니다.

https://bit.ly/2Vg5Nb0

이러한 과정을 거쳐 마지막으로 CSSOM(CSS Object Modal)이라는 트리구조가 생성이 됩니다.

https://bit.ly/2WxQefH

 

2. 렌더링 트리(Rendering Tree) 생성

DOM트리와 CSSOM트리가 만들어지면, 이 둘을 결합해서 렌더링 트리가 생성되는데요.

렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함 된다고 합니다.

https://bit.ly/3iQ3ovQ

3. 레이아웃(Layout) 단계

레이아웃 단계에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box모델이 출력되는데요.

모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다고 합니다.

https://bit.ly/3xdGFyN

4. 페인팅 단계

마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다고 하는데요.

레이아웃 단계에서 모든 계산이 완료되면, 화면에 요소들을 그리게 됩니다.

이 단계를 "페인팅" 또는 "래스터화"라고 한다 합니다.

 

이미 레이아웃 단계에서 각 노드들이 위치,크기,색상 등 스타일이 모두 계산 되었기 때문에 화면에 실제 픽셀로 변환하게 됩니다.

 

 

 

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

리플로우와 리페인트는 DOM요소가 시각적으로 변경됐을 때, 이 변화를 다시 계산하고 화면에 그려주는 작업입니다.

 

리플로우

1. DOM 요소의 기하학적 속성이 변경될 때
2. 브라우저 사이즈가 변할 때
3. 스타일시트가 로딩되었을 때

발생하는 변화들을 다시 계산해주는 작업을 뜻하고 레이아웃 이라고도 합니다.

이런 요인에 의해 변화된 요소 주변의 모든 부모,자식,형제 요소들도 영향을 받게 되는데요.

결국 DOM요소 하나의 시각적 변화가 DOM트리 전체에 대해 다시 계산을 수행하게 됩니다.

 

리플로우는 단지 변경사항을 반영하기 위해 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것 입니다.

리플로우가 일어나는 대표적인 속성들을 적어보겠습니다.

position width height margin padding border border-width font-size font-weight line-height text-align overflow

 

리페인트

리플로우의 결과를 화면에 그려지기 위해 다시 페인팅 단계를 수행하는 것을 말합니다.

리페인트"만" 일어나는 대표적인 속성들 입니다.

background color text-decoration border-style border-radius

 

 

이렇게 공부하면서 정리를 해봤는데요.

글로 정리를 하자니 너무 장황하게 보여서 면접 때 질문이 온다면 어떻게 설명할 것인가에 대해 고민해봤습니다.

 

1. HTML문서를 파싱하여 DOM트리를 생성하고,

2. CSS파일을 파싱하여 CSSOM트리를 생성합니다.

3. 앞에서 생성된 DOM트리와 CSSOM트리를 결합하여 Rendering Tree를 생성합니다.

4. Rendering Tree에서 각 노드의 크기와 위치를 계산하여 레이아웃을 생성하는데요.  요소의 위치나 크기가 변경될 때에 레이아웃을 다시 계산하고 Rendering Tree를 다시 구성하는데 이것을 리플로우 라고 합니다. 이 레이아웃 과정에서 리플로우가 발생할 수 있습니다.

5. 브라우저가 레이아웃을 이용하여 화면에 그립니다. 이 과정에서 리페인트라는게 발생할 수 있는데요.
레이아웃이 변경되지 않고 스타일만 변경되는 경우 발생됩니다. 

 

이러한 과정으로 브라우저가 렌더링 됩니다.

 

 

대략 이정도로 설명을 할 수 있을 것 같습니다.

이렇게 한번 쫙 설명식으로 정리를 하고 요약하니 머리에 쏙쏙 들어오네요 :)