DocumentFragment 간단 정리

DocumentFragment

수정해도 브라우저 렌더링에 영향을 끼치지 않는 부모가 없는 document 객체

부모가 없는 아주 작은 document 객체

Document 의 경량화 된 버전으로 사용

브라우저 렌더링의 최적화(무분별한 렌더링 방지)를 위해 사용됨

노드로 구성된 문서 구조의 일부를 저장

문서 트리구조의 일부가 아니기 때문에 변경해도 Document 의 렌더링에 영향을 미치지 않음(reflow 포함)

• DocumentFragment 를 사용하지 않은 DOM 트리 수정

    function addElements() {
        let target = document.getElementById("target")
  
        for (let i = 0; i < 100; i++) {
            let div = document.createElement('div)
  
            div.innerText = 'div';
            target.appentChild(div)
        }
    }
  

  위와 같은 코드의 경우 target 노드의 하위 노드를 추가하는 작업(브라우저 Workflow)를 100번 하게되고 성능 저하를 일으킴

• DocumentFragment 를 사용한 DOM 트리 수정

  function addElements() {
      let target = document.getElementById("target");
      let fragment = document.createDocumentFragment();
  
      for (let i = 0; i < 100; i++) {
          let div = document.createElement('div)
  
          div.innerText = 'div';
          fragment.appentChild(div)
      }
  
      target.appendChild(fragment.cloneNode(true))
  }
  

  위와 같은 코드의 경우 DocumentFragement 에 하위 노드를 100번 추가하지만 브라우저 workflow 를 진행하진 않음

  작업이 끝난 DocumentFragment 를 복사해서 target 노드에 추가함

  target 노드를 변경하는 작업(브라우저 workflow)를 한번만 진행함으로써 성능에 지장을 줄 가능성이 줄어듦