<div id="readability-page-1" class="page"><div><h2 id="1-브라우저란-chrome-safari-등">1. 브라우저란? (Chrome, Safari 등)</h2>
<img src="https://media.vlpt.us/images/mnz/post/00d34f0d-6674-413e-ad6b-facc59b51195/web-browser.png">
<blockquote>
사용자가 보고자 하는 페이지를 서버에 요청하고 받은 응답(HTML, CSS, JavaScript 등)을 표시한다.
</blockquote>
 
<hr>
 
<h3 id="1-1-기본-구조">1-1. 기본 구조</h3>
<img src="https://media.vlpt.us/images/mnz/post/6adce0c9-9856-4a9c-9146-608b43b8b83f/web-browser-structure.png">
<ol>
<li>
User Interface
<ul>
<li>요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. (주소창, 이전/다음 버튼, 북마크 메뉴 등)</li>
</ul>
</li>
<li>
Browser Engine
<ul>
<li>UI와 렌더링 엔진 사이의 동작을 제어한다.</li>
</ul>
</li>
<li>
Rendering Engine
<ul>
<li>요청한 콘텐츠를 표시한다.</li>
<li>HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.</li>
</ul>
</li>
<li>
Networking
<ul>
<li>네트워크 호출에 사용한다. (HTML 요청 등)</li>
</ul>
</li>
<li>
User Interface Backend
<ul>
<li>UI 구동이 가능하게 한다.</li>
<li>UI와 운영체제를 연결한다. (윈도우 관리 등)</li>
</ul>
</li>
<li>
JavaScript Interpreter
<ul>
<li>자바스크립트 코드를 해석하고 실행한다.</li>
</ul>
</li>
<li>
Data Storage
<ul>
<li>저장 가능 영역을 관리한다. (cookie, local storage 등)</li>
</ul>
</li>
</ol>
 
<hr>
 
<h3 id="1-2-주요-역할">1-2. 주요 역할</h3>
<ol>
<li>
사용자가 입력한 자원(웹 페이지, 이미지, 동영상 등)을 서버에 요청하는 역할
</li>
<li>
서버로부터 전달받은 자원을 화면에 출력하는 역할
</li>
</ol>
 
<hr>
 
<h3 id="1-3-렌더링-원리">1-3. 렌더링 원리</h3>
브라우저가 화면에 나타나는 요소를 렌더링할 때, Webkit(Safari, Chrome에서 사용)이나 Gecko(Firefox에서 사용)와 같은 렌더링 엔진을 사용한다.
 
<hr>
 
<h3 id="1-4-렌더링-엔진-역할">1-4. 렌더링 엔진 역할</h3>
요청 받은 내용을 브라우저 화면에 표시하는 일을 한다.
 
<hr>
 
