브라우저 작동 과정

주소창에 url을 입력했을 때의 과정이 어떻게 되느냐는 질문에 대해 공부한 내용입니다.
브라우저의 동작은 간단하지 않기에 모든 것은 다룰 수 없겠지만 시작하는 개발자 단계에서 최소한 알아야 할 부분에 대해서는 정리하고 넘어가고자합니다.

---

브라우저 구성 요소

• 사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 부분 외 모든 보여지는 부분.
• 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
• 렌더링 엔진 : HTML과 CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 요처한 페이지 표시, 브라우저마다 다른 엔진 사용

• 통신 레이어: HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 얻어오고, 서버에 요청을 보낼 때 사용
• JavaScript 인터프리터 : JavaScript 코드를 해석하고 실행
• UI 백엔드: 브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들(콤보 박스와 창 같은 기본적인 장치)을 처리

• 자료저장소: 브라우저 자체에서 자료를 저장하는 계층으로 쿠키, indexedDB, 웹 SQL, 파일시스템 등

랜더링 엔진 동작, 중요 렌더링 경로(Critical Rendering Path)

• 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 역할
• html, css 등 화면의 요소들을 화면에 보여주고 업데이트가 필요할 때 효율적으로 자료구조를 생성
• 최적화를 통해 렌더링에 걸리는 시간을 줄이고, 사용자 경험을 개선할 수 있음.

---

1. 파싱(Parsing): 토큰화된 코드를 구조화하는 과정, 렌더링 엔진에서HTML과 CSS를 파싱

HTML 파싱 : 서버에서 응답으로 받은 HTML 데이터를 파싱, HTML을 파싱한 결과로 DOM Tree를 만듦

• 토큰화된 HTML의 문자열들을 이용해 파싱 트리(Parse Tree)를 생성
• 파싱 트리를 이용해 DOM(Document Object Model) 트리를 생성
• HTML을 파싱하는 도중 어떠한 에러가 발생한다면, 브라우저는 자체적으로 에러를 복구(forgiving nature 속성)
• 외부 태그를 만나게 되면 HTML 파싱을 즉시 중단(중간에 외부의 요인으로 인해 DOM이 추가, 변경, 삭제 될 수 있기때문)
• 이러한 경우에 HTML은 처음부터 다시 파싱 과정을 거침
• 문맥 자유 문법(BNF로 표현 가능한 문법)이 아님

CSS 파싱 : 파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받아와 CSSOM 트리를 만듦

• HTML을 파싱하는 도중에 CSS 파싱이 시작(CSS을 링크하는 코드가 HTML 코드 내에 삽입되어 있음)
• CSSOM(CSS Object Model) 트리: 코드에서 명세한 내용과 순서를 바탕으로 DOM과 같은 트리를 구성
• 문맥 자유 문법

2. 렌더 트리(Render Tree), 프레임 트리(Frame Tree) 구축 : 화면에 나타나는 요소들을 결정하는 트리

• DOM 트리와 CSSOM 트리를 조합하여 만들어짐
• 화면에 그려지지 않는 요소들(meta 태그 등)은 트리에 나타나지 않기때문에 DOM 트리와 정확하게 1:1로 매칭이 되지는 않음

3. 랜더 트리 배치(Layout, Reflow): 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서 등 계산, 좌표표시

• 전역적 레이아웃(Global Layout): 폰트 등 화면 전체에 적용되는 부분, 보통 동기적으로 실행
• 증분적 레이아웃(Incremental Layout): 레이아웃 변경이 발생하는 엘리먼트를 만나면, 스케쥴러를 통해 비동기로 일괄 작업(batch)을 진행
  • 더티 비트 시스템(Dirty bit system) : 렌더 트리를 처음부터 탐색하면서 레이아웃을 계산하지 않고 특정한 부분만 다시 계산
    더티: 다시 배치할 필요가 있는 변경 요소 또는 추가된 것과 그 자식

4. 랜더 트리 그리기(Paint): 레이아웃 단계를 통해 화면에 배치된 엘리먼트들에게 색을 입히고 레이어의 위치를 결정하는 단계

• 전역적 페인팅과 증분적 페인팅이 있음
• 순서가 있어, z-index가 낮은 순서대로 먼저 페인팅

기타 용어 정리

---

• 문서 파싱 : 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
  • 문서에 작성된 언어 또는 형식의 규칙에 따라야 하며 어휘분석과 구문분석으로 분류됨
• 토큰화 : 의미가 있는 최소 단위로 코드를 쪼개는 것
• 파스트리 : 브라우저가 읽어야 할 HTML 코드를 트리 모양으로 구조화하여 나타낸 것
• 돔트리 : 우리가 실제로 상호작용할 수 있는 HTML 엘리먼트로 이루어진 트리, JavaScript로 상호작용
  • DOM : 문서 객체 모델(Document Object Model)
• BNF : BNF(Backus-Naur Form)는 존 배커스와 나우르가 만든 표기법으로 문법을 수학적인 수식으로 나타낼 때 사용
• 가상 DOM : 변경 사항들을 한 번에 묶어서 실제 DOM에 반영, React와 Vue 등 사용
• 어태치먼트(attachment)- 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정

virtual DOM

---

• 실제 DOM과 같은 속성들은 가지고 있지만 실제 DOM의 API는 가지고 있지 않음
• 데이터가 변경 되면 UI는 가상 돔에 랜더링 됨 ->이전 가상 돔과 비교해 바뀐 부분만 실제 돔에 반영됨
• 모든 변화를 묶어서 한 번만 실행함(연산 횟수를 줄일 수 있음)

참고자료
네이버 d2 브라우저 작동 원리
브라우저는 웹 페이지를 어떻게 그릴까?