브라우저란?
웹 브라우저(Web browser) 혹은 브라우저 는 웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램. 브라우저는 사용자 에이전트의 가장 친숙한 유형이다. (참고. MDN)
우리가 많이 사용하는 Chrome, Safari, Edge, Firefox 등등이 있다.
브라우저 구조
- User Interface - 사용자가 접근할 수 있는 영역으로 주소표시줄, 뒤로가기/앞으로가기 버튼, 새로고침 버튼 등 브라우저 자체의 GUI를 구성하는 부분이다.
- Browser engine - 사용자 인터페이스, 렌더링 엔진 사이의 동작을 제어하는 엔진. 사용자가 주소표시줄에 URI를 입력하면 브라우저 엔진이 자료 저장소에서 해당 URI에 알맞는 자료를 찾고 해당 자료를 렌더링 엔진에 전달한다.
- Rendering engine - 브라우저 엔진에게 전달받은 HTML과 CSS를 파싱하여 화면에 그린다. (Safari는 Webkit, Firefox는 Gecko, Chrome은 Blink에 해당한다.)
- Networking - HTTP 요청과 같은 각종 네트워크 요청을 수행한다. URI에 해당하는 서버 응답 데이터를 렌더링 엔진에게 돌려주는 역할을 한다.
- UI Backend - 체크박스, 버튼 같은 기본적인 위젯을 그리는 부분이다.
- JavaScript Interpreter - 자바스크립트 코드를 해석하고 실행하는 엔진이다. (Chrome은 V8엔진, Safari는 Nitro엔진 등등이 있다.)
- Data Persistence - Web Storage나 Cookie와 같이 브라우저에서 데이터를 저장하는 영역이다.
브라우저 렌더링
1. Parsing: HTML 문서를 파싱하여 DOM트리를 만든다.
2. Parsing: CSS를 파싱하여 CSSOM트리를 만든다.
3. Style: DOM트리와 CSSOM트리를 합쳐 Render Tree를 만든다.
4. Layout: Render Tree에서 각 노드의 뷰포트 내 정확한 위치와 크기를 픽셀 단위로 계산한다.
5. Paint: 계산된 값을 통해 각 노드를 화면에 픽셀단위로 레이어를 만든다.
6. Composition: 레이어를 합성하여 실제 화면에 나타낸다. 웹 페이지가 보이는 건 이 때.
요소의 크기나 위치가 바뀔 때, 브라우저 창 크기가 바뀔 때 4번 Layout과정을 다시 수행한다.
크롬의 경우, Layout과정 이후에 정해진 기준에 따라 필요하면 브라우저가 Layer를 생성한다.
Layer도 트리형태로 구성이 되어 프린팅 과정에서 하나의 비트맵으로 합성해 페이지를 완성한다.
Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상 가장 큰 이점을 가진다.
해당 주제를 검색하면 꼭 뜨는 사이트가 있다.
네이버 D2 블로그의 '브라우저는 어떻게 동작하는가?'
더 깊은 내용을 원한다면 위 사이트를 읽어보길 추천한다.
참고
https://d2.naver.com/helloworld/59361
https://developer.mozilla.org/ko/docs/Glossary/Browser
https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
'FrontEnd > 브라우저' 카테고리의 다른 글
| CWV (Core Web Vital) 이란? (0) | 2023.12.01 |
|---|
댓글