💡 HTML/CSS/JS만 사용해, 브라우저가 화면을 그릴 때 생기는 불필요한 렌더링 과정을 줄이는 방법을 실험하고 성능 변화를 직접 측정한다.
우테코 프리코스에서는 주로 로직 설계 능력을 기르는 데 집중했다. 이러한 미션들은 비즈니스 로직 중심의 학습이었지만, 브라우저가 이 로직을 화면으로 표현할 때 어떻게 렌더링이 일어나는가는 다루지 않았다. 웹페이지는 단순히 코드만 실행되는 게 아니라, 브라우저가 내부에서 DOM 계산 → 스타일 적용 → 레이아웃 구성 → 화면 그리기 과정을 거치며 렌더링된다. 이 과정이 비효율적이면, 페이지가 ‘느리다’거나 ‘버벅인다’는 체감으로 이어진다.
본 프로젝트는 DOM을 매번 직접 조작하는 방식, DocumentFragment를 이용해 한 번에 반영하는 방식, requestAnimationFrame으로 렌더링 타이밍을 제어하는 방식 을 각각 구현하고, Chrome의 개발자 도구(Performance / Lighthouse)를 통해 실제 성능 차이를 분석한다.