브라우저 렌더링 과정 - 01. 브라우저란?

sudyn·2023년 6월 19일

브라우저(웹)

목록 보기

1/8

웹페이지에 접속시 로딩 속도가 느리거나 렌더링이 느리다면 사용자 경험을 방해하게 된다. 브라우저의 렌더링 과정을 이해해야 효율적인 성능 개선과 최적화가 가능해진다.

그렇다면, 먼저 브라우저가 무엇인지 알아보자.

브라우저는 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Firefox, Internet Explorer 등을 말한다.

MDN에서는 브라우저에 대해 아래와 같이 설명한다.

웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램

브라우저는 유저가 선택한 자원(HTML 문서, PDF,이미지, 비디오 등의 컨텐츠)을 서버로 부터 받아와서 유저에게 보여준다.

브라우저의 주요 구성 요소와 각각의 요소의 역할을 알아보자.

사용자가 사용하며 상호작용하는 부분이다. 우리가 브라우저에서 자주 사용하는 것들을 떠올리면 좋다.
예를 들어, 주소 표시줄, 이전 / 다음 버튼, 북마크 메뉴 등으로 요청한 페이지를 보여주는 창을 제외한 사용자가 컨트롤 할 수 있는 부분을 의미한다.

사용자 인터페이스와 렌더링 엔진 사이의 중재자 역할을 한다. 사용자가 입력한 URL의 URI값이나 사용자 인터페이스에서 입력된 값을 렌더링 엔진에게 전달하고, 자료 저장소로 이동하는 역할을 한다.

요청한 콘텐츠를 표시하는 역할을 한다. HTML, CSS, JS를 파싱하고 그 결과물을 토대로 페이지를 그려내는 역할을 한다.

네트워크 통신은 HTTP 요청과 같은 네트워크 호출에 사용되는데 렌더링 엔진으로부터 HTTP 요청 명령을 받아 서버에게 요청하고 응답을 받아서 렌더링 엔진에게 반환한다.

자바스크립트 코드를 해석하고 실행하는 인터프리터다. 구글의 v8엔진이 이에 속하며 크롬과 Node.js에서 사용되고 있다.

브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리한다.
select / input 등 기본적인 위젯 등 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용한다.

브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장하기 위한 레이어로, 쿠키나 로컬 스토리지, 세션 스토리지, indexedDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는데 사용된다.

개발계발하는 프론트엔드 개발자🍠