프론트엔드 개발을 하게되면 repaint와 reflow 라는 말을 자주 듣게 될 것이다. 브라우저의 렌더링 과정과 관련이 있다. repaint와 reflow를 이해하려면 먼저 브라우저가 어떻게 페이지를 그려서 보여주는지 알아야 한다. 우리가 HTML과 CSS로 작성한 코드는 '렌더링(Rendering)'이라는 과정을 거쳐 화면에 나타난다. HTML(DOM)과 CSS(CSSOM) 코드를 기반으로 브라우저 엔진이 Render Tree를 형성하고, 이 과정에서 reflow와 repaint가 발생한다. 자바스크립트로 DOM을 조작하거나 CSS를 동적으로 변경할 때 이 두 현상이 트리거된다.웹 브라우저의 렌더링 엔진(Rendering Engine)이 화면을 그리는 과정DOM과 CSSOM 생성: 웹 브라우저의 렌더..
