JavaScript

  1. JavaScript
  2. 불변성
  3. 스코프
  4. 실행컨텍스트
  5. CI / CD
  6. Ajax, Axios, fetch
  7. XHR - Xml Http Request
  8. 호출 스케줄링
  9. 이벤트 흐름,이벤트 종류, 이벤트 위임
  10. Closure
  11. Map / Set
  12. documentFragment

목차

시작하기에 앞서

  1. 기존에 나는 Virtual Dom이 DocumentFragment와 관련이 있는 줄 알고 있었음 하지만 관련이 없음
  2. VirtualDom은 메모리에 존재하고 DocumentFragment는 메모리에 존재하지 않음
  3. DocumentFragment는 웹 성능 최적화에 쓰일 수 있음 → 사용하는 경우는 본적이 없음

Dom vs DocumentFragment

Dom을 만들어보자

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const DomDivElement = document.createElement("div");

    for (let i = 0; i < 10; i++) {
      let divElement = document.createElement("div");
      divElement.innerText = " i am divElement " + i;
      DomDivElement.appendChild(divElement);
    }
    document.body.appendChild(DomDivElement);
  </script>
</html>

DocumentFragment

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const DocumentFragment = document.createDocumentFragment();

    for (let i = 0; i < 10; i++) {
      let divElement = document.createElement("div");
      divElement.innerText = " i am divElement " + i;
      DocumentFragment.appendChild(divElement);
    }
    document.body.appendChild(DocumentFragment);
  </script>
</html>

무슨 차이가 있는가?

  1. DocumentFragMent를 Dom노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않고 그 자식 노드들만 추가된다.
  2. DocumnetFragment를 Dom에 추가하면 DocumentFragmet 노드의 자식 요소들은 더이상 메모리상에 존재하지 않게된다.

더이상 메모리상에 존재하지 않게 된다 ?

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const DomDivElement = document.createElement("div");

    for (let i = 0; i < 10; i++) {
      let divElement = document.createElement("div");
      divElement.innerText = " i am divElement " + i;
      DomDivElement.appendChild(divElement);
    }
    console.log(DomDivElement);
    document.body.appendChild(DomDivElement);
  </script>
</html>