공부한 내용을 정리한 글입니다
내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요.
배움에 큰 도움이 됩니다. 🖋
Browser
우리가 매일 사용하는 크롬, 사파리, 삼성인터넷은, 우리가 요청한 정보(HTML, CSS, JS, TEXT, IMG 등)를 웹서버에서 받아와 우리가 이해할 수 있는 형태로 해석해 보여주는 그래픽 유저 인터페이스(GUI) 기반 소프트웨어다.
구글을 이용할 때, 크롬으로 접속하면 검색창이 넓고, 사파리로 접속하면 작게 뜬다면, 서비스의 사용자, 그리고 개발자 모두에게 좋지 못한 경험을 줄 것이다. 따라서 모든 브라우저 제조업체는 사용자에게 일관된 경험을 줄 수 있도록 웹 표준을 따른다.
그러나 표준을 따르되 모두 동일한 방식으로 자료를 해석하진 않으므로 같은 사이트라도 각각 크롬, 사파리, 삼성인터넷으로 접속했을 때의 화면이 조금씩 다르다.
Browser의 구성요소
| User Interface | - 주소창, 이전 / 다음 버튼, 새로고침, 북마크 등 - 사용자가 상호작용 하는 모든 시각적 요소 |
| Browser Engine | - User Interface, Rendering Engine 사이의 동작 제어 |
| Rendering Engine | - 사용자가 요청한 자료를 화면에 렌더링 - 각각의 브라우저들은 고유의 렌더링 엔진을 가지고 있다 - Chrome for iOS, Safari의 WebKit 엔진 / Internet Explorer의 Trident 엔진 등 |
| Networking | - HTTP, FTP 등의 통신규약을 이용하여 네트워크 통신을 담당. |
| Javascript Interpreter | - 웹사이트에 포함된 JS 코드를 해석하고 실행 - 생성된 해석 결과를 User Interface에 표시하기 위해 Rendering Engine으로 전달 |
| UI Backend | - OS의 UI체계를 사용하여 기본적인 UI를 그리는 장치 - 개발자가 따로 스타일을 입히지 않아도 <button>,<input>에 기본적인 스타일을 입혀 화면에 그린다 |
| Data Persistence | - 자료를 저장하는 레이어 - Cookie, Local Storage, Session Storage, WebSQL, File system 등에 접근하고 데이터를 저장 |
Rendering Engine
웹서버에서 받은 내용 정보(HTML)와 서식정보(CSS)를 읽어 사람이 읽을 수 있는 문서로 표시한다.
이 때 HTML, CSS는 단순 텍스트 파일이기 때문에 관리와 연산이 편한 객체 모델로 변환한다. 문서의 내용정보를 담은 HTML을 변환한 것이 DOM(Document Object Model), 문서에 적용되는 스타일 정보인 CSS를 변환한 것이 CSSOM(CSS Object Model)이다.
DOM과 CSSOM은 각각 독립된 데이터 구조다.
DOM ( Document Object Model )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>
'Hello students!' 텍스트, 'You're Awesome!' 이미지가 담긴 HTML 문서와, 이를 화면에 표시한 모습이다.
사용자가 요청한 데이터는 인터넷을 통해 84Byte인 Packet 단위로 전송된다. (1 Packet = 84Byte)
따라서 렌더링 엔진이 읽는 HTML은 우리가 알고있던 아래와 같은 형식이 아닌 Raw byte다.
<p>Hello <span>web performance</span> students!</p>
엔진은 Byte를 읽고 문자 -> 토큰 -> Node로 변환하는 과정을 거쳐 DOM으로 구성한다.
1. 변환
- Bytes -> Characters -> Tokens -> Nodes -> DOM
- HTML의 raw bytes를 읽어와 지정된 인코딩(ex. UTF-8)에 따라 개별 문자로 변환한다.
2. 토큰화
- Bytes -> Characters -> Tokens -> Nodes -> DOM
- 문자열로만 존재하던 <html> <head> <body> 등을 W3C의 HTML5 웹표준에서 지정한 고유 토큰으로 변환한다.
- 토큰은 특정 HTML 태그 정보를 포함한 일종의 데이터 구조기 때문에 각 토큰마다 특별한 의미와 규칙이 있다.
3. 렉싱
- Bytes -> Characters -> Tokens -> Nodes -> DOM
- 토큰을 Node로 변환한다.
- Node는 각 속성과 규칙이 정의된 DOM 안의 개별 객체이다
4. DOM 생성
- Bytes -> Characters ->Tokens -> Nodes -> DOM
- 생성된 Node가 서로 간의 관계를 가지며 트리 구조로 연결된다.
- 각 Node는 <html> 안의 <body> 객체처럼 부모-자식 관계가 되기도 하고, <p> 옆의 <div> 처럼 인접한 형제 관계가 되기도 한다.
위의 모든 과정을 거치면 웹페이지의 DOM이 생성된다.
브라우저는 HTML 마크업을 처리할 때마다 이 모든 단계를 거친다.
CSSOM ( CSS Object Model )
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
style.css
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
CSS도 HTML과 마찬가지로 Bytes -> Characters -> Tokens -> Nodes 의 단계를 거쳐 CSSOM으로 구성된다.
아래 트리는 완전한 CSSOM 트리는 아닌데, 그 이유는 각 브라우저에서 사용자가 어떤 스타일도 지정하지 않았을 때 사용할 기본 스타일 세트를 제공하기 때문이다. 우리가 보고 있는 트리는 기본 스타일시트에서 사용자가 재정의한 스타일만을 나타낸 것이다.
위의 DOM, CSSOM 트리를 결합하면 Rendering Tree가 된다.
참고
https://blog.logrocket.com/how-browser-rendering-works-behind-scenes
How browser rendering works — behind the scenes - LogRocket Blog
How do browsers bring web apps to life? Understanding client-side rendering will empower you to truly optimize your web projects.
blog.logrocket.com
https://web.dev/critical-rendering-path-constructing-the-object-model
Constructing the Object Model
Learn how the browser constructs the DOM and CSSOM trees.
web.dev
TIL #28 브라우저는 어떻게 작동하는가
나는 개발을 할 때, 내가 개발하고 있는 서비스를 폭넓게 이해한 상태에서 실사용자의 입장을 생각하며 개발을 하는 사람이 좋은 개발자라고 생각한다. 개발을 공부하며 내가 무언가 만들 수 있
jwookj.tistory.com
https://www.browserstack.com/guide/browser-rendering-engine
Role of Rendering Engines in Browsers | BrowserStack
Ever wondered how browsers serve requested content in a fraction of seconds? Dive-in to understand the role of browser engine as well as the rendering engine that makes it possible.
browserstack.wpengine.com
'WEB' 카테고리의 다른 글
| CSR과 SSR (0) | 2023.01.25 |
|---|---|
| Browser의 렌더링_Render Tree의 생성, 배치, 그리기 (2/2) (0) | 2023.01.17 |
| Token의 구조부터 Access, Refresh Token까지의 간략한 정리 (0) | 2023.01.13 |
| Next SEO (0) | 2023.01.12 |
| IE11 크로스브라우징_Polyfill의 적용과 SVG의 스타일링 이슈 (0) | 2023.01.03 |
댓글