<h2 id="2-렌더링-과정--crpcritical-rendering-path">2. 렌더링 과정 :: CRP(Critical Rendering Path)</h2>
<ol>
<li>
Loading
<ul>
<li>로더가 HTTP 모듈 또는 파일 시스템으로 전달받은 리소스 스트림을 읽는 과정이다.</li>
</ul>
</li>
<li>
HTML, CSS를 Object Model로 만들기
<img src="https://media.vlpt.us/images/mnz/post/62b9f293-96f9-4540-9048-a539cf2f19ef/parse-html.png">
<img src="https://media.vlpt.us/images/mnz/post/53444397-ab87-4505-b7e5-3884e1743779/parse-css.png">
<ul>
<li>DOM(Document Object Model) :: HTML 태그를 JavaScript에서 이용할 수 있는 객체로 만드는 것이다.</li>
<li>Parsing :: 문자열을 의미있는 토큰으로 분해하고, 문법적 의미와 구조를 반영하여 파스 트리를 만드는 과정이다.</li>
<li>HTML 파서에 의해 파싱 후, DOM 트리를 구축한다.</li>
<li>CSS 파서에 의해 파싱 후, CSSOM 트리를 구축한다.</li>
</ul>
</li>
<li>
JavaScript 실행하기
<img src="https://media.vlpt.us/images/mnz/post/b8518b7a-8fae-4d92-a00b-35aa309400dd/script-label.svg">
<img src="https://media.vlpt.us/images/mnz/post/42f4259e-abb1-4d56-ab37-7e702a68bf81/script.svg">
<ul>
<li>
HTML 중간에 Script가 있으면 HTML 파싱을 중단하고 JavaScript 엔진으로 제어 권한을 넘긴다.
</li>
<li>
JavaScript 엔진은 <code>&lt;script&gt;</code> 태그 내의 JavaScript 코드 혹은 <code>script</code>의 <code>src attribute</code>에 정의된 JavaScript 파일을 파싱해서 AST를 생성한다.
</li>
<li>
JavaScript 파일을 파싱해서 AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성하여 실행한다.
</li>
<li>
JavaScript는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다.
</li>
<li>
변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다. (7번 Reflow, 8번 Repaint에 해당하는 내용)
</li>
</ul>
</li>
<li>
DOM과 CSSOM을 조합하여 렌더 트리 구축하기
<img src="https://media.vlpt.us/images/mnz/post/2d769ea9-88a1-41e6-8c11-ee30c1061bae/parse-html-css.png">
<ul>
<li>렌더 트리는 렌더링을 위한 트리 구조의 자료구조로, 브라우저 화면에 렌더링되는 노드만으로 구성된다.</li>
</ul>
</li>
<li>
Layout
<ul>
<li>뷰포트 기반으로 렌더 트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.</li>
</ul>
</li>
<li>
Paint
<ul>
<li>화면상의 실제 픽셀로 변환한 후 계산한 위치와 크기를 기반으로 화면에 그린다.</li>
</ul>
</li>
<li>
Reflow
<ul>
<li>
JavaScript 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경된다.
</li>
<li>
이때 변경된 DOM과 CSSOM은 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃을 다시 계산한다.
<ul>
<li>
요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height 등)
</li>
<li>
윈도우 리사이징 (viewport 크기 변경)
</li>
<li>
노드 추가 또는 제거 등
</li>
</ul>
</li>
</ul>
</li>
<li>
Repaint
<ul>
<li>
재결합된 렌더 트리를 다시 화면에 그려주는 과정이다.
</li>
<li>
<code>background-color</code>, <code>visibility</code>와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행한다.
</li>
</ul>
</li>
</ol>
 
<hr>
 
<h3 id="2-1-html-css를-object-model로-만들기-추가-내용">2-1. HTML, CSS를 Object Model로 만들기 추가 내용</h3>
<blockquote>
Renderer는 DOM 트리 요소들에 적용되지만 1:1 관계가 성립하는 것은 아니다.
</blockquote>
시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없다. <code>&lt;head&gt;</code> 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않는다. 따라서 그 어떤 Renderer도 적용될 수 없다.
 
<hr>
 
<h3 id="2-2-javascript-실행하기-추가-내용">2-2. JavaScript 실행하기 추가 내용</h3>
<blockquote>
<code>&lt;body&gt;</code> 요소 가장 아래에 <code>&lt;script&gt;</code> 태그를 위치하는 것이 가장 좋은 방법이다.
</blockquote>
화면 로딩이 줄어 더 좋은 사용자 경험을 줄 수 있다. 또한, DOM이 완성되지 않은 상태에서 JavaScript가 DOM을 조작하여 에러가 발생하는 상황을 방지할 수 있다. <code>&lt;head&gt;</code>에 <code>&lt;script&gt;</code> 태그를 삽입하는 경우 모던 브라우저에서는 <code>async</code>, <code>defer</code> 속성을 사용할 수 있다.
 
<blockquote>
async
</blockquote>
<img src="https://media.vlpt.us/images/mnz/post/e9c91507-93cd-48ce-8d4a-59c5a9616c90/script-label.svg">
<img src="https://media.vlpt.us/images/mnz/post/e0d4628e-e980-402c-b3e8-bf17173a4296/script-async.svg">
브라우저에 script 파일이 비동기적으로 실행될 수 있음을 나타내기 위해 사용할 수 있다. HTML 구문 해석기는 script 태그에 도달한 지점에서 script를 가져오고 실행하기 위해 일시 중지할 필요가 없다. 그러나 완료된 순서로 자바스크립트 파일이 실행되므로 실행 순서를 보장할 수는 없다.
 
<blockquote>
defer
</blockquote>
<img src="https://media.vlpt.us/images/mnz/post/34ebc6b9-b064-46dd-b6db-8b66df6643a0/script-label.svg">
<img src="https://media.vlpt.us/images/mnz/post/22887134-a017-4046-9416-ad92f88aebf5/script-defer.svg">
HTML 구문 분석을 완전히 완료하고 script 파일을 실행하도록 브라우저에 지시한다. <code>async</code> 속성과 차이점은 HTML 구문 분석이 완료되기 전에 script 다운로드가 완료되더라도 구문 분석을 끝낼 때 까지 script를 실행하지 않는다.
 
