CSS Reflow, Repaint
Reflow 대화형 사이트에서 업데이트 한 후와 같이 browser가 웹 페이지의 일부 또는 전부를 다시 처리하고 그려야할 때 Reflow가 발생한다. 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받는 모든 노드(자신, 자식, 부모, 조상 등 = 결국 모든 노드)의 수치를 다시 계산하여(Recalculate) Render 트리를 재생성하는 과정 Repaint (=Redraw) Reflow 과정이 끝난 후, 재생성된 Render 트리를 다시 그리는(paint) 과정 Reflow 과정이 일어나는 상황 Window Resizing Viewport 변화는 Global Layout에 영향 Font 변경 height 계산에 영향을 주므로 Global Layout에 영향 스타일 추가 또..
2022.01.03