의미
💡 웹 인터랙션으로 인해 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우, 페인트 과정을 반복해 수행하는 것을 리페인트
//예 : JavaScript 조작을 통해 변경
const div = document.createElement('div');
document.body.append(div);
div.textContent = 'hello world';프레임 드랍 방지하기
💡 프레임 드랍 초당 60프레임으로 유지시키던 프레임의 수가 브라우저의 과부하로 인해 줄어드는 현상
📗 불필요한 레이아웃 삭제
📗 CSS에서 레이아웃, 페인트를 발생시키는 속성 줄임
리플로우
position / width / height / left / top / right
bottom / margin / padding / border / border-width
clear / display / float / font-family / font-size
font-weight / line-height / min-height / overflow
text-align / vertical-align
animation에서 transform 사용
리페인트
background / background-image / background-position
background-repeat / background-size / border-radius
border-style / box-shadow / color / line-style
outline / clear / display / float / font-family
font-size / font-weight / outline-color / visibility
visibility/display 보다 opacitiy를 사용
📗 영향을 주는 노드 줄임
position을 absolute 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄일 수 있음
