웹 브라우저는 웹 서버와 쌍방향 통신을 하면서 요청에 따른 HTML, CSS, JavaScript 등의 파일들을 해석하여 화면에 보여주는 응용 소프트웨어이다. 우리가 흔하게 사용하는 웹 브라우저는 크롬, 사파리, 파이어폭스 등이 있겠다.
웹 브라우저들은 어떤 구조로 구성되며 어떤 방식으로 화면을 우리에게 보여주는 지 알아보자
🚧 웹 브라우저의 구조
그림과 같이 웹 브라우저는 크게 7가지 부분으로 나눌 수 있다.
- 사용자 인터페이스(User Interface): 사용자와 상호 작용하는 인터페이스. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
- 브라우저 엔진(Browser Engine): 사용자 인터페이스와 렌더링 엔진을 연결하는 부분
- 렌더링 엔진(Rendering Engine): 요청한 페이지를 파싱해서 UI에 나타내주는 기능을 함
- 통신(Networking): 네트워크 호출에 사용되는 부분
- 자바스크립트 해석기(JavaScript Interpreter): 자바스크립트 코드를 해석하고 실행하는 기능
- UI 백엔드(UI Backend): UI가 작동할 수 있게 하는 백엔드
- 자료저장소(Data Storage): 쿠키와 같은 로컬 데이터를 저장하는 공간
이 포스팅에서 주목해야 할 부분은 렌더링 엔진이다. 렌더링이란 사용자의 요청 받은 내용을 브라우저에 나타내는 것을 말하는데 렌더링 엔진은 말 그대로 웹 페이지 컨텐츠를 표시하기 위한 엔진이다.
크롬에서 개발자 도구를 열어보면 -webkit-, -moz- 등의 키워드들을 볼 수 있었는데 사실 이것은 렌더링 엔진 이름으로 브라우저마다 확장을 지원하기 위함이었던 것이다. 사파리는 webkit, 크롬은 Blink라는 이름을 가진 렌더링 엔진을 사용하는데 이러한 렌더링 엔진은 아래에서 설명하는 과정을 통해 렌더링을 한다.
🚧 렌더링 과정
- 사용자가 특정 페이지에 접속해 HTML 문서를 다운 받으면 이를 파싱해서 DOM 트리(HTML, XML 문서의 프로그래밍 인터페이스를 트리구조로 나타낸 것)를 만든다.
- DOM트리를 만들다가
<link>태그를 만나 StyleSheet를 내려받아야 할 경우 CSS 파싱을 통해 CSSOM 트리(CSS 문서를 파싱하여 구조화한 트리)를 만든다. 이후 DOM 트리를 파싱하여 완성한다.- DOM 트리와 CSSOM 트리를 결합하여 Render 트리(화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함한 트리)를 생성한다.
- Render 트리 각 노드의 레이아웃을 결정한다. (Layout/Reflow)
- UI 백엔드에서 각 노드들을 화면에 그린다. (Paint/Repaint)
🎈 script
만약 DOM 트리를 생성하던 중에 <script> 태그를 만난다면 렌더링 엔진에서 파싱을 중단하고, 자바스크립트 엔진으로 DOM 제어 권한을 넘긴다. JavaScript 코드는 DOM을 활용해 동작을 하려고 하기 때문에 코드가 실행된다면 DOM구조가 변경될 수도 있다. 또한 아직 생성되지 않은 요소에 대한 명령이 있을 수도 있어서 JavaScript코드가 정상 작동하지 않을 수 있다. 그래서 <script> 태그를 주로 <body> 태그의 최하단에 위치 시켜 DOM 트리가 완전히 생성된 후 JavaScript코드가 실행되도록 한다.
🎈 Reflow
Reflow는 뷰포트 내에서 Render 트리 요소들의 정확한 위치들을 계산하는 과정이다. 윈도우가 리사이징되거나 노드가 추가되고, 요소의 크기가 변경되는 등 전체적으로 위치나 크기 조정이 될 때 Render 트리의 각 노드들의 크기나 위치를 재계산한다. 이후 Repaint과정까지 실행 함으로 렌더링을 마친다.
🎈 Repaint
전체적으로 크기나 위치 변경이 일어나지 않고 요소 개별적인 변경만 있을 경우 Repaint를 한다. 예를 들면 색상이나 그림자가 변경되는 것이다.
출처 및 참고
