Reflow (Layout)
Element들의 크기, 길이 같은 것들이 변경되면 이와 관련된 Element들의 수치를 다시 계산하여 렌더 트리(Render Tree)를 구성한다.
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<!-- (중략) -->
<div id="box" />
<script>
document.querySelector("#box").addEventListener("click", (e) => {
e.target.style.width = "50px";
});
</script>
HTML
복사
Repaint (Paint)
업데이트된 렌더 트리를 브라우저에서 볼 수 있도록 그리는 과정이다. background, color, opacity와 같은 스타일들이 변경되었을 때 발생한다.
만약 크기나 길이는 변경이 안되고 단순 스타일만 변경됐다면 Repaint 과정만 발생한다.
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<!-- (중략) -->
<div id="box" />
<script>
document.querySelector("#box").addEventListener("click", (e) => {
e.target.style.backgroundColor = "blue";
});
</script>
HTML
복사
Reflow와 Repaint 비용 절약하기
•
Dom Tree의 깊이가 얕을 수록, Reflow의 비용이 감소한다.
•
JavaScript에서 스타일을 변화시킬 때는 한번에 처리한다.
// INCORRECT
document.querySelector("#box").addEventListener("click", (e) => {
e.target.style.width = "50px"; // 한번
e.target.style.height = "50px"; // 두번
});
// CORRECT
document.querySelector("#box").addEventListener("click", (e) => {
e.target.style.cssStyle= "width: 50px; height: 50px;"; // 한번
});
JavaScript
복사
•
CSS 애니메이션이 적용되었다면 position: absolute 또는 position: fixed 스타일을 통해 의존성을 때어내자
•
인라인(Inline) 스타일 사용을 자제한다. 인라인 스타일 변경 시 Reflow가 발생한다.