[TIL] 웹 브라우저 이해

브라우저

브라우저를 구성하는 다양한 레이어들

 

• 유저 인터페이스: url 입력창을 포함한 웹페이제 외적 클라이언트 요소
• 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 중재
• 렌더링 엔진: 리소스를 파싱하고 결과물을 바탕으로 페이지를 그려냄
  • webkit, gecko 등
• 네트워크 레이어: http(s)프로토콜을 이용해 외부 리소스를 얻어오고 서버에 요청을 보낼 때 사용
• js 인터프리터: 자바스크립트를 해석하고 실행
• ui 백엔드: 렌더트리를 기반으로 운영체제의 인터페이스를 따르는 ui를 처리 
• 자료 저장소: 데이터를 브라우저 자체 로컬에 저장하기 위한 레이어 접근 및 저장에 활용
  • 로컬스토리지 등

 

동작

1. 유터 인터페이스에서 url 입력받음
2. 브라우저 엔진에서는 검색어인지 url인지 검증
3. 렌더링 엔진을 거처 네트워크 레이어에서 리소스 요청
4. 리다이렉션(3xx)이 아닐경우 렌더링 파싱 시작 

 

렌더링

5. 토큰화된 HTML과 CSS를 노드로 파싱하여 트리를 구성(DOM,CSSOM)

  5-1. 해당 돔은 자바스크립트로 조작할 수 있음

 

6. DOM트리와 CSSOM트리를 활용해 렌더트리를 형성함

// 5번과 6번 작업은 병렬적으로 실행됨(일부분 dom -> 일부분 렌더트리)

  6-1. 렌더트리는 렌더에 필요한 부분만 구성되어있음(head,script,display:none은 반영되지않음)

 

7.리플로우(레이아웃): 위치와 크기, 레이어간 순서를 계산하여 좌표에 나타냄

  7-1. 더티 비트 시스템으로 특정 엘리먼트 레이아웃이 변경되었을때 특정부분만 다시 계산

         이는 증분적레이아웃(엘리먼트 변경을 배치작업) 

         dom에대해 읽어오고 변화를 주는 코드는 각각서로 묶는 최적화 작업 필요

 

8.리패인팅 : 엘리먼트에 색을 입히고 레이어의 위치를 결정