우리가 어떠한 제품을 판매한다 가정해 봅시다. 더 많은 고객을 끌어들이기 위해 무엇이 필요할까요? 광고, 제품의 높은 퀄리티, 수요 조사 등등 많은 요소가 고객 유치를 좌우합니다. 그렇다면 웹 개발자인 우리의 역할은 무엇일까요? 바로 제품의 퀄리티. 즉 웹브라우저의 성능을 최대로 이끌어내는 것입니다. 우리가 판매하려는 제품의 퀄리티가 떨어진다면 예민한 사용자들은 두 번 다시 우리의 제품을 구매하지 않을 것입니다. 실제로 BBC는 사이트를 로드하는 시간이 1초 추가될 때마다 사용자 수가 추가로 10% 줄어든다는 사실을 발견했습니다.[1] 그만큼 웹의 성능은 사용자를 유지하는데 매우 큰 영향을 미친다는 것을 알 수 있습니다.
훌륭한 개발자로 성장하기 위해서는 단순히 기능을 구현하는 것에서 그치지 않고, 사용자의 편의를 위해 성능을 개선하려는 치열한 노력도 필요할 것입니다. 그것이 우리가 브라우저의 동작원리를 알아야 하는 이유입니다. 앞으로 우리는 브라우저의 구조와 통신 과정을 이해하여 성능 문제가 발생한 위치를 알 수 있고, 렌더링 과정을 파악하여 최적화 방법을 찾을 수 있습니다. 쉬운 설명과 이해를 돕기 위한 다양한 예제를 준비했으니 브라우저 동작 원리 에 대해 알아봅시다!
우리는 하루에도 수십 번씩 인터넷에 접속하여 검색을 하고, 뉴스도 보며 여러 웹사이트를 둘러봅니다. 이러한 인터넷 접속을 위한 도구가 바로 브라우저입니다. 주로 사용하는 브라우저는 크롬(Chrome), 사파리(Safari), 엣지(Edge), 파이어폭스(Firefox), 오페라(Opera)가 있으며 이 책에서는 StatCounter 사이트[2]에 명시된 전 세계 브라우저 점유율을 기반으로 가장 높은 점유율을 차지하는 크롬에 포커싱하여 다루도록 하겠습니다.
그렇다면 브라우저는 어떤 일을 할까요? 브라우저의 핵심 기능은 우리가 보고자 하는 웹페이지를 서버에 요청하고 서버에서 받은 응답을 브라우저에 표시하여 웹 리소스를 제공하는 것입니다.
이때 브라우저는 HTML 파일을 해석하여 표시하는 과정에서 웹 표준화 기구인 W3C에서 정한 표준 명세를 따릅니다. 이렇듯 완성된 웹페이지를 보기까지 브라우저 내부에선 많은 일들이 일어납니다. 마치 무대 뒤에 있는 수많은 스태프가 각자의 역할을 하며 하나의 멋진 무대를 만드는 것처럼 말이죠!
그렇다면 브라우저는 어떤 구조로 구성되어 동작할까요? 이제부터 브라우저의 구성 요소를 살펴보겠습니다.
브라우저는 기본적으로 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워킹, UI 백엔드, 자바스크립트 인터프리터, 자료 저장소로 구성되어 있습니다.[3]
브라우저 구성 요소