[ Frontend ] 브라우저 렌더링 과정 과 동작 원리

주소창에 도메인을 입력했을때 일어나는 일

1. 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS 가 연결해줄 곳을 찾는다.
2. 서버에서 HTML 파일을 클라이언트로 보낸다.
3. HTML 문서는 파싱되어 DOM 을 생성한다. ( 객체 형식 ) 
4. 중간에 CSS 를 로드하는 Link 또는 Style 태그를 만나면 DOM 생성을 중지한다.
5. CSS 를 파싱하고 CSSOM 을 생성한다.
6. 이렇게 만들어진 CSSOM + DOM 은 렌더링을 위해 렌더 트리로 결합된다.
7. 만약 script 태그를 만나면, 파싱을 중단하고 JS 엔진을 실행해 JS 코드를 파싱한다.

브라우저 동작 원리 설명

브라우저의 기본 구조

• 사용자 인터페이스 : 사용자가 보여지는 인터페이스 부분 ( 주소 표시줄, 북마크 등 페이지 뷰 이외의 부분 )
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
• 렌더링 엔진 : HTML, CSS 를 파싱해 화면에 요청한 컨텐츠를 표시
• 통신 : HTTP 요청과 같은 네트워크 호출에 사용
• JS 엔진 : JS 코드를 해석하고, 실행
• UI 백엔드 : 기본적인 위젯 ( 콤보박스 ) 등을 그림
• 자료 저장소 : 자료를 저장하는 계층으로 쿠키, 웹 스토리지 등

브라우저 렌더링 과정

 

1. 불러오기

로더(Loader) 가 서버로부터 전달받은 리소스 스트림을 읽음

2. DOM / CSSOM 생성

웹 엔진의 HTML/XML 파서가 문서를 파싱해 DOM Tree 를, CSS 파서가 CSSOM 트리를 생성

3. 생성된 DOM 과 CSSOM 으로 렌더 트리 생성

Dom Tree + CSSOM Tree, 렌더링에 필요한 노드만 선택해 렌더링에 사용

4. CSS, Layout

렌더트리를 토대로 그려질 노드와 스타일, 크기를 계산

5. 그리기

렌더트리의 각 노드를 실제 픽셀로 변환, 실제로 그리기

 

리플로우, 리페인트

렌더링 과정을 모두 마친 후 브라우저에 페이지가 그려지는데, 레이아웃의 수치나, HTML 크기, 요소들의 위치등이 변하게 되면 다시 그려주는 과정인 Reflow 과정을 실행하게 된다.

이 때 각 요소들의 위치와 크기를 계산하는 것을 ReFlow, 그 요소들을 다시 그려주는 것을 Repaint 라고 한다.

리플로우

화면의 구조가 바뀌었을때 발생하며, 보통 요소들의 크기나 위치등을 다시 계산해주는 역할을 한다.

Reflow 가 일어나는 경우는 보통 다음과 같은 상황에서 발생한다.

• DOM노드의 추가, 제거
• DOM노드의 위치 변경
• DOM노드의 크기 변경
• CSS3 애니메이션과 트랜지션
• 폰트 변경, 텍스트 내용 변경
• 이미지 크기 변경
• offset, scrollTop, scrollLeft와 같은 계산된 스타일 정보 요청
• 페이지 초기 렌더링
• 윈도우 리사이징

리페인팅

화면의 구조가 변경되었을 때에는 Reflow 과정을 거쳐 화면 구조를 다시 계산한 후 Repaint 과정을 통해 화면을 다시 그린다. 즉 화면의 구조가 변경되었을 때에는 Reflow와 Repaint 모두 발생한다.

화면의 구조가 변경되지 않는 화면 변화는 Repaint 만 발생한다.

opacity, background-color, visibility, outline 등의 스타일 변경 시에는 Repaint만 동작한다.

Reference

• [Velog] 브라우저 렌더링 순서와 원리
• [Velog] 주소창에 google.com 을 입력했을때 일어나는 과정
• [Velog] 웹 브라우저의 동작원리를 알아보자