백그라운드 스냅샷 준비

요소를 캡처하는 데는 크기와 폰트, 이미지에 따라 몇 밀리초에서 수백 밀리초가 걸립니다. 준비는 그 작업을 미리 해 두어 remove()가 곧바로 그리기 시작하게 합니다.

백그라운드 준비는 기본적으로 활성화되며 visible-idle 전략을 사용합니다. 라이브러리는 나중에 어떤 요소가 remove()에 전달될지 알 수 없고 DOM을 직접 탐색하지도 않습니다. 미리 캡처할 요소는 각각 register()에 전달해야 합니다. 등록하지 않아도 remove()는 동작하지만 캡처는 작업이 시작될 때 비로소 진행됩니다. preparation: false로 백그라운드 준비를 완전히 끌 수 있습니다.

요소 등록하기

const effects = new Disintegrator({ preset: 'dust' });

const cards = document.querySelectorAll<HTMLElement>('[data-effects]');

effects.register(cards);

effects.register(cards) 호출은 해당 요소를 백그라운드 준비 대상으로 등록합니다. 이후 요소가 뷰포트에 가까워지고 브라우저가 유휴 상태가 되면 스냅샷이 생성됩니다.

요소 준비 중지하기

destroy()를 호출하기 전에 관찰을 중지해야 한다면 register()가 반환하는 함수를 저장하세요.

const stopPreparing = effects.register(cards);

이는 앞선 등록 호출의 대안입니다. 같은 요소에 register()를 두 번 호출하지 마세요. 백그라운드 준비가 더 이상 필요하지 않을 때 저장한 함수를 호출합니다.

stopPreparing();

이 함수는 DOM을 변경하지 않고 요소 관찰만 중지합니다. 등록은 참조 횟수를 셉니다. 두 컴포넌트가 같은 노드를 등록했다면 각 정리 함수는 자신의 등록만 해제하며 둘 다 해제된 뒤에 관찰을 멈춥니다.

실행 조건 설정

const effects = new Disintegrator({
  preset: 'dust',
  preparation: {
    strategy: 'visible-idle',
    rootMargin: '300px 0px',
    concurrency: 1,
    shouldPrepare: (element) => element.matches('[data-effects]'),
    invalidateOnResize: true,
    observeMutations: false,
    cachePixelBudget: 8_000_000,
  },
});

shouldPrepare(element)는 작업 예약 전에 실행되므로 요소 유형, UI 상태, 네트워크, feature flag를 반영할 수 있습니다.

캐시 직접 제어

await effects.prepare(elements); // 지금 캡처
effects.invalidate(elements); // 오래된 항목 제거 및 재예약
effects.clearPrepared(); // 전체 캐시 해제

캡처가 완료된 뒤 애니메이션을 취소하면 스냅샷을 같은 용량 제한 캐시로 돌려놓을 수 있습니다. 요소를 보관하는 제거 작업은 스냅샷을 유지하고, 복원 작업은 등록된 요소의 스냅샷을 유지합니다. 효과 설정만 변경했다면 다시 캡처할 필요가 없습니다. 무효화, 크기 확인, 캐시 퇴출과 인스턴스 파괴는 계속 적용됩니다.

작업은 확신할 수 없는 스냅샷으로 애니메이션하지 않습니다. 스냅샷이 없거나, 아직 만들어지는 중이거나, 오래됐거나, 캐시에서 밀려났다면 먼저 새로 캡처합니다.

캐시 예산

캐시는 기본으로 800만 물리 픽셀까지 담고, 넘치면 가장 오래 쓰이지 않은 스냅샷을 버립니다. 세는 대상은 스냅샷뿐이고 보관된 DOM 노드는 포함되지 않습니다. 버려진 스냅샷은 캔버스 크기를 0으로 만들어 브라우저가 메모리를 되찾게 합니다.

메모리가 부족한 기기에서는 예산을 줄이세요. 실제 캡처 비용을 측정한 뒤에만 늘리세요.

무효화

invalidateOnResize의 기본값은 true이고 observeMutations의 기본값은 false입니다. 전체 DOM 하위 트리를 관찰하는 데 비용이 들 수 있기 때문입니다. 콘텐츠 모양이 바뀌면 invalidate()를 호출하세요.

observeMutations: true에서는 노드 추가, 텍스트 수정, style 이외의 속성 변경, 하위 리소스 로드가 스냅샷을 무효화하고 준비를 다시 예약합니다. 인라인 style 쓰기는 오래된 스냅샷만 제거합니다. 애니메이션 라이브러리가 매 프레임 이를 갱신할 수 있으므로 자동 재캡처는 반복 루프를 만들기 때문입니다. 다음 작업은 필요할 때 현재 상태를 직접 캡처합니다. 일회성 스타일 변경 후 해당 상태를 백그라운드에서 다시 준비하려면 invalidate()를 호출하세요.

invalidate()는 context.invalidate를 통해 준비된 canvas와 캡처 엔진을 함께 갱신합니다. 명시적인 prepare()도 갱신을 요청하며 clearPrepared() 후 다음 캡처는 새로 갱신해야 합니다. DOM 관찰자가 감지할 수 없는 CSSOM 변경도 포함됩니다. 자체 캐시가 있는 사용자 정의 어댑터는 context.invalidate를 처리해야 합니다.