브라우저의 Reflow, Repaint

Rae-eun Yang·2022년 6월 27일

Render Tree

Reflow와 Repaint의 개념을 알기 전에, 렌더 트리(Render Tree)에 대한 이해가 필요합니다.

브라우저는 HTML, StyleSheets를 해석합니다.
HTML 문서의 해석이 끝나면 ‘DOM 트리’를 만들고, StyleSheets 문서의 해석이 끝나면 ‘스타일 규칙’을 만듭니다.

위에서 만들어진 ‘DOM 트리’와 ‘스타일 규칙’을 합쳐서 ‘렌더 트리’를 만듭니다. 여기에서 reflow(배치)가 호출되어서 각각의 요소들의 레이아웃을 위치 시킵니다.

Reflow

Reflow는 브라우저가 웹페이지를 해석할 때 최초에 한번 실행이 됩니다.
이후에 요소들의 레이아웃에 영향을 주는 변화가 생기면 렌더 트리를 재구성하는 작업이 필요하게 되는데 그것을 Reflow라고 합니다.

Reflow가 일어나는 상황을 생각해보면, 새로운 요소(=엘리먼트=노드)가 추가되거나 또는 요소가 지워지거나, 요소의 위치가 변경되거나 크기가 변경되는 경우, 또는 만약 위치값이나 크기값이 상대값인 경우에는 브라우저(윈도우)의 크기가 변경될때도 발생한다고 짐작할 수 있습니다.

참고로 Reflow가 발생하면 Repaint도 발생합니다.

ex. width가 변경되는 경우

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

cssText로 Reflow가 한번만 실행되도록 함으로써 Reflow를 줄인다.

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