[JavaScript] DocumentFragment 장점

 DocumentFragment 의 정의

- 메모리에서만 정의되고, 기본적으로 DOM과 동일하게 작동하지만 HTML의 DOM트리에는 영향을 주지않음.

 

DocumentFragment 사용, 일반적인 방식과 차이

const DF = document.createDocumentFragment();

const elDiv = document.createElement("div");
elDiv.textContent = "hi"
DF.appendChild(elDiv);

console.log(DF.textContent)	//hi

document.body.appendChild(DF)

console.log(DF.textContent) // ""

- body에 붙이면 만들었던 DocumentFragment의 값들은 이전된다.

- HTML구조를보면 body바로 아래에 div가 붙은걸 확인할수 있다.

 

const DF2 = document.createElement("span");

const elDiv = document.createElement("div");
elDiv.textContent = "hi"
DF2.appendChild(elDiv);

console.log(DF2.textContent)	//hi

document.body.appendChild(DF2)

console.log(DF2.textContent) // hi

- body에 붙이면 만들었던 값들이 유지가된다.

- HTML 구조를 보면 span아래 div가 붙는다.

 

성능상의 장점

- DocumentFragment를 이용하여 append를 할시 메모리상에서만 일어나기 때문에 브라우저를 다시 렌더링(Reflow, Repaint) 하지 않는다. 즉 마지막 body에 append할때만 다시 렌더링 한다.

 

- 첫번째 방법과다르게 element에 append를 한다면 append할때 마다 화면을 다시 그린다. 성능의 차이가 날수밖에 없다. span에 append를 했지만 불필요한 span이 body에 붙고 span을 지우려면 지운다음 다시 렌더링을 해야하기 때문이다.