DOM

가상 DOM 없이 효율적으로 DOM 요소 추가하기 (feat. DocumentFragment 노드)

가상 DOM을 사용하지 않고 성능을 위해 최적화를 한다면 어떻게 해야 할까? → DocumentFragment 노드를 사용하자. DOM을 변경하는 처리에 비용이 많이 든다. 특히 DOM 요소 노드를 반복해서 추가(e.g. appendChild)하는 건 매우 비효율적이다. 따라서 가급적 DOM을 변경하는 횟수를 줄이는 게 성능에 유리하다. 미리 가짜 document를 만들어 여기에 요소들을 추가한 다음, 한번에 document에 추가해서 진짜 document는 한 번만 조작하도록 해보자. DOM 변경 자바스크립트 코드에서 DOM API로 DOM이나 CSSOM을 변경하면 → 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 → 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 리플로우(refl..