browser의 동작

웹을 통해서 전달되는 데이터는 어딘가에 해석되어야 한다. 서버에서 전송한 데이터(HTML과 같은)가 클라이언트에 도착해야 할 곳은 크롬, 파이어폭스, 사파리같은 브라우저이다. 이런 브라우저에는 데이터를 해석해주는 파서와 데이터를 화면에 표현해주는 렌더링엔진이 포함되어있다.

항상 인터넷을 사용하면서, 웹 개발을 하면서 내가 만든 html문서들이 브라우저에 보여질때 내부적으로 어떤과정을 거치는지 궁금해서 Browser의 동작과정을 간단히 알아보고자 한다.

HTML을 해석해서 DOM 트리를 만들고, CSS를 해석해서 CSS 트리(CSS Object Model)을 만든다.

만든 DOM 트리와 CSS 트리는 연관되어 있으므로  Render Tree로 다시 조합된다.

이렇게 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있다.

이후에 이렇게 구성된 Render Tree정보를 통해서 화면에 어떤 부분에 어떻게 색칠을 할지 그리기 과정을 거쳐서 화면에 표시하게 된다.

참고링크: https://www.edwith.org/boostcourse-web/lecture/16663/ (부스트코스)

참고링크: https://d2.naver.com/helloworld/59361 (브라우저는 어떻게 동작하는가?)