[JS] DocumentFragment

✨ DocumentFragment

• 노드를 생성해서 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM를 만들 수 있음.
• 프래그먼트에 대한 변경 사항은 문서에 영향을 미치지 않거나, (리플로우 시 에도) 변경 시 성능에 영향을 주지 않음.
• 정리하면, 라이브 DOM 트리처럼 작동하되, 메모리상에서만 존재하는 빈 문서 템플릿으로 생각하면 됨.
• DOM 트리의 일부가 아닌 DOM 객체

일반적인 사용 사례
문서를 만들고 문서에 요소를 추가한 다음 DOM 트리에 문서 조각을 추가하는 것.
DOM 트리에서 문서 조각은 모든 자식으로 대체됩니다.
문서 조각이 메모리에 있고 기본 DOM 트리의 일부가 아니므로 여기에 자식을 추가해도 페이지가 발생하지 않는다.

---

✨ Document.createDocumentFragment( )

let fragment = document.createDocumentFragment();

노드를 삽입할 준비가 된 새로 생성된 비어 있는 개체

let fragment = new DocumentFragment();

DocumentFragment 생성자도 사용할 수 있음.

---

-HTML-

<table id="table"></table>

-JS-

// $table -> $fragment -> $tr -> $td

const $table = document.getElementById("table");

function startGame() {
				const $fragment = document.createDocumentFragment();
				[1, 2, 3, 4].forEach(function () {
					const rowData = [];
					data.push(rowData);
					const $tr = document.createElement("tr");
					[1, 2, 3, 4].forEach(() => {
						rowData.push(0);
						const $td = document.createElement("td");
						$tr.appendChild($td);
					});
					$fragment.appendChild($tr);
				});
				$table.appendChild($fragment);
			}

 

table (화면에 존재하는 것)에 tr을 반복적으로 append 할 때마다, 계속 렌더링 돼서 성능이 저하되는데
그럴 때 fragment (메모리에만 존재하는 가상 변수)를 만들어서
그 안에 append를 먼저 하고, 마지막에 실제 화면 (table에 append) 뿌려주면 딱 한 번만 렌더링을 해도 되므로,
성능이 훨씬 좋아지는 코드를 작성할 수 있다.

---

※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌

※ 참고 : https://programmer-seva.tistory.com/60

※ MDN : https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment