[JS] DocumentFragment, Template tag

 

실무에서는 화면에 태그를 추가할 때 createElement로 만들어 실제 DOM에 추가하지 않는다고 한다. 그 대신 document.createDocumentFragment로 documentFragment를 생성해 내부에 여러 태그를 추가한 후, 해당 documentFragment를 실제 DOM에 추가하는 방식을 사용한다고 한다.

 

그럼 documentFragment의 사용이 DOM의 효율성과 어떤 관련이 있을까?

 

 

 

 

DocumentFragment

---

기본적으로 DOM과 동일하게 동작하나 실제 DOM에는 영향을 주지 않는다. DOM 트리 외부에, 메모리 상에서만 존재하는 DOM을 생성하기 때문에 실제 DOM 구조에는 변경이 일어나지 않아 브라우저가 화면을 랜더링하지 않는다. 따라서 페이지의 성능 영향을 최소화할 수 있다. 만약 documentFragment를 이용하지 않고 일반 요소 노드에 여러 요소 노드를 추가한다면 추가한 노드 수 만큼 랜더링되어 리소스가 많이 들기 때문에 여러 개로 이루어진 루트 노드를 한 번에 DOM에 삽입할 때는 createElement보다 createDocumentFragment를 이용하는 것이 좋다.

 

 

 

참고한 블로그에는 '부모가 없는 최소화된 경량화된 문서 객체'라고 정의하였다.

 

const ul = document.querySelector(".product-list");
const template = document.createDocumentFragment();
const productList = ["computer", "keyboard", "monitor"];

productList.forEach((productItem) => {
    const li = document.createElement("li");
    li.textContent = productItem;
    template.appendChild(li);
});

ul.appendChild(template);

documentFragment 객체인 template에 여러 요소 노드를 추가한 후 template을 DOM에 존재하는 실제 요소 노드인 ul에 추가해보았다.

 

 

 

여기서 알 수 있는 documentFragment의 특징은 fragment 객체의 하위 노드들만 삽입되고 fragment 객체는 사라진다는 점이다. 그래서 여러 개의 루트 노드를 한 번에 DOM에 삽입하고 싶을 때 가장 유용하다.

 

 

 

 

 

Template tag

---

이 태그 또한 랜더링을 피해 HTML 데이터를 저장하는 방식으로 사용될 수 있다.

template 태그는 DOM에 숨겨져 있지만 랜더링은 되지 않기 때문이다.

 

다만 위의 documentFragment 객체와는 사용 목적이 다르다.

 

<template></template> 사용 목적

1. 마크업할 데이터가 이미 정해져있어 이를 미리 마크업해두고 나중에 사용할 때

2. 해당 HTML 데이터를 문서 전체에서 반복적으로 사용할 때

 

 

document.createDocumentFragment 사용 목적

1. 브라우저가 DOM API를 랜더링을 피해 DOM 트리를 만들고 싶을 때

2. template 태그와 달리 동적으로 HTML를 생성하고자 할 때

3. 여러 개의 루트 노드를 DOM 트리에 삽입하고 싶을 때

 

 

 

 

 

 

 

참고 자료

https://www.zerocho.com/category/JavaScript/post/573b4165a54b5e8427432948

https://7942yongdae.tistory.com/70

https://velog.io/@oneook/DocumentFragment-%EA%B0%9D%EC%B2%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

https://stackoverflow.com/questions/53577903/html-template-element-vs-document-createdocumentfragment