실무/성능 최적화2 windowing기법과 실무 적용 이 글은 react windowing을 실무에 적용하여 FPS, Performace탭 분석을 통하여 개선 및 분석, windowing 기법의 원리를 설명하는 글입니다. 개발자도구 > Elements 탭 비교적용전모든 리스트를 DOM에 추가하게됩니다. 1만개를 넘는 데이터를 받으면 그대로 쌓는것입니다. 적용후 정확한 검증을 위하여 더 자세한 측정을 해보겠습니다. 측정 조건- CPU throttling: 6x slowdown- Network throttling: 3g- Grid 이미지 10,000건 데이터 기준 측정측정 내용SPA 구조에서 탭 전환으로 동일한 이미지 그리드(약 10,000건)를 다시 보여줄 때,렌더링 복구 과정에서 UI프리징이 발생하는지 확인 측정 지표1. FPS(Frames Per Seco.. 2025. 3. 16. 번들 최적화 (이전글) windowing기법과 실무 적용https://hongjungkim-dev.tistory.com/1355 windowing기법적용전모든 리스트를 DOM에 추가하게됩니다. 1만개를 넘는 데이터를 받으면 그대로 쌓는것입니다. 적용후DOM 요소는 제한된 수만 유지data-index에 따라 컨텐츠만 변경기존 DOM을 재활용state가 변경hongjungkim-dev.tistory.com (이전글) TanStack Query 내부구조 (with 코드) + 실무 적용https://hongjungkim-dev.tistory.com/manage/posts 티스토리좀 아는 블로거들의 유용한 이야기, 티스토리. 블로그, 포트폴리오, 웹사이트까지 티스토리에서 나를 표현해 보세요.www.tistory.com (이.. 2025. 3. 16. 이전 1 다음
