사용자 인터페이스(UI)
웹 페이지를 제외한 브라우저 화면의 모든 요소( 주소 표시줄, 뒤로가기/앞으로 가기 버튼, 북마크 메뉴 등... )를 뜻합니다.
웹 페이지
프론트엔드 엔지니어가 HTML, CSS, Javascript 로 구현한 UI 요소는 웹 페이지의 인터페이스를 뜻합니다. 프론트엔드 엔지니어는 웹 페이지의 구조, 스타일, 동작을 정의함으로써 웹 페이지 인터페이스를 그립니다.
브라우저 엔진
사용자 인터페이스와 랜더링 엔진 사이에서 명령을 전달하는 엔진이며, 사용자 인터페이스를 통해 사용자가 행한 동작들을 렌더링 엔진에 전달하여 웹 페이지가 표시되도록 하는 중간자 역할을 수행합니다.
브라우저 엔진과 렌더링 엔진
레이아웃 엔진과 렌더링 엔진이라는 용어가 긴밀히 연관되어 사용되지만, 중요한 점은 '레이아웃 엔진'과 '랜더링 엔진' 모두 브라우저 엔진 내부에서 작동한다는 것 같습니다. 또한 브라우저 엔진과 랜더링 엔진 간 혼용되다시피 사용하는 것 같기도 합니다. 가령 Gecko에 대해 검색했을 때 wiki에서는 브라우저 엔진이라고 한다고 하지만, Mozilla 웹사이트에서는 웹을 위한 Mozilla의 랜더링 엔진이라고 기술하였습니다. 즉, wiki에서는 브라우저 엔진 = 렌더링 엔진입니다.
각 브라우저 엔진(혹은 랜더링 엔진)은 아키텍처에 따라 단일 프로세스 다중 스레드 / 다중 프로세스 단일 스레드 / 다중 프로세스 다중 스레드 등의 여러 방법으로 구현됩니다.
브라우저 엔진의 주요 기능
사용자 인터페이스의 요청을 받아서 랜더링 엔진이 HTML과 CSS를 올바르게 해석하고 화면에 표시할 수 있도록 하는 역할을 수앵합니다. 즉, 전체적으로 사용자 인터페이스와 렌더링 엔진, 다른 컴포넌트들과의 중간 지점에서 정보 흐름을 조정하고 브라우저 내에서 사용자의 작업이 올바르게 처리되게 하는 역할을 수행합니다.
- 사용자 상호 작용 처리
- 링크 클릭, URL입력 등의 명령을 처리하여 네트워크 요청을 시작하거나 렌더링 엔진을 조작합니다.
- 네트워크 통신 관리
- DNS 해석, HTTP 요청 전송, 서버로부터 HTML, javascript, css를 받아오는 과정
- 웹 페이지의 랜더링
- 컴포넌트 간의 정보 흐름을 관리
- 다양한 구성 요소 간의 정보를 중재하고 조율하여 사용자 명령이 적절히 처리되어 화면에 정확히 표시되도록 합니다.
사용자가 주소창에 네이버를 입력하고 엔터를 누를 때 벌어지는 일들
유저가 URL이나 검색어를 브라우저의 사용자 인터페이스의 주소창에 입력할 때 사용자 인터페이스 스레드는 이 입력이 검색 엔진이나 URL의 웹사이트로 보내져야 하는지를 결정합니다. 유저가 엔터를 눌렀을 때, 네트워크 스레드는 데이터를 요청하기 위해 여러 단계를 거치고, 서버로부터 응답을 받습니다. 만약 응답이 HTML/CSS 파일일 때, 랜더링 과정이 수행됩니다.
렌더링 엔진
사용자가 요청한 콘텐츠를 화면에 해석하여 표시합니다. 즉, 서버로부터 응답으로 받은 HTML, CSS, Javascript 파일을 파싱하고 렌더링합니다.
Critical rendering path
브라우저가 HTML, CSS, Javascript를 화면의 pixel로 변환하는 중요한 일련의 과정으로, 중요 렌더링 경로(CRP)를 최적화하면 렌더링 성능이 향상됩니다. DOM, CSSOM, 렌더 트리와 레이아웃이 포함됩니다.
CRP 최적화하기
중요하지 않은 리소스의 다운로드를 지연하거나 비동기로 표시하거나, 제거합니다. 각 요청마다 파일 크기를 줄이거나 요청을 최소화합니다. 중요한 리소스를 우선 다운로드하도록 최적화하여 CRP를 단축하는 방법이 있습니다.
1. 파싱 Parsing
입력된 source code를 구조화된 데이터 형태로 변환하는 과정입니다. 브라우저의 렌더링 엔진은 HTML, CSS, Javascript로 작성된 소스 코드를 해석해서 브라우저가 이해할 수 있는 데이터 구조로 변환합니다. 예를 들어, HTML 문서를 파싱하여 DOM(Document Object Model)트리를 생성합니다.
파싱의 중요성
웹 페이지의 로딩/렌더링 속도에 직접적으로 영향을 끼칩니다. (14KB 패킷)
1-1 HTML 파싱
HTML문서를 받았을 때, 이 문서를 문자 단위로 읽어 토큰화(Tokenization)과정을 거쳐 코드 조각을 HTML 태그에 대한 정보를 담고 있는 토큰으로 분리합니다. 하나의 태그는 하나의 토큰으로 인식되며, 이 토큰을 기반으로 DOM 트리를 생성합니다.
DOM(Document Obejct Model)
웹 페이지의 동적인 변화를 가능하게 하는 웹 문서 구조를 표현하는 모델(인터페이스) 입니다.
문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML/XML 문서의 프로그래밍 인터페이스입니다. 즉 HTML/XML 과 같은 웹 문서의 구조를 표현하는 모델입니다.. DOM은 노드 트리 구조이며, nodes와 objects로 문서를 표현하고 계층적으로 배열됩니다. Javascript와 같은 스크립팅 언어를 이용해 DOM에 접근하고 수정할 수 있습니다. 또한 사용자는 DOM을 통해 웹 페이지와 상호작용하는 이벤트를 처리합니다.
Raw bytes -> characters -> Tokens -> Node -> Dom
서버가 HTML을 Raw bytes 형식으로 전송하면 브라우저는 이를 받아 브라우저가 이해할 수 있는 format으로 변환합니다. 문자로 변환된 정보는 토큰화됩니다.
1) 상세 : https://frontendly.io/blog/browser-rendering
2) 전체적:
DOM Tree
HMLT/XML 문서의 구조를 트리 형태로 표현한 것으로, 웹 브라우저는 HTML 문서를 로드할 때 DOM 트리를 생성하며, 이 트리를 통해 문서의 내용/구조/스타일 등을 접근 및 조작, 변경할 수 있습니다. 트리의 각 요소는 node로 표현됩니다.
[ ! ] Javascript : <script>
1-2 CSS 파싱: CSSOM
HTML 파싱과 동시에 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSS 규칙을 기반으로 생성되어 DOM트리의 각 요소에 스타일을 적용합니다. CSS트리는 각 요소에 어떤 스타일이 적용될지 정의하고, 시각적 표현이 결정 됩니다.
1-3 Script, Sytle Sheet's Processing order
(향후 추가) : https://web.dev/articles/howbrowserswork#scripts
2 Style : Render Tree & Layout
1. 렌더 트리
DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 생성하고, 렌더 트리의 요소를 기반으로 각 요소의 위치와 크기를 계산헤 레이아웃을 계산합니다. 렌더 트리는 보이는 콘텐츠만 생성하므로, `display: none;`가 있는 요소는 렌더 트리에 포함되지 않습니다.
2. 레이아웃 트리
각각의 DOM 노드에 대해 스타일을 계산하여 적용한 뒤, 레이아웃 트리로 변환합니다. 이러한 레이아웃 트리를 통해 페이지의 전체 구조가 정의됩니다. 레이아웃 단계에서는 페이지에서 요소를 배치하는 위치와 방법을 결정하고 각 요소의 너비와 높이, 서로의 위치를 결정합니다.
3. Painting
준비된 레이아웃 트리를 기반으로 각 요소를 순서대로 화면에 그립니다. 각 요소의 색상, 글꼴 등이 실제 픽셀로 변환되어 화면에 표시됩니다. 페인트 시간은 렌더 트리에 적용되는 업데이트의 종류에 따라 달라집니다.
주요 렌더링 엔진 목록
엔진마다 지원하는 미디어 format, webGPU, emulation 없이 OS에서 작동되는지 여부 등이 다릅니다.
* 아래 렌더링 엔진들은 windows, macOS, android와 Linux에서 emulation의 지원 없이 작동할 수 있으나, webkit 을 제외한 나머지 엔진들은 iOS에서는 (emulation 없이는)돌아가지 않습니다.
- Blink (google) Embedded in Google Chrome, Chromium-based browsers(Microsoft Edge, Brave, Vivaldi, Samsung Internet and Opera)
- WebKit (apple) Embedded in Safari
- Gecko (Mozilla) Embedded in FireFox
Networking
인터넷과의 통신을 처리하는 구성 요소로 통신을 요청하고 브라우저가 요청한 리소스를 가져오는 역할을 담당합니다. 네트워킹 컴포넌트가 가져온 데이터를 렌더링 엔진에 전달합니다.(이후 렌더링 엔진은 이를 파싱하여 웹 페이지를 표시합니다.)
- 사용자가 입력한 웹 주소를 IP주소로 변환합니다.
- TCP 나 TLS와 같은 전송 프로토콜을 사용해 서버와의 네트워크 연결을 설정합니다.
- 웹 서버에 HTTP 요청을 전송하고 응답을 받아 리소스를 가져옵니다.
- 웹 페이지와 관련된 데이터를 로컬에 저장하며 동일 리소스에 대한 반복 요청을 줄여 브라우저 성능을 향상시킵니다.
- 프록시 서버를 통한 요청 처리 및 SSL/TLS 를 통한 데이터 암호화 등 보안 관련 작업을 수행합니다.
Javascript Interpreter
웹 페이지에서 자바스크립트의 코드를 구문 분석(parse)하고 실행하는 데 필요한 구성요소입니다. 브라우저마다 parse/실행에 사용되는 JS엔진의 유형은 다양합니다.
V8(C++) - google chrome, microsoft edge
SpiderMonkey(C++) - Mozila FireFox
JavaScriptCore(Nitro) - safari
UI Backend
기본 운영 체제의 인터페이스 방식을 사용하여 기본적인 위젯이나 선택 상자, input box나 check box등을 그립니다.
Data Persistence
쿠키, 로컬 스토리지, 로컬 캐시 등 다양한 데이터를 로컬에 저장할 때 사용합니다. 파일시스템이나 WebSQL, IndexedDB와 같은 다양한 데이터 저장 매커니즘과 호환되어야 합니다.
* 너무 오래전 내용이라는 말도 있는 것 같다!
출처
- How browsers work: https://web.dev/articles/howbrowserswork
- How browsers work 한국어 번역: https://d2.naver.com/helloworld/59361
- How browsers work: https://web.dev/articles/howbrowserswork
- Populating the page: how browsers work https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work
- browser engine (wike) https://en.wikipedia.org/wiki/Browser_engine
- Comparison of browser engines https://en.wikipedia.org/wiki/Comparison_of_browser_engines
- What is a Browser and How do they work? https://www.browserstack.com/guide/what-is-browser
- Inside look at modern web browser (part 1) https://developer.chrome.com/blog/inside-browser-part1#execute_program_on_process_and_thread
- The components of a browser https://dev.to/itswillt/the-components-of-a-browser-23mn
- Browser Rendering: What Happens Behind the Scenes https://frontendly.io/blog/browser-rendering
- DOM https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
- Parshing https://blog.logrocket.com/how-browser-rendering-works-behind-scenes/
- fusion meme ; https://imgflip.com/memegenerator/148278947/DBZ-FUSION
- How Does JavaScript Work Behind the Scenes? JS Engine and Runtime Explained https://www.freecodecamp.org/news/how-javascript-works-behind-the-scenes/
- Critical rendering path https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
- Understanding Browser Architecture: A brief overview https://dev.to/ygwilliams4/understanding-browser-architecture-a-brief-overview-2b8f
