브라우저의 주요 구성 요소

1. 사용자 인터페이스: 주소 표시줄, 뒤로/앞으로 버튼, 북마크 메뉴 등이 포함

   • 요청된 페이지가 표시되는 창을 제외한 브라우저 디스플레이의 모든 부분

2. 브라우저 엔진: UI와 렌더링 엔진 간의 작업을 marshalling

3. 렌더링 엔진: 요청된 콘텐츠를 표시하는 역할을 함

   • 요청된 콘텐츠가 HTML인 경우, 렌더링 엔진은 HTML과 CSS를 파싱하고 파싱된 콘텐츠를 화면에 표시

4. 네트워킹: HTTP 요청과 같은 네트워크 호출의 경우, 플랫폼 독립형 인터페이스 뒤에 있는 여러 플랫폼에 서로 다른 구현을 사용

5. UI 백엔드: 콤보 상자 및 창과 같은 기본 위젯을 그리기 위해 사용됨

   • 플랫폼에 종속되지 않는 일반 인터페이스를 노출 (아래에는 운영체제 사용자 인터페이스 메서드를 사용)

6. JavaScript 인터프리터: JavaScript 코드를 파싱하고 실행하는 데 사용됨

7. 데이터 스토리지: 지속성 레이어. 브라우저는 쿠키와 같은 모든 종류의 데이터를 로컬에 저장할 수 있음

   • 브라우저는 localStorage, IndexedDB, WebSQL, FileSystem과 같은 저장소 메커니즘도 지원

   • chrome과 같은 브라우저는 렌더링 엔진의 인스턴스를 여러개 실행(탭마다 하나씩)

     • 각 탭은 별도의 프로세스에서 실행됨

---

렌더링 엔진

• 책임: 요청된 콘텐츠를 브라우저 화면에 표시하는 것

기본 흐름

• 렌더링 엔진이 네트워킹 레이어에서 요청된 문서의 콘텐츠를 가져오기 시작

• 렌더링 엔진은 HTML 문서 파싱을 시작하고, Content Tree라는 트리의 요소를 DOM 노드로 변환함 (엔진은 외부 CSS 파일 & 스타일 요소에서 모두 스타일 데이터를 파싱)

  • 스타일 지정 정보는 렌더링 트리를 만드는 데 사용됨

렌더링 트리 생성 후, 레이아웃 과정을 거침

• 각 노드에 화면에 표시되어야 하는 정확한 좌표를 제공해야 함

페인팅

• 렌더링 트리가 탐색되고, 각 노드가 UI 백엔드 레이어를 사용하여 페인팅됨

점진적으로 이 과정은 진행됨

• 더 나은 사용자 환경을 위해 렌더링 엔진은 최대한 빨리 콘텐츠를 화면에 표시하려고 시도

• 렌더링 트리의 빌드 및 레이아웃을 시작하기 전, 모든 HTML이 파싱될 때까지 기다리지 않음

• 네트워크를 통해 나머지 내용이 전송되기를 기다리는 동시에, 받은 내용의 일부를 먼저 화면에 표시

기본 흐름 예시

• Gecko

  • 형상 트리(frame tree): 시각적으로 처리되는 렌더 트리 (각 요소를 형상(frame)이라고 함)

• Webkit

  • 렌더 객체(render object)로 구성되어 있는 렌더 트리(render tree)

• Webkit은 요소를 배치하는데, 배치(layout)라는 용어를 사용하지만, Gecko는 리플로(reflow)라고 부름

• 어태치먼트(Attachment): Webkit이 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정

• Gecko는 HTML과 DOM 트리 사이에 콘텐츠 싱크(Content Sink)라고 부르는 과정을 둠

---

파싱

• 렌더링 엔진 내에서 매우 중요한 프로세스

• 문서를 파싱 = 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

  • 파싱 결과: 문서 구조를 나타내는 노드 트리(파싱트리(parse tree) 또는 문법 트리(syntax tree)라고 부름)

문법

• 파싱: 문서에 작성된 언어 또는 형식의 규칙에 따름 (파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 함 - 문맥 자유 문법)

• 인간의 언어는 이런 모습과는 다르기 때문에, 기계적으로 파싱이 불가능

파서 - 어휘 분석기 조합

• 파싱 = 어휘 분석 / 구문 분석 (두 가지로 구분 가능)

• 어휘 분석: 자료를 토큰으로 분해하는 과정 (토큰 - 유효하게 구성된 단위의 집합체, 용어집)

• 구문 분석: 언어의 구문 규칙을 적용하는 과정

• 파서는 보통 2가지 일을 함

  1. 자료를 유효한 토큰으로 분해하는 어휘 분석기(또는 토큰 변환기)

  2. 언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서

• 어휘 분석기는 공백과 줄 바꿈 같은 의미 없는 문자를 제거

파싱 과정은 반복됨

• 파서는 보통 어휘 분석기로부터 새로운 토큰을 받아서 구문 규칙과 일치하는지 확인함

  • 규칙에 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고, 파서는 또 다른 토큰을 요청

• 규칙에 맞지 않으면, 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청

  • 맞는 규칙이 없는 경우 예외로 처리함 (문서가 유효하지 않고, 구문 오류를 포함하고 있다는 의미)

변환

• 파서 트리는 최종 결과물이 아님. 파싱은 보통 문서를 다른 양식으로 변환, 컴파일이 그 예

• 컴파일러: 소스 코드를 기계 코드로 만들며, 파싱 트리 생성 후, 이를 기계 코드 문서로 변환

어휘와 구문에 대한 공식적인 정의

• 어휘: 보통 정규 표현식으로 표현

• 구문: 보통 BNF라고 부르는 형식에 따라 정의

참고: https://d2.naver.com/helloworld/59361

https://web.dev/articles/howbrowserswork?hl=ko#formal_definitions_for_vocabulary_and_syntax

개요

• 빠른 사이트는 더 좋은 사용자 경험을 제공

• 웹 성능에 있어, 지연시간과 브라우저가 대부분 싱글 쓰레드로 동작한다는 점의 두 가지 문제가 있음

1. 지연시간: 최대한 빠르게 요청하는 것도 포함

• 네트워크 지연시간 = 네트워크를 통해 컴퓨터로 바이트를 전송하는 데 걸리는 시간

• 웹 최적화 = 페이지 로드가 최대한 빠르게 이루어질 수 있도록 하는 것

2. 대부분 브라우저는 싱글 쓰레드

• 부드러운 스크롤부터 매우 기민하게 반응하는 터치에 이르기까지 성능이 뛰어난 상호 작용을 보장하는 것

1. 탐색

• 웹 페이지를 로딩하는 첫 단계 (사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, form을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생)

• 지연시간과 대역폭은 지연을 일으키는 적

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#dns_%EC%A1%B0%ED%9A%8Cdns_lookup

참고

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#%EC%83%81%ED%98%B8%EC%9E%91%EC%9A%A9interactivity