what is Reflow, Repaint ?

브라우저 렌더링 요소 중 Reflow, Repaint란?

---

먼저 브라우저란 무엇인지 알아보겠습니다.
브라우저의 일 : 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 나타내주는 것.

브라우저의 규칙 : W3C 웹 표준화 기준의 명세.

브라우저의 기본 요소:

1. 사용자 인터페이스 : URI 입력창 . 이전,다음 버튼, 북마크, 새로고침 버튼, 정지버튼, 홈버튼

2. 브라우저 엔진 

3. 렌더링 엔진 

4. 통신

5. UI 백앤드

6. 자바스크립트 해석기

7. 자료 저장소

---

브라우저의 기본 요소 중 렌더링 엔진에 대해 알아보겠습니다.
렌더링 엔진에서 일어나는 일은 ?

요청 받은 내용을 브라우저 화면에 표시하는 일입니다.
일의 순서는 아래와 같습니다.

HTML파싱  ⇢  CSSOM & 돔트리 구축 ⇢ 렌더트리 구축 ⇢ 렌더트리 배치 ⇢ 렌더 트리 그리기

 

렌더트리 구축 : 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.

렌더트리 배치 : 각 객체의 정확한 위치 및 크기를 계산합니다.

* 렌더링 엔진은 더 빨리 화면을 구성하기 위해, 모든 HTML을 파싱하기 전에 배치와 그리기를 시작합니다.

그리는 순서: 배경색 > 배경이미지 > 테두리 > 자식 > 아웃라인

 

렌더링 엔진에는 웹킷(크롬,사파리) 게코(파이어폭스,모질라)가 있습니다.

둘의 차이는 매우 적습니다. 거의 비슷하다고 보시면 됩니다. 출처

---

Reflow란:

렌더트리에서 요소를 배치하는 것을 게코에선 'Reflow'라고 부릅니다. 웹킷에서는 'layout'이라고 부릅니다.

최초 실행될 때 Reflow가 발생합니다.

예) %, vh, vw, - viewport가 달라질 경우 매번 계산을 다시 해야 합니다.

그리고, 레이아웃이 바뀔때 (윈도우 리사이징, 새로운 노드가 추가, 삭제, 요소의 위치, 크기 변경) Reflow가 발생합니다. x 100
예) position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align, white-space ...

 

Repaint란: 

레이아웃, 포지션에 대한 변화가 아닌, 개별 변화를 렌더하는 것을 말합니다.

레이아웃 변화가 없을 때에는 Repaint만 실행하게 됩니다.

예) color, background-color, background, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibility...

---

Reflow, Repatin 줄이기 -> 성능 최적화:

이렇게 브라우저는 HTML의 CSS가 바뀔 때마다 혹은 Reflow,Repaint 과정을 거치게 됩니다.x 100

CSS 코드를 줄여 성능 최적화를 할 수 있습니다. 출처

 

방법 1. reflow가 일어나지 않는 css 속성을 사용합니다. 출처

예1) 사용하지 않는 노드에는 visibilty: invisible 보다 display: none을 사용하기. 

예2) left,top,right,bottom보다 transform 사용하기.

예3) visible/display보다 opacity사용하기.

 

방법 2. JS에 CSS등록 시, CSS속성을 되도록 하나로 줄여 reflow해야하는 코드줄을 줄여줍니다. 

  // bad
  const body = document.body;
  body.style.width = '50px';
  body.style.height = '100px';

  // good
  const body = document.body;
  body.style.cssText = 'width: 50px; heigh: 100px;';

출처

 

방법 3. 영향을 주는 노드 줄입니다.

예1) 에니메이션이 많거나 레이아웃 변화가 많은 경우 position- fixed, absolute를 이용하여 주변 노드가 영향받지 않도록 합니다.

 

방법4. 프레임을 줄입니다.

0.1초에 1px씩 움직이는 에니메이션보다는, 0.1초에 3px씩 움직이는 에니메이션으로 적용할 경우,

부드러운 효과는 조금 포기하지만, 성능은 개선할 수 있습니다.