오늘은 repaint 와 reflow의 개념을 알아보고자 합니다. 해당 용어는 웹 브라우저에서 렌더링(Rendering) 과정에 관련된 용어라는 것 정도만 알고 있었으나, 구체적으로 무엇을 의미하는지, 어떤 차이가 있는지는 알지 못했습니다. ※ 렌더링 : 서버로부터 받은 개발 문서(Javascript, HTML, CSS)를 웹 브라우저에서 그래픽 형태로 출력하는 과정 프론트엔드 개발자로서 알아야할 개념이라고 들었고, 기술 면접에서 은근히 자주 나오는 단골 질문이라고 하니 지금부터 확실하게 파헤쳐보고자 합니다. ✍️ 렌더링 과정 먼저 웹 브라우저를 통해 화면이 뿌려질 때까지 렌더링이 어떻게 이뤄지는지 알아보도록 하겠습니다. 1. 문서 파싱(Parsing) & Render Tree 구축 웹 브라우저는 서버로..