웹 브라우저 기본 구조
1) 사용자 인터페이스
한 화면에서 사용자가 요청한 페이지를 보여주는 창 이외에 컨트롤 할 수 있는 부분
ex) 주소 표시줄, 이전/다음 버튼, 새로고침, 북마크 등
2) 브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이에서 동작 제어
- 사용자 인터페이스로 부터 받은 명령(URI)을 렌더링 엔진에게 전달
- 사용자 인터페이스로 부터 받은 명령(URI)이 자료 저장소에 있는지 확인(쿠키로 저장) → 해당 명령이 자료 저장소에 존재한다면, 자료를 렌더링 엔진에게 전달하여 불필요한 메서드 통신 방지
- 매 사용자 인터페이스 요청마다 HTTP 메서드 요청을 한다면 똑같은 요청에도 불필요하게 HTTP 통신 해야하는 문제 발생
- 자주 받아오는 데이터들을 자료 저장소에 넣어서 필요할 때 마다 사용
3) 렌더링 엔진
요청한 URI를 브라우저 엔진에게 받아와 서버에게 요청 → 통신
서버로 부터 받아온 데이터(HTML, CSS, JS)를 파싱한 후 렌더링
4) 통신
렌더링 엔진으로부터 받은 HTTP 요청을 받아 네트워크 처리 후 응답 값 전달
5) 자바스크립트 해석기
자바스크립트를 파싱 ex) chrome V8
6) UI 백엔드
render tree를 브라우저에 그리는 역할 담당
예시) 유튜브 검색 했을 경우
① 사용자 인터페이스에 URI 입력
② 브라우저 엔진으로 URI 전달
- 자료 저장소에 해당 URI가 있는지 확인 → 없다고 가정!
- 해당 URI를 렌더링 엔진에게 전달
③ 렌더링 엔진은 해당 URI를 서버에게 요청
④ 네트워크 처리 후 렌더링 엔진으로 응답값(HTML, CSS, JS) 전달
⑤ 렌더링 엔진에서 HTML, CSS 파싱하고, 자바스크립트 해석기를 통해 JS 파싱
- JS 해석기를 통해 파싱한 결과를 렌더링 엔진에게 전달하여 파싱한 HTML 결과의 DOM 트리를 조작
- HTML에게 동적인 움직임 부여
⑥ DOM 트리 조작이 완료되면, render object(render tree 구성요소)로 변함
⑦ UI 백엔드는 render object를 브라우저 렌더링 화면에 띄워줌
렌더링 엔진 동작 과정
1. 서버로 부터 받아온 HTML 파싱 후 DOM 트리 생성
- DOM으로 바꾼 HTML은 JS가 조작 가능
- Tag의 파싱과 실행을 동시에 진행
- 이때, (HTML5에 이를 보완하기 위한 추가된 기능 존재)
- defer 속성: 페이지 파싱 모두 끝난 후 스크립트 실행
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div>
<img
src="https://cdn.pixabay.com/photo/2015/06/19/21/24/avenue-815297_1280.jpg"
alt="img"
/>
<p>이미지</p>
</div>
<script src="main.js"></script>
</body>
</html>
2. CSS 파싱 후 CSSOM 트리 생성
html,
body {
min-height: 100vh;
padding: 20px;
}
h1 {
color: red;
font-size: 36px;
text-align: center;
font-weight: 800;
}
div {
width: 500px;
border: 2px solid red;
}
div img {
width: 100%;
}
div p {
font-size: 20px;
text-align: center;
color: green;
}
3. Render Tree 생성
DOM 트리 + CSSOM 트리 → Attachment 과정(render object 생성)
- 모든 DOM 노드를 렌더 객체로 생성하지 않음 →
display: none등 <html>,<body>는 렌더 트리 root로써 render view라고 부른다.- 나머지 DOM node들은 render object로 생성되어 render tree root에 추가된다.
4. 레이아웃(리플로우)
Render Tree 배치
<html>부터 시작하여 위부터 하나씩 DOM node 그림<head>안에 있는 viewport 관련 meta 태그 내용 기준으로 각 HTML 요소들의 위치와 크기 계산- 요소의 크기, 좌표 등 정보를 담은 레이아웃 트리 생성
💡 레이아웃에 영향을 주는 css 속성
position, left, top, right, bottom, width, height, margin, padding, border, border-width, display, float, overflow, font-family, font-size, font-weight, text-align, vertical-align,…
5. 페인트(리페인트)
Render Tree 그리기
- 모든 시각적인 요소를 그리는 순서(border, 순서, color 등등)
💡 페인트에 영향을 주는 css 속성
background, box-shadow, border-radius, border-style, color, outline, text-decoration
6. Composite(합성)
- 페인트 단계에서 만들어 둔 여러 가지 레이어를 스크린에 픽셀로 나타냄
- 여러 가지 레이어를 하나로 합쳐 페이지 완성
⭐️ UI가 업데이트되는 3가지 상황
-
레이아웃이 다시 발생하는 경우
주로 요소의 크기나 위치가 바뀔 때, 브라우저 창의 크기가 바뀌었을 때 다시 발생
-
페인트부터 다시 발생되는 경우
주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃 수치를 변화시키지 않는 스타일 변경이 일어났을 때
→ 성능상으로 이점이 있음
-
레이어 합성만 다시 발생하는 경우
Layout과 Paint을 수행하지 않고 레이어의 합성만 발생
→ 성능상으로 가장 큰 이점 가짐
- transform, opacity는 리플로우와 리페인트 생략 가능
⇒ 렌더링 엔진마다 css 별로 업데이트 되는 시작점이 다름!
CSS Triggers List - What Kind of Changes You Can Make
참고 자료
Browser rendering process 1편 - Browser 구성 요소
