reflow, repaint (랜더 트리, reflow, reflow를 줄이는 예)

 

브라우저의 이해 #1 Reflow, Repaint에 대하여 알아봅니다.

폴시랩

[브라우저의 랜더링 과정을 이해하고 reflow와 repaint를 줄여서 성능을 높이자. 불필요한 성능 저하를 줄이자]

 

1. 브라우저의 랜더링 과정

DOM 트리와 스타일 규칙을 합쳐서 랜더 트리를 생성.

reflow: 배치. 레이아웃을 위치시킴

랜더 트리: display none의 경우 DOM에는 존재하지만, 시각적으로는 존재하지 않기 때문에 랜더 트리에 할당되진 않는다.

position이 absolute,fixed 의 경우 DOM 트리와 다른 위치의 랜더 트리에 할당

 

랜더트리가 탐색되고 paint 메서드가 호출되어 UI 기반의 구성요소를 사용해서 그린다고 함.

=> 여기서 수정사항이 생기면 repaint 호출

 

CSS2 기준으로 그려지는 순서는 배경색 > 배경 이미지 > 테두리 > 자식 > 아웃라인이라고 함.

 

2. Reflow

reflow: 최초로 실행된 이후에, 레이아웃에 영향을 주는 변화가 생기면 다시 랜더트리를 구성하는데 그것을 reflow라고 한다고 함.

 

아래 예시는 reflow를 줄이는 예시인데, 엘리먼트 호출을 줄이는 것이 핵심인듯 하다.

 (1) 가상의 형태로 추가할 엘리먼트를 구성한다

 (2) 한번에 수정한다.

 

예시1

// 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;';

예시2

// bad
const ulElement = document.getElementsByTagName('ul')[0];
for(let i=0; i<10; i++) {
  ulElement.innerHTML += `<li> list${i} </li>`;
}
 
// good
const ulElement = document.getElementsByTagName('ul')[0];
let strHtml = ulElement.innerHTML;
for(let i=0; i<10; i++) {
  strHtml += `<li> list${i} </li>`;
}
ulElement.innerHTML = strHtml;

 

3. Repaint

 reflow가 발생하면 repaint가 발생한다. 하지만 모든 경우가 그렇지 않고 reflow가 발생하지 않았지만 repaint만 발생하는 경우가 있다. reflow의 경우 포지션에 대한 변화때문에 일부나 전체를 다시 구성하고 나서 그리는 반면, 레이아웃에 영향을 주지 않는 엘리먼트 개별 변화에 대해서는 reflow 없이 repaint만 발생.(예: color, background-color)등