[Web] 브라우저 렌더링 과정

안녕하세요.

오늘은 웹 브라우저의 렌더링 과정에 대해 알아보도록 하겠습니다.

 

들어가며

많은 이용자들은 웹에서 정보를 확인함에 있어 즉각적으로 확인하기를 기대하는 추세입니다. 즉, 조금이라도 늦게 된다면  웹 페이지의 사용자들은 기다려주지 않고 이탈이 빠르게 일어난다는 얘기이기도 합니다. 그런면에서 웹 브라우저에서의 렌더링 과정은 아름다운 이미지, 선명한 텍스트, 상호 작용 가능한 요소들이 완벽하게 배치시키고 빠르고 매끄럽게 표시하는데 있어 중요한 역할을 합니다. HTML과 CSS를 파싱하여 마지막 픽셀을 화면에 표시하기까지 어떠한 과정이 있을까요? 하나씩 알아보록 하겠습니다.

 

첫번째: HTML 및 CSS 파싱

렌더링 과정의 첫 단계는 파싱입니다. 사용자가 웹 페이지를 요청하면 브라우저는 해당 페이지와 관련된 HTML 및 CSS 파일을 가져옵니다. 이 후 브라우저는 HTML 및 CSS 코드를 해석하여 구조 및 스타일을 이해할 수 있는 형태로 분리합니다. 

HTML(HyperText Markup Language) 

HTML은 웹페이지의 구조와 내용을 정의합니다. 제목, 단락, 이미지, 동영상 등을 나타내는 태그를 사용하여 페이지의 구성 요소를 정의합니다.

CSS(Cascading Style Sheets)

웹페이지의 시각적 표현을 담당합니다. 글꼴, 색상, 여백, 위치 등을 제어하여 HTML의 단순한 구조를 시각적으로 매력적인 레이아웃으로 변환합니다.

두번째: Object Model 구축

다음으로, 브라우저는 HTML과 CSS가 파싱되면 브라우저는 각각의 Object Model을 구축합니다. 

DOM(Document Object Model) Tree - 계층적 요소 구성

HTML 태그를 반영하는 계층적 구조로 웹페이지의 구성을 나타냅니다. HTML 코드의 각 요소는 DOM 트리의 노드가 되며, 부모-자식 관계는 페이지 요소의 중첩 구조를 반영합니다.

CSSOM(CSS Object Model) Tree - 스타일과 요소 매칭

CSS 코드에 정의된 스타일 정보를 구성합니다. Style을 해당 DOM 트리의 요소와 연결하는 역할을 하여 코드 작성자가 의도한 대로 요소가 표현되도록 합니다.

세번째: Render Tree 생성

다음으로, 브라우저는 DOM 트리와 CSSOM을 결합하여 단일 구조로 결합하여 Render Tree를 생성합니다. 

