Skip to main content
← Labs

Reproducible browser experiment

가변 높이 windowing 실험

1,000개 항목을 모두 DOM에 만들지 않고도 마지막 항목까지 이동할 수 있는지, 높이 측정과 스크롤 보정이 어떤 차이를 만드는지 직접 확인합니다.

이론 설명으로 돌아가기

무엇을 확인할까

  1. 끝까지 스크롤해도 렌더링된 DOM 수가 전체 데이터 수로 늘어나지 않는지
  2. overscan을 늘리면 화면 주변에 준비하는 항목도 함께 늘어나는지
  3. 폭이 좁아져 행 높이가 바뀌면 누적 위치가 다시 계산되는지
  4. 위쪽 높이가 40px 바뀔 때 보정 전후 기준 행의 이동량이 달라지는지

브라우저 실험

1,000개 항목에서 window만 렌더링하기

스크롤 위치와 측정된 높이로 범위를 계산합니다. 목록을 스크롤하거나 overscan을 바꾸며 실제 DOM 항목 수를 확인하세요.

현재 scrollTop0px
계산된 범위1–8
렌더링된 DOM8 / 1000

위쪽 높이 변경과 기준 행 보정

먼저 목록을 아래로 스크롤하세요. 그 뒤 현재 보이는 기준 행 바로 위쪽의 누적 높이가 40px 늘어났다고 가정해, 기준 행의 화면상 이동량을 보정 전후로 비교합니다.

아직 높이 변경을 실행하지 않았습니다.

  1. 항목 1

    짧은 항목입니다.

  2. 항목 2

    화면 폭에 따라 한두 줄로 바뀌는 항목입니다. 실제 높이를 측정해야 다음 항목의 위치를 보정할 수 있습니다.

  3. 항목 3

    가변 높이 항목은 이미지, 번역된 문장, 사용자 입력처럼 렌더링 전에는 정확한 크기를 알기 어려운 콘텐츠에서 나타납니다.

  4. 항목 4

    짧은 항목입니다.

  5. 항목 5

    화면 폭에 따라 한두 줄로 바뀌는 항목입니다. 실제 높이를 측정해야 다음 항목의 위치를 보정할 수 있습니다.

  6. 항목 6

    가변 높이 항목은 이미지, 번역된 문장, 사용자 입력처럼 렌더링 전에는 정확한 크기를 알기 어려운 콘텐츠에서 나타납니다.

  7. 항목 7

    짧은 항목입니다.

  8. 항목 8

    화면 폭에 따라 한두 줄로 바뀌는 항목입니다. 실제 높이를 측정해야 다음 항목의 위치를 보정할 수 있습니다.

측정 전에는 72px을 추정값으로 사용합니다. 렌더링된 행의 테두리까지 포함한 크기(border box)가 달라지면 ResizeObserver가 높이 캐시를 갱신하고 뒤 항목의 누적 오프셋을 다시 계산합니다.

재현 정보
기준 계산
브라우저와 무관한 계산 코드가 아래 입력에서 같은 결과를 내는지 확인한 시각:
기준 계산 입력
heights=[40, 80, 20, 60, 100, 48], scrollTop=50, viewport=120, overscan=1
기준 계산 결과
range=0–5, total=348px, anchor delta 30px → 0px
Browser 실행
Chromium 145.0.7632.6 · Playwright 1.58.2
Browser 입력
1000개
  • 데스크톱 1440×1024: viewport 1440×1024, screen 1440×1024, 데스크톱 환경, 비터치 입력
  • Pixel 5 기기 프로필 393×727: viewport 393×727, screen 393×851, 모바일 환경, 터치 입력
  • 최소 모바일 320×568: viewport 320×568, screen 320×568, 데스크톱 환경, 비터치 입력
브라우저 관찰값
  • 데스크톱 1440×1024: 최대 DOM 14개, 마지막 항목 도달
  • Pixel 5 기기 프로필 393×727: 최대 DOM 13개, 마지막 항목 도달
  • 최소 모바일 320×568: 최대 DOM 13개, 마지막 항목 도달
브라우저 합격 기준
DOM ≤ 40, 마지막 항목 도달, 초기 범위 복원, 기준 행의 실제 화면상 이동 40px → 0px, 모바일 너비 변경 뒤 가변 높이 재측정
소스 지문
실험 파일 내용이 달라지지 않았음을 대조하는 SHA-256 값: d59e1f5c9d046d88eec63f8fa62a516288b6ae5e85bf53540b9a6857842ea427
소스 기준 버전
실험이 어느 Git 상태에서 실행됐는지 나타내는 기준 커밋과 작업 트리 상태: 3273c36e2120b690aa85178a0ce03e9386d385c2 (변경 없음)
시간 합격선
사용하지 않음 — 기기 속도에 따라 달라지는 실행 시간 대신 결과 범위·DOM 수 같은 구조적 불변 조건만 검사

이 결과가 말해 주는 범위

이 실험은 명시된 Chromium·데이터·viewport 조건에서 window가 제한되고 기준 행 보정이 동작했음을 보여 줍니다. 모든 브라우저, 데이터 크기, 실제 기기의 프레임 시간까지 일반화하지 않습니다.