[FE] 브라우저 렌더링

브라우저

사용자가 선택한 자원을 서버에게 요청했을 때 해당 자원이 표시되는 장소

이때 자원은 HTML문서, PDF, 이미지 등 다양한 형태 가능

자원의 주소는 URL에 의해 정해짐

브라우저의 주요 엔진

• 렌더링 엔진
  사용자가 보게되는 화면을 보여주는 역할
  => HTML과 CSS를 파싱하여 최종적으로 화면에 그려줌
• 자바스크립트 엔진
  자바스크립트 코드를 읽어서 기능을 작동시키는 역할

해당 엔진들을 이용해서 서버로부터 파일을 받아 브라우저에 시각적으로 출력하는 과정이 렌더링

브라우저 렌더링 과정

HTML 파싱과 DOM 생성

브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트

=> 그렇다면 브라우저가 읽을 수 없을텐데...?

 

브라우저가 읽을 수 있도록 하기 위해서 HTML문서를 파싱을 통해 DOM을 생성

파싱

프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트의 문자열을 분해하고 구조를 생성하는 일련의 과정

Document Object Model

HTML 요소를 JavaScript Object처럼 조작할 수 있는 Model

HTML 문서를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조

=> 트리 자료구조이기 때문에 노드들의 계층구조로 이루어져 있음

CSS 파싱과 CSSOM 생성

렌더링 엔진은 처음부터 한 줄씩 순차적으로 파싱하며 DOM을 생성

이때, 중간에 CSS를 로드하는 link 또는 style 태그를 만나면 DOM 생성을 일시 중단

 

그 후 CSS 파일을 서버에 요청하고 응답받은 CSS 파일 또한 파싱 과정을 거침

=> HTML과 다르게 CSS를 파싱하면 CSSOM이 생성

CSSOM은 DOM이 어떻게 화면에 표시될 지를 알려주는 역할

 

CSS 파싱이 완료되면 HTML 파싱이 중단된 시점으로 돌아가서 다시 HTML을 파싱

자바스크립트 파싱과 실행

DOM은 HTML의 구조 및 정보 뿐만 아니라 HTML 요소를 제어할 수 있는 DOM API(명령들의 집합)를 함께 제공

=> DOM API를 이용해서 이미 생성된 DOM을 동적으로 동작 가능

 

렌더링 엔진이 파싱을 하던 중 script 태그를 만나면 자바스크립트 파싱이 발생

단 DOM과 CSSOM은 모두 렌더링 엔진이 만들었다면 자바스크립트 코드 파싱은 자바스크립트 엔진이 진행

=> 자바스크립트 엔진에게 제어권이 넘어가는 상황, blocking이 일어났다고도 함

 

자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 제어권이 넘어가고

HTML 파싱이 중단된 시점부터 다시 DOM 생성을 재개

Render Tree 생성

생성된 DOM과 CSSOM은 Render Tree로 결합

렌더 트리는 브라우저 화면에 보여지지 않는 것들은 포함하지 않음

즉, 브라우저 화면에 렌더링 되는 노드만으로 구성된다는 의미

=> meta 태그, display: none 같이 보이지 않는 것들은 포함되지 않음

 

렌더 트리는 HTML 요소의 레이아웃을 계산하는데 사용되며,

브라우저 화면에 픽셀을 렌더링 하는 페인팅 처리에 해당 정보가 입력 됨

Layout

뷰포트 내에서 요소들의 정확한 위치와 크기를 계산하는 과정

박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백, 그리고 이외의 스타일 속성이 계산

=> CSS에서 %, em 같은 상대적인 단위를 사용 한 경우 뷰포트에 맞게 픽셀 단위로 변환

Paint

Layout 과정에서 렌더링 엔진이 각 요소의 위치와 크기를 알게 된 뒤 진행

렌더 트리에 포함된 요소들이나 텍스트, 이미지들이 실제 픽셀로 그려지도록 변환하는 과정

Composition

크롬의 경우 Layout 과정 이후에 브라우저가 레이어를 생성

해당 레이어들은 트리 형태로 구성

렌더링 엔진이 각 레이어를 프린팅 과정에서 각각 그려준 다음 하나의 비트맵으로 합성해서 페이지를 완성

렌더링은 한 번만 실행되면 끝인가요?

1. 자바스크립트에 의해 노드가 추가 또는 삭제되는 경우
2. 브라우저 창 리사이징에 의한 뷰포트 크기가 변경되는 경우
3. HTML 요소의 레이아웃에 변경을 발생시키는 width, heighth 등의 스타일이 변경되는 경우

위의 경우 레이아웃 계산과 페인팅이 재차 실행되고 이를 리렌더링이라고 함

 

배경 이미지나 텍스트 색상 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어나면 Paint 과정만 다시 실행하는 Repaint,

요소의 크기나 위치, 브라우저 창의 크기까지 바뀐다면 Layout 과정부터 다시 실행하는 Reflow가 발생함

디테일한 내용은 요기서 => reflow / repaint

 

리렌더링은 실행 될 때마다 파일을 다시 읽어야 하므로 성능에 악영향을 미침 => 성능 최적화...!

따라서 리렌더링이 자주 일어나지 않도록 주의해야 함

---

DOM Property DOM 객체의 멤버 변수, HTML 태그의 속성을 반영

DOM method DOM 객체의 멤버 함수, HTML 태그를 제어

비트맵 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷 또는 메모리 저장 방식의 한 형태