솔직 문서를 읽어도 헷갈렸는데
영상찾아보니까 좋은 자료가 있어서 영상으로 이해함
https://www.youtube.com/watch?v=o3_u1azhfJw
https://www.youtube.com/watch?v=z1Jj7Xg-TkU
A browser Architecture
브라우저 작업 진행 시나리오
1. 사용자가 주소표시줄(사용자 인터페이스)에 URL을 입력
2. 브라우저 엔진에게 URL(입력받은 주소값) 전달
3. 브라우저 엔진은 URL에 해당하는 데이터를 자료저장소(caching)에서 먼저 찾아봄
4-1. 캐싱된 자료가 있다면,
랜더링 엔진은 브라우저 엔진으로부터 자료를 받아 HTML, CSS, image 등을 파싱
4-2. 캐싱된 자료가 없다면,
서버에 요청해서 자료를 찾고 런더링 엔진은 통신레이어에서 URL을 전달
5. 통신 레이어는 서버에 HTML, CSS, JS 값을 요청
6. 응답받은 데이터는 HTML, CSS는 렌더링 엔진이 직접 파싱하고, JS는 JS 해석기로 전달하여 파싱
7. 파싱이 완료된 DOM node(DOM tree 구성요소)는 Render Object(Render tree 구성요소)로 변환
8. UI 백엔드는 Render Object를 브라우저 렌더링 화면에 표출
각 구조별 정의
Broswer Engine
- '브라우저 엔진'은 HTML, CSS, JavaScript 및 기타 리소스를 포함하여 웹 콘텐츠의 다양한 측면을 해석하고 처리하는 전반적인 엔진을 지칭하는 보다 포괄적인 용어입니다.
- 브라우저 엔진은 렌더링 외에도 네트워크 요청, 사용자 상호 작용, 이벤트 처리 등과 같은 다른 작업을 처리할 수 있습니다.
- 브라우저 엔진에는 렌더링 외에도 다양한 모듈이 포함되어 있으며, 이러한 모듈은 웹 브라우저의 전체 기능에 종합적으로 기여합니다.
Rendering Engine
- '렌더링 엔진'은 주로 웹 콘텐츠 렌더링에 중점을 둔 브라우저 엔진 내의 특정 구성 요소입니다. 렌더링 엔진은 HTML을 해석하고, CSS 스타일을 적용하고, 레이아웃을 계산하고, 웹 페이지의 시각적 표현을 생성합니다.
- 렌더링 엔진은 브라우저 엔진의 기능에서 핵심적인 역할을 하지만, 이는 광범위한 브라우저 엔진 아키텍처의 한 부분일 뿐입니다.
Javascript Interpreter/Javascript Engine
웹 브라우저에서 자바스크립트 인터프리터는 웹 페이지에 있는 자바스크립트 코드를 실행하는 역할을 담당합니다. JavaScript는 개발자가 웹사이트에 상호 작용, 동적 동작 및 기능을 추가할 수 있는 프로그래밍 언어입니다. JavaScript 인터프리터는 웹 페이지의 컨텍스트 내에서 이 코드를 처리하고 실행하는 데 중요한 역할을 합니다.
Data persistence
브라우저의 데이터 지속성은 다양한 브라우징 세션 또는 상호 작용에 걸쳐 데이터를 저장하고 유지하는 브라우저의 기능을 의미합니다. 이 데이터에는 사용자 기본 설정, 검색 기록, 쿠키, 캐시된 파일 등과 같은 다양한 유형의 정보가 포함될 수 있습니다.
사용자 환경설정: 브라우저를 통해 사용자는 기본 검색 엔진, 홈페이지, 테마, 언어 등의 환경설정을 설정하여 브라우징 환경을 맞춤 설정할 수 있습니다. 이러한 환경설정을 영구적으로 저장하면 사용자가 브라우저를 열 때마다 설정을 다시 구성할 필요가 없습니다.
검색 기록: 검색 기록을 저장하면 이전에 방문한 웹사이트를 쉽게 다시 방문할 수 있습니다. 이 기능은 URL을 기억하거나 북마크를 사용하지 않고도 사이트를 다시 탐색하는 데 도움이 됩니다.
쿠키: 쿠키는 웹사이트가 사용자의 컴퓨터에 저장하는 작은 데이터 조각입니다. 여기에는 로그인 자격 증명, 세션 토큰, 사용자 기본 설정 등의 정보가 포함될 수 있습니다. 쿠키를 저장하면 웹사이트는 여러 세션에서 사용자를 인식하고 개인화된 경험을 제공할 수 있습니다.
양식 자동 완성: 브라우저는 양식 데이터(예: 이름, 주소, 신용카드 정보)를 기억하고 자동으로 입력하는 자동 채우기 기능을 제공합니다. 이 기능은 사용자에게 편리하며 온라인 거래 시 시간을 절약할 수 있습니다.
캐시: 브라우저 캐시는 이미지, 스타일시트, 스크립트 등 웹사이트의 리소스 사본을 저장합니다. 캐시된 리소스는 브라우저가 리소스를 새로 다운로드하는 대신 로컬 사본을 검색할 수 있도록 하여 페이지 로딩 시간을 단축합니다.
오프라인 브라우징: 일부 브라우저는 웹사이트 콘텐츠의 일부를 로컬에 저장하여 오프라인 브라우징을 지원합니다. 이를 통해 사용자는 인터넷에 연결되어 있지 않을 때에도 이전에 방문한 페이지에 액세스할 수 있습니다.
웹 애플리케이션: 많은 최신 웹 애플리케이션은 로컬 저장소 및 인덱싱된DB와 같은 브라우저 저장 메커니즘을 사용하여 사용자 데이터를 저장하므로 오프라인 기능 및 성능 향상이 가능합니다.
북마크: 북마크(또는 즐겨찾기)를 저장하면 사용자가 즐겨 찾는 웹사이트의 링크를 저장하고 정리하여 쉽게 액세스할 수 있습니다.
세션 복원: 브라우저는 예기치 않게 또는 의도적으로 브라우저를 닫은 경우 이전 브라우징 세션을 복원할 수 있는 기능을 제공하는 경우가 많습니다. 여기에는 이전 세션에서 열려 있던 탭과 창을 다시 여는 것이 포함됩니다.
UI-Backend(User Interface Backend)
- UI 백엔드는 브라우저 자체의 사용자 인터페이스를 렌더링하고 관리하는 역할을 담당합니다.
- 탭, 버튼, 메뉴, 주소 표시줄 등 사용자가 상호 작용하는 다양한 그래픽 구성 요소와 컨트롤을 처리합니다.
- UI 백엔드는 브라우저 자체의 인터페이스가 반응성이 뛰어나고 인터랙티브하며 시각적으로 매력적일 수 있도록 보장합니다.
- 또한 브라우저 인터페이스와의 사용자 상호 작용을 관리하여 사용자 작업을 브라우저가 이해할 수 있는 의미 있는 명령으로 변환합니다.
- 브라우저 엔진이 웹 콘텐츠 처리 및 렌더링에 집중하는 반면, UI 백엔드는 브라우저의 인터페이스 요소와 상호 작용을 관리하는 데 중점을 둡니다.
참고자료
토큰 : 전송받은 문자(바이트 코드에서 문자로 해석된 문자(language))가 HTML 코드인지 확인하는 일종의 설명서
토큰화 : HTML인지 아닌지 확인하는 과정을 '토큰화' 라고 함(즉 약속 문자 인지 아닌지 확인하는 과정)
결국 아래의 작업이 서로를 확인하는 First hand shake.
<!DOCTYPE html>The HTML document type declaration, also known as DOCTYPE , is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.
(2023.07.16)
UI가 업데이트되는 3가지 상황
1. 다시 Layout이 발생하는 경우
2. Paint 부터 다시 발생되는 경우
3. 레이어의 합성만 다시 발생하는 경우
Where is belonging to the rendering egnine?
A web rendering engine, also known as a browser engine or layout engine, is typically part of a web browser.
이거 부라우저 안에 있다고 하네요. 그러니까 생각보다 브라우져가 무거움
'나의 FE피봇이야기 > Dev_Knowledge' 카테고리의 다른 글
| [Front-End]Compiler (0) | 2023.07.16 |
|---|---|
| [Front-End]Parsing 이란 (0) | 2023.07.13 |
| [Machine Learning]공부해보기 (0) | 2023.04.09 |
| [DMBS] 데이터 모델링 관점 (0) | 2023.03.01 |
| [DBMS] 정규화 (0) | 2023.02.26 |
