브라우저 렌더링
브라우저 주소 창에 구글, 네이버 등의 홈페이지 사이트 주소를 입력하면 어떤 과정이 일어날까?
브라우저
인터넷 익스플로러, 파이어폭스, 크롬, 사파리, 오페라 등 인터넷 접속을 위해 사용하는 프로그램을 의미한다. 브라우저 마다 렌더링 엔진을 포함하고 있다.
브라우저 렌더링
웹 사이트에 필요한 HTML, CSS, Javascript 등이 브라우저에 출력에 필요한 리소스를 서버로 부터 다운 받은 후 출력하는 것을 브라우저 렌더링이라고 한다.
웹 브라우저 구성요소
- User Interface (사용자 인터페이스)
- 웹 페이지를 제외한 사용자 인터페이스
이전, 다음, 새로고침 버튼, 브라우저 검색창 등 브라우저의 UI
- Browser Engine (브라우저 엔진)
- 사용자 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
- Rendering Engine (렌더링 엔진)
- 사용자가 요청한 페이지의 HTML과 CSS를 파싱하여 웹 페이지를 표시해주는 렌더링 엔진
- Networking (통신)
- 다양한 네트워크 요청을 수행하는 네트워킹(통신)
- Javascript Interpreter (자바스크립트 엔진)
- 자바스크립트 코드를 해석, 실행해주는 인터프리터
- UI Backend (UI 백엔드)
- input(체크박스나 버튼), select 같은 기본 위젯을 그려주는 UI 백엔드
- Data Persistence (데이터 저장소)
- 쿠키, 로컬스토리지 등 보조 기억 장치에 데이터를 저장해주는 저장소
렌더링 엔진
렌더링 엔진은 사용자가 요청한 웹 페이지를 구성하는 요소인
HTML, CSS, Javascript 등 모든 요소를 화면에 보여준다.
브라우저마다 사용하는 렌더링 엔진이 다르다.
대표적인 브라우저들이 사용하는 렌더링 엔진을 살펴보면 다음과 같다.
| 브라우저 | 렌더링 엔진 |
|---|---|
| 파이어폭스 | 게코(Gecko) |
| 사파리 | 웹킷(Webkit) |
| 크롬 | 블링크(Blink) |
| 오페라 | 블링크(Blink) |
| 인터넷 익스플로러 (윈도우용) | 트라이던트(Trident) |
| 인터넷 익스플로러 (맥용) | 태즈먼(Tasman) |
브라우저 렌더링 엔진 동작 과정
HTML과 CSS는 각각 parser가 있다.
웹 브라우저가 페이지를 렌더링 하기 위해서는 HTML은 DOM, CSS는 CSSOM 트리를 생성해야 한다.
사용자가 요청한 것을 화면에 출력하기 위한 과정이다.
렌더링 엔진 마다 동작 과정에 조금씩 차이가 있을 수도 있다.
위 이미지는 웹킷 엔진의 동작 과정이다.
Critical Rendering Path
브라우저가 화면을 그려내는 과정을 의미한다.
이 과정의 시간을 줄이면 브라우저가 웹 페이지를 보여주는데 걸리는 시간을 줄일 수 있다.
- HTML 파싱
- 사용자가 주소창에 URL을 입력하면 서버로부터 해당 웹 사이트에 필요한 HTML 문서를 받아 불러오고 파싱하게 된다.
- DOM 트리 생성
- 바이트를 문자로 변환 > 토큰 식별 > 토큰을 노드로 변환 > DOM 트리 생성
DOM Tree : 각 노드가 연관성을 가질 수 있도록 트리를 구성한 것.
- CSSOM 트리 생성
- HTML이 DOM tree를 만드는 것과 비슷하게 CSS도 CSSOM이라는 트리를 생성한다.
- CSSOM은 DOM이 어떻게 화면에 표시될지 알려주는 역할을 한다.
- Javascript 실행
- Render 트리 배치
- 렌더링 엔진이 DOM tree와 CSSOM tree를 합쳐 만든 것이 Render tree
- Render tree는 화면에 표시되야 할 모든 노드의 컨텐츠와 스타일 정보를 포함한다.
- display : none 이나 meta 태그는 포함되지 않는다.
- 레이아웃 생성 (Reflow)
- 요소들의 정확한 위치와 표기를 계산하는 과정이다.
- 텍스트, 박스 등의 요소가 화면에서 차지하는 영역, 여백, 스타일 속성이 계산된다.
- %, em 등의 상대적인 단위가 사용된 경우에는 뷰포트에 맞춰 픽셀단위로 변환된다.
- 페인팅 (repaint)
- 렌더링 엔진이 위 모든 과정을 거치고 나면 화면에 실제 픽셀로 출력하는 과정이다.
- 레이어 합성 (Composite)
- 페인팅 단계에서 생성된 레이어를 합성하는 과정이다.
- 이 단계에서 모든 레이어를 하나의 레이어로 결합하여 화면에 표시한다.
자바스크립트의 실행으로 css가 변경되거나, 애니메이션 재생이 일어난다면?
- 레이아웃부터 재발생되는 경우
- 요소의 크기나 위치가 바뀔 때, 브라우저 창 크기 변경 등 그림의 순서에 따라 레이아웃부터 재발생 된다.
- 레이아웃 수치를 다시 계산하여 배치를 하는 과정과 리페인트 과정과 레이어 합성 과정이 일어난다.
- 페인트부터 재발생되는 경우
- 그림자, 텍스트 색상, 배경 이미지 등 레이아웃의 수치를 변화시키지는 않는 스타일 변경이 발생했을 때 페인트부터 재발생 된다. (레이아웃 부터 재발생 하는 것 보다는 성능상으로 낫다.)
- 레이어 합성만 재발생하는 경우
- 레이어 합성만 발생하기 때문에 레이아웃이나 페인트부터 재발생되는 것 보다 성능상으로 가장 좋다.
CSS 속성이 변경되었을 때 위 3가지 경우 중 어떤 것부터 재발생되는지 확인하기
관련문서
브라우저는 어떻게 동작하는가?
렌더링 엔진 동작 과정
Critical Rendering Path
브라우저 렌더링 10분 테코톡
