브라우저의 렌더링 과정 (CRP, Critical Rendering Path)

• 웹 페이지의 구조를 정의하는 마크업 언어인 HTML과 스타일을 정의하는 CSS는 각각 브라우저가 이해할 수 있는 객체 트리 구조로 변환된다.

• DOM과 CSSOM은 웹 페이지의 청사진으로, 모든 정보가 담겨 있으며, 요소의 배치와 화면에 그려내는 작업을 포함한다.

• DOM이 수정되면 Layout과 Painting을 다시 잡는 과정을 Reflow와 Repaint라고 하며, 이는 성능에 영향을 미친다.

• 반복문을 통해 DOM 수정 횟수를 최소화하면 성능이 크게 개선되며, 예시로 3,000번의 DOM 수정이 1번으로 줄어들어 성능이 22배 향상된다.