<hr>
 
<h3 id="2-3-reflow-repaint-추가-내용">2-3. Reflow, Repaint 추가 내용</h3>
<blockquote>
사용하지 않는 노드에 <code>visibility: invisible</code> 보다 <code>display: none</code> 사용하기
</blockquote>
<code>visibility: invisible</code>은 레이아웃 공간을 차지해서 Reflow 대상이다. <code>display: none</code>은 레이아웃 공간을 차지하지 않아 렌더 트리에서 아예 제외되어 Reflow 하지 않는다.
 
<blockquote>
Reflow, Repaint가 발생하는 속성 사용 피하기
</blockquote>
Reflow Repaint가 일어나지 않는&nbsp;<code>transform</code>,&nbsp;<code>opacitiy</code>와 같은 속성도 있다. 따라서&nbsp;<code>left</code>,&nbsp;<code>right</code>,&nbsp;<code>width</code>,&nbsp;<code>height</code>&nbsp;보다&nbsp;<code>transform</code>을,&nbsp;<code>visibility/display</code>&nbsp;보다&nbsp;<code>opacitiy</code>를 사용하는 것이 성능 개선에 도움이 된다.
 
<blockquote>
Virtual DOM
</blockquote>
Virtual DOM은 변화가 일어나 Reflow, Repaint가 필요한 것들을 한 번에 묶어서 DOM에 전달한다.
 
<hr>
 
<h4 id="참고-자료-">참고 자료 📩</h4>
<a href="https://github.com/baeharam/Must-Know-About-Frontend/blob/main/Notes/frontend/browser-rendering.md">Must Know About Frontend</a>
<a href="https://velog.io/@gay0ung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%9B%90%EB%A6%AC">브라우저 렌더링 원리</a>
<a href="https://www.huskyhoochu.com/how-browser-works/">브라우저의 동작 원리와 렌더링 최적화</a>
<a href="https://it-ist.tistory.com/110">[웹개발] 브라우저의 작동 원리</a>
<a href="https://jess2.xyz/web/browser-rendering/">[WEB] 브라우저 렌더링 원리 알아보기</a>
<a href="https://kyun2da.dev/CS/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%8A%94%EA%B0%80/">브라우저는 어떻게 동작하는가</a>
<a href="http://devcecy.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%A0%EA%B9%8C/">브라우저는 어떻게 렌더링 될까?</a>
<a href="https://wormwlrm.github.io/2021/03/27/How-browsers-work.html">프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정</a></div></div>

mnz.log

1. 브라우저란? (Chrome, Safari 등)
사용자가 보고자 하는 페이지를 서버에 요청하고 받은 응답(HTML, CSS, JavaScript 등)을 표시한다.
1-1. 기본 구조
User Interface
요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. (주소창, 이전/다음 버튼, 북마크 메뉴 등)
Browser Engine
UI와 렌더링 엔진 사이의 동작을 제어한다.
Rendering Engine
요청한 콘텐츠를 표시한다.
HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다.
Networking
네트워크 호출에 사용한다. (HTML 요청 등)
User Interface Backend
UI 구동이 가능하게 한다.
UI와 운영체제를 연결한다. (윈도우 관리 등)
JavaScript Interpreter
자바스크립트 코드를 해석하고 실행한다.
Data Storage
저장 가능 영역을 관리한다. (cookie, local storage 등)
1-2. 주요 역할
사용자가 입력한 자원(웹 페이지, 이미지, 동영상 등)을 서버에 요청하는 역할
서버로부터 전달받은 자원을 화면에 출력하는 역할
1-3. 렌더링 원리
브라우저가 화면에 나타나는 요소를 렌더링할 때, Webkit(Safari, Chrome에서 사용)이나 Gecko(Firefox에서 사용)와 같은 렌더링 엔진을 사용한다.
1-4. 렌더링 엔진 역할
요청 받은 내용을 브라우저 화면에 표시하는 일을 한다.
2. 렌더링 과정 :: CRP(Critical Rendering Path)
Loading
로더가 HTTP 모듈 또는 파일 시스템으로 전달받은 리소스 스트림을 읽는 과정이다.
HTML, CSS를 Object Model로 만들기
 
 
DOM(Document Object Model) :: HTML 태그를 JavaScript에서 이용할 수 있는 객체로 만드는 것이다.
Parsing :: 문자열을 의미있는 토큰으로 분해하고, 문법적 의미와 구조를 반영하여 파스 트리를 만드는 과정이다.
HTML 파서에 의해 파싱 후, DOM 트리를 구축한다.
CSS 파서에 의해 파싱 후, CSSOM 트리를 구축한다.
JavaScript 실행하기
 
 
HTML 중간에 Script가 있으면 HTML 파싱을 중단하고 JavaScript 엔진으로 제어 권한을 넘긴다.
JavaScript 엔진은 <script> 태그 내의 JavaScript 코드 혹은 script의 src attribute에 정의된 JavaScript 파일을 파싱해서 AST를 생성한다.
JavaScript 파일을 파싱해서 AST를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성하여 실행한다.
JavaScript는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다.
변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다. (7번 Reflow, 8번 Repaint에 해당하는 내용)
DOM과 CSSOM을 조합하여 렌더 트리 구축하기
 
