브라우저는 어떻게 동작하는가?

19 Jan 2021

브라우저의 기본구조

1. 사용자 인터페이스

2. 브라우저 엔진

   사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

3. 렌더링 엔진

   HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시

   크롬은 webkit엔진을 이용한다.

4. 통신

   HTTP요청과 같은 네트워크 호출

5. UI백엔드

6. 자바스크립트 해석기

7. 자료저장소

   쿠키를 저장하느넋과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.

렌더링 동작과정

1. DOM 트리 구축 위한 HTML 파싱
2. 렌더 트리 구축
3. 렌더 트리 배치
4. 렌더 트리 그리기

일련의 과정들이 점진적으로 이루어지긴 하지만 렌더링 엔진은 좀 더 나은 사용자 경험을 위해서 가능하면 빠르게 내용을 표시하기 위해 모든 HTML을 파싱하는 것을 기다리는 것이 아니라 일부 렌더 트리는 우선 배치 그리고 그리기를 시작한다. 그래서 네트워크로 부터 나머지 내용이 전송되기전에 받은 내용을 우선적으로 표시할 수 있는 것이다.

파싱의 과정과 같은 심화 학습은 다음에 기회되면 알아 보도록 하겠다.

참고 사이트

https://d2.naver.com/helloworld/59361