DocumentFragment

Creator

Creator

Seonglae Cho

Created

Created

2023 Aug 8 5:35

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Aug 8 5:38

Refs

Refs

lightweight version of Document

similar to

Minimize
Page Reflow

한번만 DOM 접근으로 적용

DocumentFragment - Web APIs | MDN

The DocumentFragment interface represents a minimal document object that has no parent.

DocumentFragment - Web APIs | MDN

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

DocumentFragment - Web APIs | MDN

DocumentFragment 객체로, 성능 좋게 DOM 조작하기

0. 들어가기에 앞서 우리는 DOM 트리에 노드를 추가할 때 createElement와 appendChild를 사용하곤 한다. const p = document.createElement("p"); // 1. 노드를 만들고 document.body.appendChild(p); // 2. 생성한 요소를 DOM 트리에 추가! 그런데 만약 20개에 달하는 노드를 추가해야할 때는 어떻게 할 수 있을까? appendChild 와 반복문을 사용할 수 있다. const parent = document.querySelector('#parent'); for (let i = 1; i

DocumentFragment 객체로, 성능 좋게 DOM 조작하기

https://mong-blog.tistory.com/entry/DocumentFragment-객체로-성능-좋게-DOM-조작하기

DocumentFragment 객체로, 성능 좋게 DOM 조작하기

Recommendations

/////////////