직접 만든 리스트에서 각 항목 위치를 계산해서 옮기는 애니메이션을 넣었는데, 항목이 좀 많아지니까 60fps는커녕 눈에 띄게 뚝뚝 끊깁니다. 성능 탭 찍어보니 reflow(리플로우)가 어쩌고 하면서 빨간 경고가 뜨는데 이게 뭔지 잘 모르겠어요.
reflow랑 repaint(리페인트) 차이부터 찾아봤는데 이렇게 정리되더라고요.
reflow : 요소의 위치나 크기(기하 정보)가 바뀌어서 브라우저가 레이아웃을 다시 계산. 비쌈. 주변으로 전파됨
repaint : 색깔 같은 겉모습만 바뀜. 상대적으로 쌈
-> reflow가 일어나면 repaint도 따라오지만, 반대는 아님
문제는 제 코드가 반복문 안에서 이런 식이라는 거예요.
items.forEach((el) => {
const left = el.offsetLeft; // 읽기
el.style.left = left + 10 + "px"; // 쓰기
});
찾아보니 이렇게 읽기(offsetLeft)랑 쓰기를 한 루프에서 번갈아 하면 강제 동기 리플로우인지 뭔지가 매번 발생한다는데, 이게 왜 그런 건가요? 브라우저가 알아서 몰아서 처리해줄 것 같은데 왜 굳이 그때그때 다시 계산하는 거죠? 그리고 해결책으로 읽기랑 쓰기를 나눠서 하라거나, 위치 옮길 때 transform 쓰라는 말이 있던데 transform은 뭐가 다르길래 괜찮은 건지 원리를 알고 싶습니다.