Web Document.createFragment

function batch(elements) {
  // First write
  const fragment = document.createFragment();
  elements.forEach(el => {
    fragment.appendChild(el);
  });
  this.parentElement.appendChild(fragment);
  
  // Then read
  elements.forEach(el => {
    el.getBoundingClientRect();
  });
}

[스압/데이터주의] 웹 최적화 방식 모음 - 3. Layout 및 렌더링

레이아웃에 영향을 미치는 것들에 대한 정리는 What forces layout/reflow 란 글이 잘 설명해준다. 3.1.1 CSS 속성 개요 분류: CSS 이야기가 나온김에 리플로우에 영향을 미치는 유명한 CSS 요소들을 뽑아보자면 [ CSS Triggers, 20 Tips for Optimizing CSS Performance] 이 있다. 그리고 재계산을 유발하기로 유명한 속성은 다음이 있으며 불필요하게 값을 수정하지 않는게 좋다.

https://black7375.tistory.com/79

DocumentFragment - Web API | MDN

DocumentFragment 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. 의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다. 중요한 차이점은 DocumentFragment는 활성화된 문서 트리 구조의 일부가 아니기 때문에 fragment를 변경해도 문서에는 영향을 미치지 않으며( reflow 포함) 성능에도 영향이 없다는 점입니다. BCD tables only load in the browser

https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment