[리렌더링] 01. reflow & repaint

reflow와 repaint에 대해 아는대로 말해보세요

해당 소제목은 내가 경험했던 면접 질문 중 하나였다.

그냥 생각이나서 간단하게 끄적여보려고한다.

---

reflow & repaint

브라우저를 사용하다보면 UI들이 지속적으로 같은 스타일을 유지 하진 않는다.

개발자의 의도에 따라 어떤 노드에 무언가를 추가하고
어떤 요소는 스타일이 달라지기도 한다.

이럴 때 발생하는것이 바로 reflow와 repaint

만약 style이나 DOM 내부를 변경하는 DOM API가 사용됐다면 우리의 DOM은...
1. 무엇이 변경됐는지 감지
2. 브라우저 작동 과정을 수행
  (HTML DOM 트리 & CSSOM 트리 생성 -> Render 트리 생성 -> paint)
3. 리렌더링을 진행

위와 같은 과정을 수행한다.

---

리렌더링이 일어나는 방식 3가지

1. repaint(레이아웃)의 경우 paint와 composite과정을 모두 거친다.
JS, CSS 파싱 -> Render 트리 구축 -> reflow(레이아웃) -> repaint -> 레이어 업데이트 -> composite(합성)

2. repaint만 한다면?
JS, CSS 파싱 -> Render 트리 구축 -> repaint -> 레이어 업데이트 -> composite(합성)

3. 둘 다 필요없는 스타일변화 (성능적으로는 가장 이상적)
JS, CSS 파싱 -> Render 트리 구축 -> 레이어 업데이트 -> composite(합성)

---

리렌더링 성능을 고려한 코드 작성 방법

인라인 스타일 사용하지 않기

애니메이션은 position을 가급적 fixed 혹은 absolute으로 지정하기

CSS 하위 선택자는 필요한 만큼만 사용하기

CSS에서의 JS 표현식은 자제하기

일부 속성과 메서드가 자주 사용되는 것이라면 캐싱하기

 

이 외에도 많은 방법이 있지만 눈에 바로 들어온 방법들 5가지만을 정리해보았다.