WEB
Reflow, Repaint 와 7가지 렌더링 최적화방법
브라우저 렌더링 과정을 알아보았으니 최적화시키는 방법을 알아보자. 위와 같은 렌더링 과정에서 Reflow와 Repaint는 둘다 비용이 많이 드는 작업이다. 먼저 이 두 과정에 대해 알아보자. Reflow(Layout)이란? 화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. element의 reflow는 DOM에 있는 모든 하위, 상위 요소의 후속 리플로우를 유발한다. - 모든 엘리먼트의 위치나 길이, 크기 등등을 다시 계산하는 과정 - 상위 엘리먼트를 변경시키면 하위 엘리먼트에도 영향을 끼침 - render tree를 재생성하므로 부하가 크고 레이아웃에 영향을 줌 - DOM노드를 추가, 제거 , 업데이트하는 경우 발생 Repaint(Re..
