허원철의 개발 블로그

이번 글은 Reflow와 Repaint에 대한 내용입니다. Reflow와 Repaint는 브라우저 렌더링 과정의 일부 입니다. 그렇기 때문에 설명하기에 앞서 브라우저 렌더링에 대한 개념을 우선적으로 알아야합니다. 브라우저 렌더링 렌더링은 화면에 컨텐츠를 그리는 과정으로 우리가 흔히 쓰는 크롬 브라우저에 UI를 그리는 것을 말합니다. 크롬에 경우, Webkit 엔진을 사용하여 렌더링하게 되는데요. 간단하게 과정을 설명하자면, 문서(html, css)를 파싱하여 렌더 트리를 생성하고 이를 배치 및 표현하게 됩니다. (출처: http://taligarsiel.com/Projects/howbrowserswork1.htm) 렌더링 엔진은 해당 과정을 절차적으로 수행하지 않고 점진적으로 수행합니다. (단, Tabl..