브라우저 렌더링 과정을 보면서 성능 최적화를 해보자

브라우저 렌더링 과정에서 Repaint와 Reflow의 차이점을 통해 성능최적화가 가능하다는 점을 알고 있었지만
이에 대해서 정확하게 알고 있지 않았다.

이번 포스팅에서는 브라우저 렌더링 과정을 보고, 왜 Reflow와 Repaint의 차이를 중요시 해야하는지 알아보겠다.

 

웹 브라우저의 구조

 

User Interface: 주소표시줄, 이전.다음.새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용하는 인터페이스

Browser Engine: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진

Rendering Engine: HTML과 CSS파싱하여 요청한 웹페이지를 표시하는 렌더링 엔진

 

Networking : 각종 네트워크 요청을 수행하는 네트워킹 파트

UI Backend : 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트

Jacascript Interpreter : 자바스크립트 코드를 실행하는 인터프리터

DataPersistance : localStorage나 cookie와 같이 보조 기억장치에 데이터를 저장하는 파트

 

여기서 우리는 렌더링 엔진(Rendering Engine)을 중점으로 보려고 한다.

 

 

웹브라우저마다 렌더링 엔진이 다르다.

사파리는 웹킷

파이어폭스는 Gecko

크롬은 Blink

 

 

렌더링 엔진의 목표 2가지

1. HTML,CSS, JS, 이미지등 웹페이지에 포함된 모든 요소들을 화면에 보여

2. 업데이트가 필요할 때 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다.

-> 업데이트에는 사용자 동작으로 인한 입력, 스크롤, 애니메이션 동작, 비동기 요청으로 인한 데이터 로딩 등이 있다.

 

 

렌더링 엔진의 동작 과정(Critical Rendering Path)

 

1. DOM Tree 생성

DOM 트리는 완전하게 파싱된 HTML 페이지의 Object 표현이다.

 

먼저 HTML 코드는 어휘분석을 통해서 HTML5표준에 지정된 고유한 토큰으로 변한다.

그리고 브라우저 렉싱 과정을 통해 토큰이 해당 속성과 규칙을 정의하는 노드 객체로 변환된다.

 

그리고 각 노드가 서로 연관성을 가질 수 있도록 트리를 생성하는데 이것이 바로 DOM 트리다.

HTML은 부분적으로 실행될 수 있으며, 페이지에 내용이 표시되기 위해 문서 전체를 로드할 필요가 없다.

CSS와 JavaScript는 페이지의 렌더링을 차단할 수 있다.

 

2. CSSOM Tree 생성

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

HTML과 다르게 완전히 파싱되어야 사용할 수 있다,

 

 

3. 자바스크립트 실행

JavaScript 파일을 만나면 해당 파일을 받아와서 실행할 때까지 파싱이 멈춘다. 

따라서 문서 내의 요소를 참조하는 JavaScript 파일이 있는 경우 해당 문서가 표시된 후에 배치해야 한다.

 

4. 렌더링 엔진이 DOM Tree와 CSSOM  Tree 합쳐서 만드는 Render Tree

 Render Tree는 화면에 표시되어야할 모든 노드의 컨텐츠, 스타일 정보를 포함하고 있는 트리다.

document 객체부터 각 노드를 순회하면서 

각각의 노드에 맞는 CSSOM을 찾아서 규칙을 적용한다.

그러면서 렌더와 관련된 요소들을 Render Tree에 포합시킨다.

이때 meta태그나 display: none; 으로 숨겨진 요소는 포함되지 않는다.

 

 

5. Layout (Reflow)

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

박스 모델에 따라서 텍스트나 요소의 박스가 화면에서 차지하는 영역이나 여백,

그리고 이외의  스타일 속성이 계산된다.

 

이때 CSS에서 %나 em 같은 상대적인 단위를 사용했을 때는 뷰포트에 맞춰서 픽셀단위로 변환된다.

 

 

6. Paint

이제 표시되는 노드와 해당 노드의 스타일 및 기하학적 형태를 파악했으므로

렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환한다.

텍스트, 색, 이미지, 그림자 등 요소의 모든 시각적 부분을 그리는 작업을 포함한다.

 

 

7. Composite

페인트 단계에서 생성된 레이어를 합성하여 스크린을 업데이트한다.

합성과 렌더 단계가 끝나면 화면에서 웹 페이지를 볼 수 있다.

 

 

여기까지 Critical Rendering Path에 대한 설명이었다.

 

