사전 지식

Rendering Flow

1. HTML, CSS Get

• 브라우저는 서버로부터 HTML, CSS를 get

2. DOM, CSSOM 생성

• 추후 관리가 용이하도록 다음을 생성
  - HTML -> DOM
  - CSS -> CSSOM

3. RenderTree

• DOM과 CSSOM을 이용
• 실제 화면에 구성되는 node들로 구성

4. Layout

• viewport 내에 node들의 크기와 위치를 계산

5. Paint

• 실제 표출

Reflow? Repaint?

Reflow

• Layout이 영향을 받을 경우, RenderTree 수정부터 다시 시작

Repaint

• Layout의 영향이 없는 css의 속성값들이 변경될 때 발생
• reflow가 발생하면 repaint는 따라서 발생한다고 생각해도 됨

Fragment

개념

• document에 append를 할 경우, reflow 발생
• 여러 개의 node를 append하면, 그 때마다 reflow가 발생한다.
• So, fragment에 넣어두고 한 번의 append만 하자!

Base HTML, JS

<ul id="list"></ul>

//js
const listUl = document.querySelector('#list')
const fruits = ['Apple', 'Orange', 'Banana', 'Melon']

기존 코드

fruits.forEach(function(fruit) {
  let li = document.createElement('li');
  li.innerHTML = fruit;
  listUl.appendChild(li);		//반복되는 reflow 발생
});

개선된 코드

const fragment = new DocumentFragment();	//fragment 생성

fruits.forEach(function(fruit) {
  let li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);		//fragment에 append할 땐 reflow가 발생하지 않는다!
});

listUl.appendChild(fragment);		//한 번의 reflow 발생

기타 팁

opacity

• Reflow, Repaint가 발생하지 않음
• visibility or display 속성 대신 사용한다면 성능 향상