업데이트 2024.3.25
공통 브라우저 구조
1. User Interface
사용자 인터페이스는 브라우저 상단 표시줄로, 컨트롤이 있는곳. 여기에는 URL을 입력하는 공간, 뒤로/앞으로 가기 버튼, 탭과 설정 옵션이 있는 공간이 포함.
2. Browser engine
브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 다리 역할을 합니다. 사용자의 입력을 기반으로 렌더링 엔진을 쿼리하고 조작합니다.
3. Render engine
기본 기능은 '<,/,>' 및 관련 기호 및 속성을 찾아 HTML을 구문 분석한 다음 CSS를 구문 분석하고 마지막으로 스크립트를 구문 분석하는 것입니다. 주목해야 할 점은 모든 구문 분석이 병렬로 진행된다는 점입니다.( Parsing 진행순서 HTML -> CSS -> JS)
CSS 구문 분석이 진행 중일 때 HTML 구문 분석이 중단되는 것처럼 다른 작업이 진행 중일 때 중단되는 경우도 있습니다.
HTML 구문 분석은 토큰화 알고리즘을 사용하는 반면, CSS 및 스크립트 구문 분석은 널리 사용되는 하향식 또는 상향식 구문 분석기를 통해 이루어집니다.
각 브라우저별 검색 엔진 정보(2021. 9월)
Chromium/Blink:
Used by: Google Chrome, Microsoft Edge (Chromium version), Opera
Blink is a fork of the WebKit rendering engine. It was developed by Google and is now used in multiple browsers.
WebKit:
Used by: Apple Safari
WebKit was developed by Apple. It's known for its focus on standards compliance and performance.
Gecko:
Used by: Mozilla Firefox
Gecko is developed by Mozilla and is known for its extensibility and open-source nature.
Various browsers use various kinds of a rendering engine.
- Chrome & Opera 15+: Blink (A fork of Webkit)
- Internet Explorer: Trident
- EdgeHTML: Microsoft Edge
- Firefox & other Mozilla browsers: Gecko
- Chrome (iPhone) & Safari: Webkit
4. Networking
네트워킹은 리소스를 가져오고 인터넷과 관련된 모든 것을 처리하는 것입니다. 다음은 브라우저에 URL을 입력할 때 리소스를 가져오는 방식입니다.
- 첫 글자를 입력하는 순간 북마크와 기록을 살펴보기 시작하고 의미 있는 제안을 제공합니다.
- URL을 파싱하고 프로토콜을 검색합니다.
- 인코딩을 사용해 URL을 아스키(NON-ASCII)가 아닌 형식으로 변환합니다.
- 브라우저는 HSTS(HTTP Strict-Transport-Security) 목록을 확인하고, 목록에 URL이 있으면 HTTPS를 추가하고, 그렇지 않으면 HTTP를 통해 전송합니다.
* HSTS는 보안을 위해 https로만 통신해야한다고 알려주는 기능 - DNS 조회: 조회 대상, 1. 나의 브라우저 DNS 캐시 2. (나의 컴퓨터) OS 캐시 3. 로컬 라우터/ISP 라우터 중 어느 DNS 서버를 호출할지 결정합니다.
- ARP(주소 확인 프로토콜)를 사용하여 DNS(도메인 이름 서버) 서버/기본 게이트웨이의 IP 주소를 가져옵니다.
*ARP : 단말간 통신에서 양쪽 단말은 IP를 이용하여 목적지를 지정하지만 실제 데이터 이동을 위해 MAC 주소를 함께 이용. 이를 위해 필요한 것이 ARP(Address Resolution Protocol)이며 IP 주소와 MAC 주소를 일대일 매칭 하여 Layer2에서 목적지를 제대로 찾아갈 수 있도록 도움을 줌 - *포트 53(DNS Port Number)을 열고 DNS 서버로 UDP(User Datagram Protocol)를 전송합니다(응답 크기에 따라 TCP/UDP가 달라짐). 기본 게이트웨이(Default gateway)인 경우 이 절차를 재귀적으로 따릅니다.
*포트 53: Allow both TCP and UDP port 53 to your DNS Server.
- DNS가 주소에 대해 모른다고 말하는 경우, 브라우저는 기본 검색 엔진에서 해당 주소를 검색하여 상위 10개의 결과를 표시합니다.
- 그렇지 않으면 대상 서버의 IP 주소를 알면 HTTP(포트 80)/ HTTPS(포트 443) 요청을 시작하고 TCP 소켓 연결을 요청합니다.
- 요청은 네트워크 계층에서 TCP 헤더(Network layer for filling TCP header), 전송 계층에서 IP 헤더(Transport layer for filling IP header), 데이터 링크 계층에서 이더넷 프레임 헤더(Data link layer for Ethernet frame header)에 도달합니다.
- 패킷은 디지털 또는 셀룰러로 네트워크에서 흐릅니다.
- 서버와 클라이언트 간의 3방향 핸드셰이크가 이루어지고 요청 시 데이터가 클라이언트로 전송됩니다.
- 전송 계층 보안 핸드셰이크가 발생하고 마지막으로 브라우저가 데이터를 청크 단위로 가져옵니다.
5. JavaScript nterpreter
자바스크립트 인터프리터는 JS 코드를 읽고 실행하여 렌더링 엔진으로 결과를 처리하는 JS 엔진입니다.
Google Chrome: V8( Developed in-house by Google as part of The Chromium Project). It is used in Node.js!
Mozilla Firefox: SpiderMonkey(The first JavaScript engine in history.) Developed by Brendan Eich, the creator of JavaScript, while he was at Netscape.
Safari: Nitro(formerly SquirrelFish)
Edge: Chakra( Open-sourced as ChakraCore. In 2016, Microsoft created a PR in the Node.js GitHub repo to use ChakraCore instead of V8. This PR was expanded out into its own project and now lives here as a project of the node organization.)
Opera: V8 (If something works on Google Chrome, you can expect it to work on Opera due to the identical rendering engine + JavaScript engine used.)
6. UI backend(Displayt backend)
UI 백엔드는 콤보 상자 및 창과 같은 기본 위젯을 그리는 데 사용됩니다. 이 백엔드는 플랫폼에 구애받지 않는 일반 인터페이스를 노출합니다. 그 아래에는 운영 체제 사용자 인터페이스 메서드(It underneath uses operating system user interface methods)가 사용됩니다.
7. Data Persistence
데이터 지속성은 로컬 스토리지, 인덱싱된DB, WebSQL, 파일 시스템과 같은 저장소 메커니즘을 지원합니다. 브라우저가 설치된 컴퓨터의 로컬 드라이브에 생성되는 작은 데이터베이스입니다. 캐시, 쿠키, 북마크, 환경설정 등의 사용자 데이터를 관리합니다.
브라우저별 구조
Chrome(Derived from chromium)
Render Engine Architecture (WEBKIT)
Chrome's Multiprocess archtecture.
- One main (browser) process
- One GPU process
- Each tab: dedicated process
- Each extension: dedicated process
Firefox
Render Engine Architecture (Gecko)
Firefox’s multiprocess architecture
- One main process
- One GPU process
- One extension process
- Up to 4 content (tab) processes
Rendering Engine
HTML -> DOM tree -> CSS -> CSSOM ->
브라우저는 8KB 단위로 데이터를 수신하며 전체 HTML 페이지가 로드될 때까지 기다리지 않습니다. 조금씩 렌더링을 시작합니다.
HTML 일반적인 파싱을 할 수 없는 이유
- 언어의 관대한 특성.
- 브라우저는 잘 알려진 잘못된 HTML 사례를 지원하기 위해 전통적인 오류 허용 범위를 가지고 있습니다.
- 재진입의 구문 분석 프로세스. 일반적으로 소스는 구문 분석 중에 변경되지 않지만 HTML에서는 "document.write"를 포함하는 스크립트 태그가 추가 토큰을 추가할 수 있으므로 구문 분석 프로세스에서 실제로 입력이 수정됩니다.
일반 구문 분석 기술을 사용할 수 없는 브라우저는 HTML 구문 분석을 위한 사용자 정의 구문 분석기를 만듭니다. 이 알고리즘은 토큰화와 트리 구성의 두 단계로 구성됩니다.
토큰화는 입력을 토큰으로 파싱하는 어휘 분석입니다. HTML 토큰에는 시작 태그, 끝 태그, 속성 이름 및 속성 값이 포함됩니다.
토큰화는 토큰을 인식하여 트리 생성자에게 전달하고 입력이 끝날 때까지 다음 토큰을 인식하기 위해 다음 문자를 소비하는 등의 작업을 수행합니다.
HTML 구문 분석 프로세스의 입력은 코드 포인트 스트림으로 구성되며, 이 스트림은 토큰화 단계를 거친 후 트리 구성 단계를 거칩니다. 출력은
문서 객체(a Document object)
입니다.
Parsing Example
<html>
<body>
Hello World
</body>
</html>
Summary Tokeniser process
Data state → "<" → Tag open stat → Tage name stat(=="a~z" -> start tag token) → ">" ==> HTML token → Language Character "H(anyting)" ==> a character token
Dom Process(≒Node)
마치 갈치살과 뼈를 가르는 작업같음
CSS, CSSOM Tree
CSS의 구문 분석 트리는 CSSOM 트리와 정확히 일치하지 않습니다. CSSOM 트리는 브라우저에서 사용할 수 있도록 다시 구조화시킨 CSS 구문 분석 트리입니다.
LEXICON
Syntax
Stylesheet
렌더링 엔진이 <style> 요소를 만나면 즉시 그 안에 있는 CSS를 파싱합니다.
HTML 문서의 파싱을 중지하고 CSS 규칙 집합의 파싱에 주의를 집중합니다. CSS의 파싱을 마치면 메인 HTML 문서의 파싱으로 돌아갑니다
JAVASCRIPT
인라인 스크립트인 경우: JS Engine 구성 요소는 자바스크립트를 즉시 실행합니다. 완료되면 렌더링 엔진은 HTML 문서를 구문 분석합니다.
외부 스크립트인 경우 : Networking 구성 요소에서 지정된 스크립트를 요청합니다. 스크립트가 도착하면 JS Engine에서 실행합니다.
렌더링 엔진이 <스크립트> 앞의 HTML/CSS 구문 분석을 중단하는 이유는 <스크립트>가 <스크립트> 앞의 HTML/CSS를 잠재적으로 수정할 수 있기 때문입니다. 수정이 큰 경우 어차피 많은 부분이 변경되므로 <script> 앞을 지나서 구문 분석할 필요가 없습니다.
이 시점에서 스타일시트가 JS 실행을 차단할 수 있다는 점에 주목할 필요가 있습니다. 브라우저는 아직 로드 중이거나 구문 분석 중이거나 발견되지 않은 스타일시트가 있는 경우 스크립트가 실행되는 것을 차단합니다.
Web API
출처 : https://www.youtube.com/watch?v=mFawNZz_Uu0
제꺼보다 번역을 잘하신 분 찾음
https://another-light.tistory.com/41
출처
https://developer.chrome.com/blog/inside-browser-part3/
'나의 FE피봇이야기 > Dev_Knowledge' 카테고리의 다른 글
| [Network]Socket과 Segment,Packet 등 (0) | 2023.09.04 |
|---|---|
| [Lecture]Network : Cookies, Proxy Server (0) | 2023.09.04 |
| [Browser]CPU와 GPU를 통해 할당 받는 Process (0) | 2023.08.28 |
| [Lecture]컴퓨터 네트워크 5강 : Message, Layer Detail (0) | 2023.08.24 |
| [Lecture] 4강 / Chapter2 : Layers (0) | 2023.08.23 |
