studyHard
리플로우와 리페인트
Language/JavaScript 2023. 9. 5. 17:28

저번에 브라우저의 렌더링 과정에 대하여 정리하였으니 오늘은 리플로우와 리페인트에 대해서 정리해 보려고 한다. 브라우저 렌더링과 Reflow, Repaint의 관계 Layout은 요소의 위치, 크기를 계산하여 화면에 그리는 과정이며 reflow와 관련 있다. paint는 배치된 요소의 스타일(색상, 굵기 등)을 적용하는 과정으로 repaint와 관련 있다. reflow는 말 그대로 flow 과정을 다시 하는 작업이다. flow 작업은 곧 layout이며, reflow가 된다는 건 요소의 위치, 크기 계산을 다시 한다는 말이 된다. repaint는 paint 작업을 다시 하는 작업이고 paint는 요소에 스타일을 적용하는 과정이므로, repaint는 요소의 스타일을 재적용하는 것을 말한다. 리플로우와 리페인..