용어 사전 coding 용어 페이지

DocumentFragment

레이아웃을 건드리지 않고 DOM 조각을 모으는 임시 버킷

document-fragment #performance#dom

English version

다른 이름

도큐먼트 프래그먼트

선수 개념

관련 개념

부분 갱신 레이아웃 스래싱 렌더 함수 지연 로딩

핵심 아이디어

DocumentFragment는 메모리 안에서만 존재해, 여러 노드를 추가해도 즉시 렌더링되지 않습니다. 마지막에 한 번만 실제 DOM에 붙이므로 긴 리스트나 카드 모음을 렌더링할 때 리플로를 크게 줄입니다.

이 블로그에서의 역할

Mathbong의 성능 단원에서는 부분 갱신과 레이아웃 스래싱 비교 실험에 fragment를 활용합니다. 렌더 함수가 대량 데이터를 다룰 때도 예측 가능한 성능을 유지하도록 돕는 기본 도구입니다.

이 개념을 다루는 글

[JavaScript 시리즈 17편] 퍼포먼스 기초: 페인트·리플로와 지연 로딩 렌더링 단계, layout thrashing 방지, 이미지 지연 로딩, 관찰자 API로 성능을 지키는 방법을 다룹니다.[JavaScript Series 17] Performance Basics: Paint, Reflow, and Lazy Loading Understand how the browser draws web pages, learn how to prevent common layout slowdowns, and apply lazy loading with easy-to-follow code.