브라우저란?

브라우저란 사용자들이 웹서버에 요청하고 응답을 받아 브라우저에 보여주는 프로그램이며 사파리, 크롬, 파이어 폭스가 이에 해당한다.

브라우저 구조

1. 사용자 인터페이스(UI)
웹 페이지를 제외하고 사용자가 상호작용 가능한 영역으로 검색창, 새로고침, 뒤로가기 등이 존재
2. 브라우저 엔진(Browser Engine)
사용자 인터페이스(UI)와 렌더링 엔진 사이에서 동작을 제어
3. 렌더링 엔진(Rendering Engine)
HTML과 CSS를 해석하여 출력 가능하도록 만드는 엔진
Safari -> Webkit
Firefox -> Gecko
Chrome -> Blink
4. 통신(Networking)
말그대로 네트워크 호출용
5. 자바스크립트 인터페이스(Javascript Interpreter)
자바스크립트 코드를 해석하고 실행하는 엔진
6. UI Backend
기본적인 위젯 인터페이스 체크박스 혹은 버튼이 존재
7. 자료 저장소(Data Storage)
Cookie, Local Storage, Session Storage와 같이 보조기억장치에 데이터가 저장되는 저장소

브라우저 렌더링

1. DOM 트리 생성

사용자가 요청한 코드를 파싱하여 고유 토큰 -> 노드객체의 변경 과정을 거쳐 DOM 트리 생성

2. 스타일 규칙 생성

DOM 트리와 마찬가지로 CSS를 트리로 생성하는데 DOM이 화면에 출력되는 규칙을 생성하는데 이를 CSSOM 트리라고 한다.

3. Render 트리 생성

DOM 트리와 CSSOM 트리를 합쳐 Render 트리를 생성한다. 브라우저 마다 다른 부분이 있다.
Render트리 -> 화면에 출력되어야 할 노드의 콘텐츠와 스타일 정보를 포함하는 트리

4. 레이아웃(리폴로우)

콘텐츠 및 요소의 출력될 위치 및 크기를 계산하는 단계

5. 페인트(리페인트)

화면에 출력되는 단계

UI가 업데이트 되는 상황

1. 레이아웃부터 다시 발생(리폴로우)

요소의 크기나 브라우저의 크기가 변경되었을 시 발생 요소의 크기를 다시 계산해야 하는 상황에 발생

2. 페인트 부터 다시 발생(리페인트)

레이아웃의 수치가 변화되지 않는 스타일의 변경 시 발생

3. 레이어의 합성만 다시 발생(Composite)

transform 또는 opacity 변경에 의해 발생

웹 페이지의 로딩 시간을 줄이기 위해서는 뭘 해야할까?

Critical Rendering Path(CRP)를 최적화 해야함

CRP 최적화 방법

• 주요 리소스 수
  • 리소스가 적을수록 브라우저, CPU 및 기타 작업이 감소
• 주요 경로 길이
  • 리소스가 클수록 다운로드 시 왕복 수가 증가
• 주요 바이트 수

최적화 단계

주요 경로 분석 및 파악 -> 주요 리소스 제거 혹은 다운로드 연기, 비동기로 하는 등의 리소스 수 최소화 -> 주요 바이트 수 최적화하여 다운로드 시간 단축 -> 나머지 주요 리소스가 로드되는 순서 최적화