Reflow와 Repaint

브라우저가 페이지를 그리는 과정

브라우저가 웹 페이지를 그리는 과정

브라우저가 웹 페이지를 그리는 과정

  1. HTML 파일에서 DOM 노드를 만들고 DOM 트리를 구성한다.
  2. CSS 파일에서 얻어낸 규칙으로 CSSOM을 만든다
  3. DOM 트리의 루트부터 시작해 visible한 DOM 노드에 대해 computed style을 계산하여 렌더 트리를 만든다.
  4. 레이아웃(크기와 위치 값)을 결정한다.
  5. 각 픽셀을 그린다.

웹 페이지가 모두 그려진 다음 항상 고정으로 있는 것은 아니다. JavaScript 코드로 스타일을 변경하거나, 사용자가 브라우저 창 크기를 변경시키는 등의 일이 일어나면 웹 브라우저는 문서를 새롭게 렌더링해야 한다. 이때 일어나는 재렌더링을 Reflow와 Repaint로 나눌 수 있다.

Reflow

웹 브라우저에서 flow란 DOM 엘리먼트가 배치되는 흐름을 말한다.

<div>
  <h1>훈민정음</h1>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Statue_of_King_Sejong_-_SK.jpg/450px-Statue_of_King_Sejong_-_SK.jpg"/>
  <p>
   세종어제 훈민정음 우리나라의 말이 중국과 달라
   문자와 서로 맞지 아니해서 이런 까닭으로
   어리석은 백성이 말하고자 할 바가 있어도
   마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라
   내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니
   사람마다 하여금 쉬이 익혀 날로 쓰며 편안케 하고자 할 따름이니라
  </p>
</div>

훈민정음

세종어제 훈민정음 우리나라의 말이 중국과 달라 문자와 서로 맞지 아니해서 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 쓰며 편안케 하고자 할 따름이니라

부모 엘리먼트인 <div> 블록 안에서 자식 엘리먼트의 위치를 결정한다. <h1><img>, <p>는 블록 엘리먼트이기 때문에 다른 요소들이 같은 줄에 배치될 수 없다. 따라서 계산된 레이아웃(flow)는 위와 같이 배치되게 된다.

Reflow란 DOM Element에 변화가 생길 때, 이런 flow를 웹브라우저가 재계산하는 것을 말한다. 위 도식의 Layout단계에 해당하는 과정이다.

<div>
  <h1>훈민정음</h1>
  <img id="sejong" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Statue_of_King_Sejong_-_SK.jpg/450px-Statue_of_King_Sejong_-_SK.jpg"/>
  <p>
   세종어제 훈민정음 우리나라의 말이 중국과 달라
   문자와 서로 맞지 아니해서 이런 까닭으로
   어리석은 백성이 말하고자 할 바가 있어도
   마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라
   내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니
   사람마다 하여금 쉬이 익혀 날로 쓰며 편안케 하고자 할 따름이니라
  </p>
</div>
<script>
function toggleStyle() {
  var target = document.getElementById('sejong');
  if (!target.style.float) {
    target.style.float = 'right';
  } else {
    target.style.float = '';
  }
}
</script>

훈민정음

세종어제 훈민정음 우리나라의 말이 중국과 달라 문자와 서로 맞지 아니해서 이런 까닭으로 어리석은 백성이 말하고자 할 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많으니라 내 이를 위하여 가엾게 여겨 새로 스물여덟 자를 만드노니 사람마다 하여금 쉬이 익혀 날로 쓰며 편안케 하고자 할 따름이니라