렌더 트리는 렌더링을 위한 트리 구조의 자료구조로, 브라우저 화면에 렌더링되는 노드만으로 구성된다.
Layout
뷰포트 기반으로 렌더 트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.
Paint
화면상의 실제 픽셀로 변환한 후 계산한 위치와 크기를 기반으로 화면에 그린다.
Reflow
JavaScript 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경된다.
이때 변경된 DOM과 CSSOM은 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃을 다시 계산한다.
요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height 등)
윈도우 리사이징 (viewport 크기 변경)
노드 추가 또는 제거 등
Repaint
재결합된 렌더 트리를 다시 화면에 그려주는 과정이다.
background-color, visibility와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행한다.
2-1. HTML, CSS를 Object Model로 만들기 추가 내용
Renderer는 DOM 트리 요소들에 적용되지만 1:1 관계가 성립하는 것은 아니다.
시각적이지 않은 DOM 요소들은 렌더 트리에 삽입될 수 없다. <head> 태그 안의 요소들은 화면에 나타나는 값들을 포함하지 않는다. 따라서 그 어떤 Renderer도 적용될 수 없다.
2-2. JavaScript 실행하기 추가 내용
<body> 요소 가장 아래에 <script> 태그를 위치하는 것이 가장 좋은 방법이다.
화면 로딩이 줄어 더 좋은 사용자 경험을 줄 수 있다. 또한, DOM이 완성되지 않은 상태에서 JavaScript가 DOM을 조작하여 에러가 발생하는 상황을 방지할 수 있다. <head>에 <script> 태그를 삽입하는 경우 모던 브라우저에서는 async, defer 속성을 사용할 수 있다.
async
브라우저에 script 파일이 비동기적으로 실행될 수 있음을 나타내기 위해 사용할 수 있다. HTML 구문 해석기는 script 태그에 도달한 지점에서 script를 가져오고 실행하기 위해 일시 중지할 필요가 없다. 그러나 완료된 순서로 자바스크립트 파일이 실행되므로 실행 순서를 보장할 수는 없다.
defer
HTML 구문 분석을 완전히 완료하고 script 파일을 실행하도록 브라우저에 지시한다. async 속성과 차이점은 HTML 구문 분석이 완료되기 전에 script 다운로드가 완료되더라도 구문 분석을 끝낼 때 까지 script를 실행하지 않는다.
2-3. Reflow, Repaint 추가 내용
사용하지 않는 노드에 visibility: invisible 보다 display: none 사용하기
visibility: invisible은 레이아웃 공간을 차지해서 Reflow 대상이다. display: none은 레이아웃 공간을 차지하지 않아 렌더 트리에서 아예 제외되어 Reflow 하지 않는다.
Reflow, Repaint가 발생하는 속성 사용 피하기
Reflow Repaint가 일어나지 않는 transform, opacitiy와 같은 속성도 있다. 따라서 left, right, width, height 보다 transform을, visibility/display 보다 opacitiy를 사용하는 것이 성능 개선에 도움이 된다.
Virtual DOM
Virtual DOM은 변화가 일어나 Reflow, Repaint가 필요한 것들을 한 번에 묶어서 DOM에 전달한다.
참고 자료 📩
Must Know About Frontend
브라우저 렌더링 원리
브라우저의 동작 원리와 렌더링 최적화
[웹개발] 브라우저의 작동 원리
[WEB] 브라우저 렌더링 원리 알아보기
브라우저는 어떻게 동작하는가
브라우저는 어떻게 렌더링 될까?
프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정

[FE Basic] 브라우저 렌더링 과정

댓글