Browser Render Tree (https://web.dev/articles/critical-rendering-path/render-tree-construction)

이 Render Tree는 DOM Tree에서 보이는 요소만 포함하며, 각 요소에는 CSSOM 트리에서 연결된 스타일 정보가 포함됩니다. CSS로 숨겨진 요소는 Render Tree에서 제외됩니다.
display: none
어떤 공간도 차지하지 않기 때문에 Render Tree에서 제외됩니다
visibility: invisible
공간은 차지하고 요소가 보이지 않게만 하기 때문에 Render Tree에 포함됩니다

네번째: Render Tree 배치 (Layout)

다음으로, 브라우저는 Render Tree가 준비되면 각 요소의 레이아웃을 계산하여 화면에 표시할 위치와 크기를 결정합니다.  

브라우저는 렌더 트리를 순회하며 각 요소의 스타일(여백, 패딩, 테두리) 및 다른 요소와의 관계를 기반으로 위치와 크기를 계산합니다. 이 과정을 통해 전체적인 시각적 구조가 형성됩니다.

다섯번째: Render Tree 그리기 (Painting)

다음으로, 브라우저는 Render Tree에서 계산된 레이아웃과 스타일 정보를 기반으로 웹 페이지를 그립니다.  

색상을 지정하고, 배경을 채우고, 텍스트와 이미지를 렌더링하며, CSS에 정의된 모든 시각 효과를 적용합니다. 이 단계는 코드의 추상적인 정보를 실제 화면에 표시되는 픽셀로 변환하는 래스터화 과정을 포함합니다.

여섯번째: 레이어 합성

요즘 웹페이지는 이미지, 애니메이션, 동적 콘텐츠 등 복잡한 요소들을 포함하는 경우가 많습니다. 브라우저는 합성이라는 기술을 사용하여 전체 화면을 다시 그리는 대신 변경된 영역만 업데이트하여 성능을 최적화합니다. 이를 위해 웹페이지를 여러 레이어로 나누고 각 레이어를 독립적으로 관리합니다.

예를 들어, 버튼 위에 마우스를 올리면 버튼 레이어만 업데이트하고 전체 페이지를 다시 그릴 필요가 없습니다. 이러한 방식으로 브라우저는 사용자 인터랙션에 대한 빠른 응답 속도와 매끄러운 애니메이션을 제공할 수 있습니다.

과정 요약

HTML 및 CSS 파싱
HTML 및 CSS 코드를 구조 및 스타일을 이해할 수 있는 형태로 분리합니다
Object Model 구축
　　DOM Tree
　　HTML 태그를 기반으로 웹페이지의 구조를 나타내는 계층적 구조를 생성합니다
　　CSSOM Tree
　　CSS 코드에 정의된 스타일 정보를 구성하고 DOM Tree의 요소와 연결합니다
Render Tree 생성
DOM 트리와 CSSOM을 결합하여 단일 구조로 결합하여 Render Tree를 생성합니다
Render Tree 배치
Render Tree에서 각 요소의 레이아웃을 계산하여 화면에 표시할 위치와 크기를 결정합니다
Render Tree 그리기
Render Tree에서 계산된 레이아웃과 스타일 정보를 기반으로 웹 페이지를 그립니다.
레이어 합성
성능을 최적화하기 위해 웹페이지를 여러 레이어로 나누고 변경된 영역만 업데이트합니다.

WebKit에서의 렌더링 과정 (https://web.dev/articles/howbrowserswork)

Gecko에서의 렌더링 과정 (https://web.dev/articles/howbrowserswork)

결론

브라우저의 렌더링 과정은 사용자가 매일 접하는 웹 브라우징 경험의 핵심 요소입니다. 코드를 시각적으로 변환하는 복잡한 과정을 이해함으로써 웹 개발자는 더욱 효율적이고 매력적인 웹사이트를 구축할 수 있을거라 생각합니다.

마치며

이 글도 브라우저의 렌더링 과정에 대해서 학습하기 위해 쌓아둔 메모를 모아 하나의 문서로 작성해보았습니다. 요즘 안쓰이는 곳이 없는 브라우저에서 동작하는 애플리케이션을 개발하는 개발자분들, 예비 개발자분들께 도움이 되었으면 좋겠습니다. 

 

긴 글 읽어주셔서 감사합니다.

내용이 잘못되었거나 문제가 있다면 편하게 댓글 부탁드립니다

 

렌더링 성능 분석 도구

Google PageSpeed Insights (이동)
Google PageSpeed Insights는 웹 페이지를 분석하고 데스크톱 및 모바일 장치에서 성능을 개선하기 위한 제안을 제공합니다. 서버 응답 시간, CSS 및 JavaScript 최소화, 이미지 최적화 등의 요소를 평가합니다.
WebPageTest (이동)
WebPageTest는 여러 위치 및 장치에서 웹 페이지의 성능을 테스트할 수 있는 도구입니다. 첫 번째 바이트로딩 시간, 시작 렌더 시간 및 완전 로드 시간과 같은 자세한 지표를 제공하여 개선할 수 있는 부분을 확인할 수 있습니다.
Lighthouse (이동)
Lighthouse는 Chrome DevTools에 통합된 오픈 소스 도구로, 웹 페이지의 성능, 접근성 및 SEO를 평가합니다. 렌더링 및 전반적인 사용자 경험에 대한 권장 사항을 제공합니다.
Chrome DevTools (F12)
Chrome DevTools는 웹 개발자를 위한 디버깅 및 프로파일링 도구 모음입니다. 타임라인 녹화, 성능 프로파일링 및 네트워크 분석과 같은 기능을 통해 렌더링 문제를 진단하고 성능을 최적화할 수 있습니다.