웹 브라우저 엔진과 웹 브라우저 엔진의 렌더링 과정

웹 브라우저

웹 브라우저는 사용자와 웹 서버를 연결시켜주는 소프트웨어다. 사용자의 요청을 서버에 전달하고 서버의 응답을 사용자에 다시 전달해준다. 브라우저의 구성 요소는 다음과 같다.

https://all-young.tistory.com/22

user interface : 요청한 페이지를 보여주는 창을 제외한 나머지

browser engine : user interface와 rendering engine 사이의 동작 제어, data storage를 참조해 다양한 작업 수행(웹 브라우저의 중심)

rendering engine : HTML과 CSS를 파싱하여 요청에 대한 응답을 화면에 출력

networking : http 요청 수행(통신)

JS engine : javascript 코드 해석 및 실행

UI backend : 기본적인 위젯을 그리는 인터페이스

data storage : 브라우저 메모리를 활용해 데이터를 저장하는 영역

---

웹 브라우저 엔진(렌더링 엔진)

브라우저 엔진은 웹 브라우저의 중심이다. 브라우저 엔진과 렌더링 엔진은 서로 밀접한 관련이 있어 둘을 하나라고 봐도 무방하다.

(브라우저 엔진을 레이아웃 엔진 또는 렌더링 엔진이라고도 한다)

 

렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일이다. 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표현할 수 있다.

(플러그인이나 브라우저 확장 기능으로 더 많은 유형도 표현 가능)

 

크롬은 블링크(Blink), 사파리는 웹킷(WebKit), 파이어폭스는 게코(Gecko)를 사용한다. 이 외에도 많은 엔진들이 존재한다.

---

웹 브라우저 엔진의 렌더링 과정

리소스 다운 -> DOM, CSSOM 트리 구축 -> 렌더링 트리 구축 -> 레이아웃 -> 페인팅

 

사용자가 브라우저를 통해 웹 사이트에 접속하면 서버와 통신하여 HTML, CSS 등의 리소스를 전송받는다. 렌더링 엔진은 받은 리소스들을 파싱하는데 HTML로 DOM 트리를 만들고, CSS로 CSSOM 트리를 만든다.

https://bit.ly/2WochoN

브라우저는 HTML 마크업을 처리 할 때 마다 위의 모든 단계를 수행한다. 이후 DOM 트리를 생성하는 과정과 동일한 과정으로 CSSOM 트리를 생성한다.

https://bit.ly/2Vg5Nb0

https://bit.ly/2WxQefH

이렇게 DOM 트리와 CSSOM 트리가 만들어지면 이 둘을 결합해 렌더링 트리를 생성한다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다.

https://bit.ly/3iQ3ovQ

레이아웃 단계에서는 뷰포트 내 각 요소의 정확한 위치와 크기를 정확하게 캡쳐하는 Box 모델을 사용해 위치나 스타일 등을 계산한다.

https://bit.ly/3xdGFyN

레이아웃 단계에서 모든 계산이 완료가 되면 화면에 요소들을 그리게 된다. 이를 페인팅 또는 래스터화 라고 한다. 레이아웃 단계에서 계산된 것들이 실제 화면에 픽셀로 찍혀 나온다.

---

레퍼런스

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

브라우저의 렌더링 과정

https://all-young.tistory.com/22

브라우저와 렌더링 엔진 동작 원리