🌎 브라우저 작동 원리
들어가기 전에
프런트엔드 개발자라면 브라우저에 대해서도 알아야 한다.
브라우저에는 크롬, 파이어폭스, 사파리 등 종류가 다양하다. 종류가 다양한만큼 시장점유율도 다르다.
아래 그림에서 크롬 → 사파리 → 파이어폭스 순의 브라우저 시장 점유율을 확인할 수 있다.
이번에는 브라우저가 어떻게 작동하는지에 대해 다룰 것이다.!
브라우저 기본 구조
일반적으로 대부분의 브라우저는 아래 그림과 같은 구조로 구성되어 있다.
- 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 부분
- 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
- 렌더링 엔진 : HTML, CSS를 파싱하여 요청한 콘텐츠 표시
- 통신 : HTTP 요청과 같은 네트워크 호출에 사용
- 자바스크립트 해석기 : 자바스크립트 코드 해석 및 실행
- UI 백엔드 : select, input 등 기본적인 위젯을 그리는 인터페이스
- 자료 저장소 : cookie, localStorage 등 모든 자료를 저장하는 영역
크롬은 대부분 브라우저와 달리 각 탭마다 별도의 렌더링 인스턴스를 유지하는 방식이다.
따라서, 각 탭은 독립된 프로세스로 처리된다.
브라우저 작동 원리를 알려면 렌더링 엔진에 대해서 좀 더 자세히 알아야 한다.
렌더링 엔진, 무엇(What)일까?
HTML 및 XML 문서나 이미지 등 요청받는 내용을 브라우저 화면에 표시하는 일을 수행하는 것
이러한 렌더링 엔진은 브라우저가 다양한만큼, 브라우저마다 각기 다르다.
인터넷 익스플로러(IE)는 Trident 엔진, 파이어폭스는 게코(Gecko) 엔진, 크롬/사파리는 웹킷(Webkit) 엔진을 이용한다.
다양한 렌더링 엔진이 있지만, 아래와 같이 일반적으로 렌더링 엔진들은 공통적인 특징을 지닌다.
좀 더 나은 사용자 경험을 위해 가능한 빠르게 내용을 화면에 출력한다.
다시 말해, 모든 HTML을 파싱할 때까지 기다리는 것이 아닌 나머지 내용을 기다리면서 동시에 받은 내용의 일부를 화면에 출력한다.
렌더링 엔진의 기본 동작 방식은 어떻게(How) 될까?
* 웹킷 엔진에 초점을 두어 설명
① HTML 문서를 파싱하고 DOM 트리 구축
② 외부 CSS 파일과 함께 포함된 스타일 요소 파싱
③ DOM 트리와 ②의 결과물을 합쳐 렌더 트리 구축
④ 렌더 트리의 각 노드에 대해서 화면 상에 어디에 배치할지 결정
⑤ UI백엔드에서 렌더 트리를 그린 후, 화면에 사용자가 볼 수 있도록 출력
아래 그림은 위 과정을 좀 더 간소화해서 나타냈다.
① DOM 구축을 위한 HTML 파싱
어떻게 HTML을 파싱하는지는 아래 과정을 보면 한눈에 알 수 있다.
<!-- 예시 HTML 코드 -->
<html>
<body>
<p> Hello World </p>
<div> <img src="example.jpg" alt="example.jpg" /> </div>
</body>
</html>
html 태그 → HTMLHtemlElement
body 태그 → HTMLBodyElement
p 태그 → HTMLParagraphElement
div 태그 → HTMLDivElement
img 태그 → HTMLImageElement
* DOM은 마크업과 1:1 관계 성립
이렇게 HTML 파싱을 통해 DOM Tree가 구축된다.
② 외부 CSS 파일과 함께 포함된 스타일 요소 파싱
- CSS 파일은 스타일 시트 객체로 파싱되고 각 객체는 CSS 규칙을 포함한다.
- CSS 규칙 객체(CSSOM)는 선택자와 선언 객체로 구성된다.
③ DOM 트리와 ②의 결과물을 합쳐 렌더 트리 구축
- DOM Tree가 구축되는 동안 브라우저는 렌더 트리를 구축한다.
- 이는 표시해야 할 순서, 문서의 시각적인 구성요소를 올바른 순서대로 내용을 그려낼 수 있도록 하기 위함이다.
* 게코(Gecko)는 이 구성요소를 형상(frame)이라 하며, 웹킷(Webkit)은 렌더러(render) 혹은 렌더 객체(render object)라 함.
- DOM Tree와 렌더 트리는 아래 그림처럼 1:1 대응 관계가 성립 X
왜(why)?
시각적으로 보이지 않는 <head>, display:'none', <meta> 등 이런 요소는 제거된다.
다시 말해, 페이지를 렌더링 하는데에 필요한 노드만 렌더 트리에 포함된다는 것이다.
그러고 나서 CSSOM 규칙을 찾고 적용한 후 스타일을 입힌 노드를 출력한다.
④ 렌더 트리의 각 노드에 대해서 화면 상 어디에 배치할지 결정
- ③에서 출력된 노드들을 브라우저 뷰포트(view port) 내에서 정확한 위치와 크기를 계산한다.
*뷰포트? 그래픽이 표시되는 브라우저의 영역이나 크기를 의미함.
⑤ UI백엔드에서 렌더 트리를 그린 후, 화면에 사용자가 볼 수 있도록 출력
- ④과정을 거친 노드들의 위치, 크기에 실제 픽셀(px) 값을 채워 넣어서 그려지는 단계이다.
- 스타일이 복잡할수록 그리는 소요시간⬆︎
마치며
이번에 브라우저 작동 원리에 대해 공부했다.
처음에 접했을 때 생각보다 복잡해서 혼란스러웠지만, 과정을 하나씩 차근차근 읽어보면서 이 글을 적은 만큼 이해할 수 있었다.
https://d2.naver.com/helloworld/59361을 참고하면서 내용을 정리했지만,
파싱 방법, 파싱 과정, 종류 등 컴파일러에서 어떻게 파싱을 하는지에 대해서는 아직 완벽하게 이해하지 못했다...
(분명 학교에서 컴파일러 수업 때 배운 거 같은데... 왜 내 머릿속은 비어있을까?🤔 )
이번 글은 여기서 마치고 다음에 파싱에 대해서도 공부해야 할 것 같다:)