개발에 AtoZ까지

근래에 웹 최적화에 관해 관심을 가지면서 Reflow와 Repaint에 대해서 다시 한번 짚고 넘어가 보려고 합니다. 혹시나 브라우저 렌더링에 대해 상기하고 싶으신 분이 있다면 이전 글을 보고 오시는 것을 추천합니다. 이 글은 아래와 같은 목차로 진행하겠습니다. 1. Reflow가 뭘까? 2. Repaint는 뭘까? 3. 둘의 차이점은 뭘까? 4. 최적화 관점에서 어떻게 해야 할까? 5. 마무리 Reflow가 뭘까? Reflow란 HTML 파일을 불러와 Parsing을 통해 Render Tree를 형성하게 되는데, 어떠한 액션이나 이벤트로 인해 Dom의 크기나 위치 등의 값이 변경되어 Layout 과정을 다시 수행하게 됩니다. 이렇게 다시 수행되는 과정을 통틀어서 Reflow라고 합니다. 말로 하면 감이..