[Network]브라우저 렌더링 원리
안녕하세요. 성조입니다.
이 포스팅은 이전 포스팅의 내용을 이해 또는 참조하신 후 보시면 더욱 도움 됩니다.
2023.01.18 - [Network] - [Network] 브라우저 요청/응답 원리
[Network] 브라우저 요청/응답 원리
안녕하세요. 성조입니다. 이전 면접에서 웹 브라우저 요청/응답 원리에 대해서 답변하는 것이 시원하지 못해서 정리해 보려고 작성하게 됐습니다. 본인이 동작원리 학습 후 작성된 내용으로 부
okeybox.tistory.com
이전에 브라우저 요청/응답 원리에 대해서 포스팅했습니다.
이번 포스팅에서 브라우저 렌더링 원리를 포스팅하려는 이유는 요청했으면 응답으로 무엇을 어떻게 그려내는지 정리하기 위해서 포스팅해 보려 합니다.
혹시나 잘못된 지식 전달이 있다면 언제든지 댓글 남겨주시면 감사드리겠습니다.
전체 Flow 설명 및 그림
1. HTML 파싱
HTML 파싱은 브라우저가 HTML 코드를 읽어 들이고, 이해하고, 이를 DOM 트리로 변환하는 과정을 말한다.
[조금 더 상세 설명]
HTML 파싱이란 브라우저가 HTML 문서를 읽어 들이고 이해하는 과정을 말한다.
브라우저는 웹 서버로부터 응답받은 HTML 파일을 가지고 문자열로 읽어내는데 이 문자열은 마크업 언어의 형태로 작성되어 있다. 브라우저가 이 문자열을 읽어가며, 각 태그를 구분하고 이 태그가 무엇을 의미하는지 파악하게 된다. 이렇게 파악된 태그들이 각각의 노드(node)로 변환되며, 이 노드들의 관계를 토대로 트리 구조인 DOM (Document Object Model)이 생성되는 것이다.
DOM 트리는 HTML 문서의 모든 요소를 표현하게 된다.
예를 들면 body 태그는 DOM 트리의 한 노드가 되는데 그 밑에 <div>, <p>, <img>, <header>, <nav>와 같은 태그들이 body 태그의 자식 노드가 되며, 태그들은 계층적인 구조를 만들고 DOM 트리가 만들어진다.
DOM 트리는 자바스크립트(JavaScript)가 웹 페이지의 요소들을 조작할 수 있게 해주는 중요한 인터페이스이다. 자바스크립트는 DOM API를 통해서 DOM 트리에 존재하는 노드들을 선택, 추가, 수정, 삭제할 수 있다.
2. CSS 파싱
CSS 파싱은 브라우저가 CSS 코드를 읽고 이해하며, 이를 통해 웹 페이지의 각 요소에 어떤 스타일을 적용해야 하는 것인지 결정하는 과정을 말한다.
[조금 더 상세한 설명]
CSS 파싱은 브라우저가 CSS 파일 혹은 HTML 내의 인라인 CSS 스타일을 읽어 들이고 이해하는 과정을 말한다. 브라우저는 CSS의 문자열 데이터를 받아와서 분석하고, 그 결과를 CSSOM(CSS Object Model)이라는 트리 구조로 만든다. CSSOM은 HTML 문서의 DOM 트리와 매우 비슷한 구조를 갖게 된다.
CSSOM TREE는 CSS 선택자와 그 선택자에 부여된 스타일 규칙을 포함한다.
예를 들면 CSS 코드가 HTML 태그의 'testClass'라는 클래스 명을 가진 파일을 찾았다.
'. testClass { color : blue; }'라면 CSSOM 트리에는 'testClass'라는 클래스 선택자와 이 선택자의 color 속성이 blue라는 값으로 설정되어 있는 것을 표현한다.
3. JavaScript
자바스크립트는 웹 페이지에 동적인 기능을 추가하는 데 사용되며, 제어하는 영역에 가깝다. 중요한 점은 JavaScript의 스크립트는 HTML Parsing 이후에 발생하는 DOM Tree를 조작하는 것이지. CSSOM를 조작하는 것은 아니다.
브라우저가 웹 페이지를 렌더링 할 때, HTML 파싱 과정에서 <script> 태그 내의 자바스크립트 코드와 만나면 JavaScript 코드를 실행하기 위해 HTML 파싱을 일시 중단하게 된다. 이때 자바스크립트가 DOM API를 활용하여 DOM Tree의 노드를 검색(선택), 추가, 삭제, 수정 등의 처리를 HTML 파싱을 멈추고 진행하기 때문에 중간에 원하지 않는 순간 동작하면 "렌더 차단 자바스크립트"가 발생할 수 있다.
렌더를 차단하기 위해서 async 또는 defer와 같은 속성을 활용해서 비동기식으로 처리하는 방법도 있으며, 자바스크립트 코드를 HTML 문서의 바닥 부분에 배치하는 방법들이 있다.
JavaScript의 경우. 개발자가 선택한 로딩 전략 또는 스크립트의 위치나 의도에 따라서 다른 포지션에 들어갈 수 있다. JavaScript가 실행된다면 HTML 파싱이 일시적으로 멈추는 것으로 인하여 HTML과 CSS 이후에 처리되는 단계로 예를 집어넣었다.
[참고]
async
이 속성이 존재하면 브라우저는 스크립트를 비동기적으로 로드하게 된다. 스크립트 로딩과 실행은 병렬적으로 이뤄지며, HTML 파싱과 동시에 진행된다. 하지만, 'async' 스크립트가 실행될 때는 HTML 파싱을 잠시 중단시키게 된다.
defer
이 속성의 경우. 브라우저는 HTML 파싱을 계속하면서 스크립트 로딩을 병렬적으로 수행하도록 한다. 하지만 스크립트 실행은 HTML 파일이 모두 파싱 된 뒤에 실행되는 차이점이 있다.
4. Render Tree 생성
Render Tree 생성은 DOM 트리와 CSSOM 트리를 결합하여 화면에 실제로 그려질 요소들과 그 요소들의 스타일 정보를 포함한 새로운 트리를 만드는 과정이라 보면 된다. 이 과정을 통해서 브라우저는 웹 페이지를 어떻게 그려야 할 것인지 설계도를 그리게 된다.
[조금 더 상세 설명]
DOM 트리가 HTML 문서의 구조를 나타내는 것이라면, Render Tree는 이 구조가 실제로 어떻게 화면에 그려져야 할 것인지 설계도를 만들어내는 것이라 보면 좋을 것 같다.
렌더 트리에는 화면에 보이는 요소들만 포함되며, <head> 또는 <script> 태그와 같이 화면에는 보이지 않는 요소들, 또는 CSS에 의해 숨겨져 있는 요소들은 포함되지 않는 것이다.
ex) 마우스를 올렸을 때 색상이 변경되거나 특정 동작하는 것을 포함하지 않는다.
Render Tree의 각 노드는 CSSOM에 있는 스타일 정보를 가지고 있으므로, 브라우저는 이 Render Tree를 통해 각 요소가 어떤 스타일로 화면에 그려져야 하는지 알 수 있게 된다.
설계 구조를 통해서 각 요소가 화면에 어떻게 그려져야 하는지 또한, 어떤 스타일로 그려내야 하는 것인지 정보가 담긴 것이라 보면 된다.
5. Layout(Reflow)
Layout 단계는 Render Tree 이후에 이뤄지는 단계로 HTML 요소의 크기와 위치를 계산한다. 이 단계에서 생성되는 것이 바로 '박스 모델'이다. 이는 화면상에서 실제 요소의 위치, 크기, 여백, 테두리 등을 표현한다.
먼저 HTML 요소의 너비와 높이를 계산한다. 이 크기는 해당 요소의 콘텐츠, 패딩, 테두리, 여백등을 포함하게 되는데 이 작업을 넘어가면서 브라우저는 각 요소의 좌표를 계산하여 이들을 화면의 어떤 위치에 배치하고 쌓아서 보여줘야 할 것인지 정한다.
이 과정도 성능에 영향을 주기 때문에 레이아웃 변경이 최소화로 일어날 수 있도록 해야 한다.
[참조 자료]
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model
상자 모델 - Web 개발 학습하기 | MDN
CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우
developer.mozilla.org
6. 페인팅 (Painting)
페인팅 단계는 브라우저 렌더링 파이프라인에서 레이아웃 다음 단계에 이뤄지는 과정으로 이 단계에서는 렌더 트리의 각 노드를 실제 픽셀로 변환하여 화면에 그리는 작업이 이뤄지는 곳이다. 또한, 브라우저는 레이아웃 단계에서 계산된 정보(각 요소의 위치, 크기, 설정 등)를 바탕으로, 렌더 트리의 각 노드가 화면의 어느 부분에 그려져야 할지를 결정하게 된다. 캔버스(Canvas)와 같이 그려내는 과정이라 생각하면 좋다.
페인팅은 크게 두 가지 과정으로 나뉜다.
"레이어 페인팅"과 "합성"으로 나눠지는데 레이어 페인팅에서는 브라우저
레이어 페인팅
브라우저가 렌더 트리의 각 노드를 실제 픽셀로 변환하며, 이 과정에서 텍스트, 생상, 이미지, 테두리 등의 시각적 요소가 그려진다.
합성
레이어 페인팅으로 생성된 여러 레이어를 하나로 합쳐 최종 이미지를 만든다.
주의해야 할 점으로 페인팅도 레이아웃과 마찬가지로 그래픽을 활용하기 때문에 텍스트에 비해서 비교적 무거운 작업이라는 것이다. 그렇기 때문에 페인팅 작업을 최소화하는 것은 성능 향상에 많은 연관관계가 있다. 최적화된 CSS를 사용하거나 변경되는 부분만 재페인팅하는 등의(React와 같이 가상 돔을 활용) 기법을 사용하는 것으로 속도를 증가시킬 수 있다.
7. 합성(Compositing)
마지막으로, 브라우저는 가져왔던 여러 개의 레이어를 올바른 순서대로 층을 쌓고, 합성하여 최종 이미지를 생성하고 사용자에게 보여준다. 또한, 효율적으로 활용할 수 있도록 필요한 부분만 페인팅하고 다시 합성하여 사용하는 것이 가능하다.
또한, 브라우저에 어떤 순서로 합성될 것인지에 대한 문제는 별도의 문제가 있다. 일반적으로 레이어 순서는 z-index, 위치 등에 따라 결정되며, 이 순서대로 레이어들이 합성되는데 이 우선순위 점수를 측정하여 합성하는 것까지 완성해야 최종 화면을 형성하게 되는 것이다.
본인이 참고했던 홈페이지에 상호작용(Interactivity)이라는 내용도 있는데 합성 과정이 완료된 것처럼 보일 수 있으나 불러오는 과정에서 자바스크립트가 지연될 수 있으며, 그런 경우 이벤트가 발생한 후에 실행되는 자바스크립트 기능도 있다. 그래서 스크롤을 내릴 때 발생하는 이벤트, 스크롤 효과 또는 마우스를 올렸을 때. 화면이 변경되는 등 다양한 이벤트들이 있다는 얘기를 전하고 있다.
오타나 궁금한 내용이 있다면 언제든지 댓글로 얘기해 주시면 감사드리겠습니다.
다음 포스팅 때 뵙겠습니다. 감사드립니다.
- 참조 -
https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
Populating the page: how browsers work - Web performance | MDN
Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법 - Web API | MDN
<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/The_box_model
상자 모델 - Web 개발 학습하기 | MDN
CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우
developer.mozilla.org