목록개발/WEB (1)
차근차근 개발중
[WEB] 리플로우(reflow)와 리페인트(repaint)
렌더링 과정중에 성능최적화를 고민하기위해서는 리플로우와 리페인트단계를 빼놓을 수 없다 그렇기때문에 리플로우와 리페인트에 대해서 공부해보자 화면이 사용자에게 표출된 후에 노드가 추가되거나 요소의 스타일이 달라졌을때 발생하는게 리플로우(Reflow)와 리페인트(Repaint)입니다 📌 리플로우란(Reflow)?- 요소의 위치나 크기가 변경되어 페이지의 레이아웃을 다시 계산하는 과정입니다. 변경하려는 특정요소의 위치와 크기뿐만 아니라 연관된 요소들의 위치와 크기도 재계산하기 때문에 성능 저하가 일어납니다. • 발생원인DOM요소 추가/ 제거요소의 크기, 위치 변경폰트변경, 텍스트 내용변경윈도우 크기조정 css 스타일 변경 ex) margin, padding등 • 특징계산 비용이 높다하나의 요소가 리..
개발/WEB
2025. 2. 27. 11:33