브라우저 동작 순서

웹 브라우저의 구조

User Interface

• 모든 부분

Browser Engine

• 렌더링 엔진의 쿼리 및 조작을 위한 인터페이스 제공
• 유저 인터페이스와 렌더링 엔진 중개역할
• Data storage 통신

Rendering Engine

• 요청 받은 내용을 화면에 그려줌
• HTML + CSS / PDF , XML

Networking Component

• 네트워크 작업의 처리
• HTTP, WebSocket, WebRTC

Javascript Engine

• 자바스크립트 실행
• Just-In-Time Complation 방식의 JS Engine
• • 실행중 번역한 기계어를 캐싱하면서 중복되는 기계어의 생성 방지

UI Backend

• OS의 유저 인터페이스 메서드를 사용해 위제 그림

  Data Storage

• 데이터 저장소 레이어 ( HTTP Cookies, Browser Caching, Web Storage, Indexed DB...)

렌더링 엔진의 동작 과정

1. HTML 파일이 파싱되면서 파싱된 부분이 DOM트리를 구성한다. CSS파일도 생성 되며 CSSOM트리를 구성한다.

2. DOM 트리와 CSSOM 트리가 결합해 렌더트리를 생성한다. 렌더트리는 스타일 정보와 element가 어떤 순서로 화면에 표시되야 하는지에 대한 정보를 포함한다.

3. 렌더트리의 요소들이 배치 과정을 거친다. 렌더트리가 막 생성되었을 때에는 size, position 값이 할당 되지 않는다. 배치 과정에서 계산을 통해 이 값들이 할당되면서 렌더트리의 모든 노드가 좌표를 얻는다.

4. 렌더트리를 순회하면서 각 노드들은 paint 메서드를 호출해 UI Backend를 함께 사용하여 화면에 그린다.

HTML Parsing 과정

• HTML 파서는 네트워크 컴포넌트로부터 텍스트를 받아, 어휘분석, 구문분석을 거쳐 구조를 분석해 파싱된 트리를 생성하게 된다.

참고한 글
https://codeburst.io/how-browsers-work-6350a4234634
https://www.browserstack.com/guide/browser-rendering-engine
https://dzone.com/articles/behind-browser-basicspart-1
https://velog.io/@bbumjun/how-browser-works