브라우저 동작 원리

브라우저는 우리가 평상시에 아주 자주 사용한다
누군가 브라우저가 뭐냐고 물으면 크롬이라고 대답하는 사람이 아마 80%일 것이다
그렇게 대답해도 뭔지는 알겠지만 정확하게 브라우저란 무엇을 말하는 것일까?

MDN에서 정의한 브라우저란?

웹에서 페이지를 검색하고 표시하며 사용자가 하이퍼링크를 통해 추가 페이지에 접근할 수 있도록 하는 프로그램입니다.

사용자가 원하는 데이터가 있는 페이지로 이동할 수 있게 해주는 프로그램이라고 한다

브라우저의 주요기능
사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다
(출처 : https://d2.naver.com/helloworld/59361)
여기서 말하는 자원에는 html, css, image 등이 속한다(보통은 html문서임)

브라우저 렌더링 동작 과정

1. 서버에게 http requests
2. 브라우저는 서버에서 받아온 html 파일을 파싱하여 DOM tree 구성함
   만약 css가 포함되어 있다면 CSSOM tree도 구성한다
3. dom tree와 cssom tree를 매칭시켜 실제로 화면에 그려질 render tree 구성
4. render tree를 화면에 어떻게 배치해야할지를 계산함(layout)
5. 각 노드를 화면상의 실제 픽셀로 변환-> 여러개의 레이어로 관리(paint)
6. 레이어들을 합성하여 실제 화면에 나타냄 -> 화면에서 웹을 볼 수 있음

참고 :
https://d2.naver.com/helloworld/59361
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/