사용자가 웹사이트에 접속하면 브라우저에서는 무슨일이 일어날까?
브라우저 구조 (Browser architecture)
figma로 그려본 브라우저 아키텍쳐
- User interface(사용자 인터페이스): 사용자가 웹브라우저를 탐색하고 상호작용할수 있도록 만들어진 모든 요소.
(e.g 주소창, 검색버튼, 북마크바, 테마 및 스킨, etc) - Browser Engine (브라우저 엔진): 사용자 인터페이스와 렌더링 엔진간 브릿지 역할. 버튼 클릭, URL 파싱, 웹 콘텐츠 처리 등 상호작용 관리.
- Rendering Engine (렌더링 엔진): HTML, CSS, JavaScript를 해석하여 웹 콘텐츠를 display함.
- Networking (네트워크): HTTP요청을 통해 웹서버와 통신해 웹페이지 리소스를 불러옴.
- JavaScript Interpreter(자바스크립트 엔진): JS 코드 실행, DOM 요소 조작, 브라우저 객체와 상호작용.
- Data (데이터 저장소): 사용자 환경설정, 검색 히스토리, 비밀번호 및 캐시 데이터 저장.
- UI Backend: 사용자 인터페이스 내 동적 및 인터렉티브 기능 제공. 브라우저 최적화와 user input 효율적으로 다룸.
브라우저 동작
1. 탐색( Navigation) -> 요청 (Request) ->응답 (Response)
- 사용자가 웹사이트에 접속하면, 브라우저는 사용자가 입력한 Domain의 IP주소를 DNS에게 요청한다.
- 첫 방문하는 경우 DNS조회를 요청하고, 후에는 캐시에 저장된 IP주소를 사용한다.
- TCP/ 3way-handshake: 브라우저(클라이언트) -> 서버 -> 브라우저 -> 서버로 브라우저와 웹서버 연결을 설정한다.
- HTTP request: 브라우저가 서버에게 데이터 요청한다.
- HTTP response: 서버가 브라우저에게 데이터 전송한다.
2. 구문 분석 (Parsing)
-
받은 데이터로 브라우저는 w3c 명세에 따라 html을 해석 (parsing) 하여 DOM tree를 생성한다.
- 바이트 스트림으로 전달받음.
- 이해할 수 있는 언어로 인코딩(encoding).
- Token: 브라우저가 캐릭터를 하나씩 읽으며 해석.
e.g) Start tag Tokenhtml=<html>
Character Token = 문자 단위로 분리된 토큰.
End tag Token =<\html>.
- 이런식으로 토큰을 생성해 tag를 객체화 하여 Node로 만든다.
- Node 간 관계를 이어 모델화한다 = DOM (Document Object Model).
- DOM tree = 문서의 형태, 노드의 관계도.
-
렌더링 엔진이 DOM 생성중 스타일 태그를 만나면 DOM 생성 중지하고 CSSOM tree를 생성한다.
- 서버에 CSS 요청.
- css를 parsing.
- Bytes > characters > Tokens > Nodes > Model화.
- CSSOM(css model)화 해서 CSSOM tree를 생성.
<script>태그를 만나면 JavaScript 엔진에 제어 권한 넘긴다. (DOM 생성중단)
defer나async속성을 사용하면 DOM의 생성이 중단되지 않음.
<script>를 바디 맨 아래에 넣는 이유.- JS 엔진은 js 스크립트를 parsing해 AST(abstract syntax tree: 추상 구문 트리)를 만들고 실행한다.
- 이후 DOM 생성을 계속한다.
3. 렌더 (Render)
-
Construction: 브라우저는 DOM tree와 CSSOM tree를 합쳐 Render tree를 만든다. (웹사이트 최종 설계도) 시각적으로 표시되지 않는 노드들은 제외시키고 포함하지 않는다. (e.g display: none;)
-
렌더링 엔진 작업: Render tree를 기반으로 렌더링 엔진은 Layout > Paint > Composition 과정을 거친다.
- Layout: 노드의 위치와 크기를 계산하여 화면에 배치.
- Paint: UI backend가 렌더트리의 노드를 돌면서 화면에 UI를 그림.
- Composition: 노드들의 레이어를 z-index 순서대로 구성.
모든 과정이 완료 되면 사용자가 볼 수 있는 웹페이지가 화면에 표시된다.
Reference
MDN: Populating the page: how browser work
GeekforGeeks: Browser Architecture
웹 브라우저는 어떻게 동작할까
DOM과 CSSOM, 렌더링 과정