그럼 사용자의 동작으로 인해서 자바스크립트가 실행되어 CSS가 변경되거나 애니메이션 재생이 일어나면 어떻게 될까?

 

이때 크게 3가지 경우로 동작한다.

 

1. 다시 Layout (Reflow)과정이 발생하는 경우

- 요소의 크기나 위치가 바뀔 때 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생

브라우저 로딩 과정 중 스타일 이후의 과정(스타일 -> 레이아웃 -> 페인트 -> 합성)을 렌더링이라고 하는데, 이 렌더링 과정은 상황에 따라 반복하여 발생할 수 있다.
스타일 단계에서 구성되는 렌더 트리는 자바스크립트에 의해 DOM 트리, CSSOM 트리가 변경될 때 다시 재구성된다. DOM이 추가/삭제되거나 요소에 기하적인 영향(높이, 넓이, 위치)을 주는 CSS 속성값을 변경하는 경우, 렌더 트리가 다시 재구성된다.
즉, 레이아웃부터 이후 과정을 다시 수행하며 이것을 레이아웃이라고 한다(또는 리플로우라고도 한다).

2. Paint 과정부터 다시 발생되는 경우(RePaint)

- 주로 배경이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을때 발생

- 이와 같은경우 레이아웃 과정이 발생하지 않기 떄문에 성능상으로 이점을 가진다.

레이아웃은 요소에 기하적인 영향을 주는 CSS 속성값을 변경할 때 발생한다고 하였는데,반대로 영향을 주지 않는 CSS 속성값을 변경하면 레이아웃 과정을 건너뛴다. 페인트부터 수행하며 이를 리페인트라고 한다.

3. 레이어의 합성만 다시 발생하는 경우

- 레이어란 Paint할 영역을 나누어 놓은 것을 의미

- 크롬의 경우 레이아웃 과정 이후에 정해진 기준이나 필요에 의해서 브라우저가 레이어를 생성

- 그리고 렌더 트리에 있는 노드 객체들은 생성된 레이어에 포함된다.

- 레이어는 트리형태로 구성

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

- transforms이나 opacity, filter와 같이, 이미 렌더링된 요소의 시각적 모습만 변경하는 경우입니다.

 

이때 레이아웃과 페인트 과정을 수행하지 않으니 성능상으로 가장 큰 이점을 가진다.

 

 

브라우저의 렌더링 과정에 대해 알면 최적화에 대해서도 쉽게 이해할 수있다.

 

1. Layout(Reflow)가 발생하는 경우

const example = document.getElementById('example');

example.style.width = '400px';

요소에 기하적인 영향을 주는 CSS 속성값 변경

• CSS 속성값 : height, width, left, top, font-size, line-height 등

Layout 발생

- Layout과 Paint 과정이 다시 발생하는 모습이다.

 

2. 리페인트가 발생하는 경우(Paint과정)

요소에 기하적인 영향을 주지 않는 CSS 속성값 변경

• CSS 속성값 : background-color, color, visibility, text-decoration 등

const sample = document.getElementById('example');

example.style.backgroundColor = 'blue';

• 리페인트 발생

참고 : 레이아웃과 리페인트를 발생시키는 CSS 속성 목록

 

 

 

성능최적화 예

왼쪽으로 요소가 계속 움직이는 애니메이션을 만들고 있다고 가정하다.

 

1. left속성을 변경하는 애니메이션

 - 레이아웃 과정이 다시 발생한다

 - 즉 Layout - Paint - Composite 과정이 발생한다.

 - 성능상으로 좋지 않음

 

2. transform 속성을 변경하는 애니메이션

- transform은 Composite 과정만 발생하는 속성

- paint 과정 없이도 애니메이션이 업데이트 된다,

 

 

즉 style  속성을 left 말고 transform을 이용해서 좀 더 부드러운 애니메이션이 재생되게끔 성능 최적화를 할 수 있다.

 

 

 

성능 최적화에 관련해서는 아래 링크로 더 자세히알아보자

https://ui.toast.com/fe-guide/ko_PERFORMANCE#%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%EC%97%90-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EB%A1%A0%EA%B3%BC-%EC%B8%A1%EC%A0%95-%EB%8F%84%EA%B5%AC

성능 최적화

 

 

참고 링크

https://velog.io/@mu1616/Critical-Rendering-Path

Critical Rendering Path

https://wonism.github.io/critical-rendering-path/

WONISM's Blog

https://www.youtube.com/watch?v=sJ14cWjrNis&t=14s