[2022.11.21] 브라우저의 렌더링 과정

Reyna·2022년 11월 21일

TIL

목록 보기

14/16

🔸 브라우저란?

선택한 자원을 서버에게 요청하고, 전송받은 자원을 화면에 표시하여 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램을 말한다.
쉽게 말하면 웹 서버와 통신해서 웹사이트의 다양한 컨텐츠를 볼 수 있도록 지원해주는 프로그램을 말한다.
여기서 자원이란 HTML, CSS, javascript 등을 말한다.

🔸 브라우저의 구조

사용자 인터페이스(UI)

주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분을 말한다.

브라우저 엔진(레이아웃 엔진)

사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.

렌더링 엔진

요청한 콘텐츠를 표시. HTML, CSS 등을 파싱하여 화면에 그려준다.
보통 브라우저 엔진과 하나로 본다.

자바스크립트 해석기(엔진)

자바스크립트 코드를 해석하고 실행한다. 브라우저마다 엔진이 탑재되어 있다.

구글 크롬 V8 엔진의 구조

힙 메모리(Heap Memory)

동적 메모리 할당에 사용되는 자료구조
객체나 동적 메모리를 저장한다

콜 스택(Call Stack)

프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
자바스크립트는 싱글 스레드 기반의 언어이기 때문에 콜스택이 하나이다.
후입 선출 구조를 가진다.
콜 스택에 쌓이는 데이터 하나하나를 스택 프레임이라고 부른다.
콜 스택의 메모리 공간을 넘어버리면 스택 오버플로가 발생한다.
스택 추적
- 브라우저의 콘솔 로그에서 에러가 어디에서 발생되었는지 추적할 수 있다.

UI 백엔드

렌더링 엔진이 분석한 렌더 트리를 브라우저에 그리는 역할.
OS 사용자 인터페이스 체계를 사용한다.

자료 저장소

웹 스토리지의 특징

웹 브라우저가 직접 데이터를 저장할 수 있게 해준다
사용자 측에서 많은 정보를 안전하게 저장할 수 있게 해준다
데이터가 클라이언트에만 존재해서 트래픽 비용을 줄여준다
오리진마다 하나씩 존재한다

💡 origin : 도메인 + 프로토콜로 이루어진 식별자

웹 스토리지 종류

로컬 스토리지 : 보관 기한이 없는 데이터를 저장. 도메인만 같으면 전역으로 데이터 공유 가능
세션 스토리지 : 하나의 세션만을 위한 데이터 저장. 브라우저 탭이나 창을 닫으면 사라진다.

웹 스토리지 문법

window.localStorage : 만료 날짜가 없는 데이터를 저장할 때 사용
window.sessionStorage : 세션이 있는 데이터를 저장할 때 사용

//window 객체에 있는 Storage 객체를 통해 확인
//해당 객체가 존재하지 않으면 undefined 반환, 객체가 존재하면 function 반환

if(typeof(Storage) !== "undefined") {
  
	//web storage를 위한  코드
  
} else {
  
 //web storage를 지원하지 않는 브라우저를 위한 안내 부분
  
}

웹 스토리지를 활용한 기능

복구 및 백업 관련 기능에 주로 사용된다.
블로그 글을 작성하다가 사용자가 창을 벗어난 경우 관련 내용 복구 & 백업
사용자가 입력 폼에 입력하던 중 페이지에서 벗어난 경우 복구 & 백업
현재 읽은 글의 히스토리 저장

🔸 브라우저의 렌더링

브라우저의 렌더링이란 HTML, CSS, Javascript 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 의미한다.

1. 사용자가 브라우저를 통해 웹 사이트에 접속한다.

브라우저 검색창에 주소를 치고 엔터를 누르면 먼저 입력한 텍스트가 검색어인지, url 주소인지 확인한다.

만약 url 주소이면 브라우저 엔진이 네트워크 호출을 수행한다.

2. 네트워크를 호출한다.

2.1. DNS 서버에서 IP 주소를 찾는다.

URL 주소 중에 도메인 네임을 검색해서 해당 도메인 네임에 해당하는 IP주소를 찾아준다.

2.2. HTTP 통신

브라우저는 IP 주소로 HTTP 요청을 보낸다. 요청을 받은 서버는 해당 데이터를 사용하여 HTTP 응답 메시지를 생성하여 HTTP 응답을 보낸다.

3. 렌더링

렌더링 엔진이 HTML을 파싱하여 DOM 트리 생성

CSS 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리 생성

1, 2번을 결합하여 렌더 트리 구축

레이아웃 과정을 통해 어디에 배치할 지 결정

UI 백엔드에서 렌더트리를 화면에 그린다.(paint)

파싱(Parsing)

프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계

문서 파싱(document parsing)
- 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
- 렌더링 과정에서는 HTML 파일로 DOM 트리를 구축하고 CSS 파일로 CSSOM 트리를 만드는 것을 파싱한다고 표현한다.

DOM Tree

HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것
Document Object Model

CSSOM Tree

파싱 중 <link>, <style> 태그를 만났을 때 파싱을 멈추고 해당 리소스 파일을 서버로 요청, 리소스를 받아 파싱해 만든 트리를 CSSOM이라고 한다.
CSSOM 트리를 구축하고 나면 다시 html 파일의 파싱을 진행한다.

Render Tree

DOM Tree와 CSSOM Tree를 합쳐서 렌더 트리를 만든다.

(이를 Attachment)라고 한다.

보여지는 화면을 그리기 때문에 보이지 않는 요소들은 포함시키지 않는다.
<meta> 태그나 display:none 등의 태그나 요소는 제외한다.

레이아웃

렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정
이때 모든 값은 px 값으로 변환된다.

페인팅

브라우저가 레이아웃에서 결정된 대로 그림을 그리기 시작한다.
브라우저화면은 픽셀이라고 하는 점으로 구성되어 있는데, 이 픽셀들을 결정된 정보로 채워나가는 과정이 페인팅이다.

🔸 리플로우와 리페인트

웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트라고 한다.
DOM은 변경될 때마다 리플로우와 리페인트를 다시 하기때문에 각각 CPU와 GPU를 많이 차지해 프레임 드랍을 유발한다.
브라우저의 과부화로 인해 프레임 수가 줄어들면 렌더링 엔진이 인식할 수 없고, 이는 UX에 좋지 않기 때문에 최적화를 고려해야 한다.

최적화 방법

불필요한 레이아웃 줄이기

리플로우 시 리페인트는 필연적으로 일어나므로 리페인트만 발생하는 속성을 사용하는 것이 좋다.
리플로우가 일어나는 속성(위치, 너비와 관련된 속성들)
이 속성을 피해 transform의 translate를 사용하면 위치 이동이 가능하고 리페인트만 발생하기 때문에 프레임 수 유지를 기대할 수 있다.
리페인트가 일어나는 속성 : background, box-shadow, color …
리페인트가 일어나지 않게 해주는 opacity 속성도 있다. visibility/ display 보다 opacity가 성능 개선에 도움이 된다.

영향을 주는 노드 줄이기

JavaScript + CSS를 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄일 수 있다. fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요 없기 때문에 리페인트 연산 비용만 들일 수 있다.

Reyna

이전 포스트