TIL - DocumentFragment를 활용하여 DOM 조작을 최적화하고 성능을 향상

DocumentFragment란 DOM 조작을 최적화하고 성능을 향상하기 위해 사용되는 가벼운 문서 구조

 

DocumentFragment의 정의와 장점

---

DocumentFragment은 DOM(Document Object Model)의 일부로서, 가상의 문서 객체를 나타내고 실제 문서에 부착되지 않은 작고 가벼운 문서 구조를 저장하는 데 사용된다.
이것은 메모리 상에서 DOM 노드들을 관리하면서 리플로우(reflow)를 방지하고 성능을 최적화하는 데 도움이 된다.

 

여기서 리플로우(reflow)란 브라우저가 렌더링 과정에서 화면에 요소를 표시하기 위해 요소의 크기, 위치, 스타일 등을 계산하고 배치하는 과정을 말한다.
이 과정은 브라우저가 문서의 구조나 스타일에 변경이 생겼을 때, 해당 변경에 대한 영향을 모든 관련된 요소에 적용하여 다시 계산하고 다시 그리는 작업으로 성능을 향상시키기 위해서는 가능한 리플로우를 최소화하는 것이 중요하다!

 

DocumentFragment를 사용하면 여러 DOM 요소를 프래그먼트에 추가하고 한 번에 DOM에 삽입함으로써 리플로우를 최소화가 가능하다.

 

DocumentFragment 코드에 적용

// 화면에 영화 목록 표시 함수
function displayMovies(movies) {
    const movieList = document.getElementById("movie-list");

    movies.forEach((movie, index) => {
        const movieCard = createMovieCard(movie, index); // 영화 카드 생성
        movieList.appendChild(movieCard);
    });
};

위 코드에서는 각 영화 카드를 생성할 때마다 실제 DOM에 바로 추가하고 있었다. 이렇게 되면 여러 개의 영화 카드를 추가할 때마다 실제 DOM에 접근하여 요소를 추가하므로 성능이 저하될 수 있었다.

 

// 화면에 영화 목록 표시 함수
const displayMovies = (movies) => {
    const movieList = document.getElementById("movie-list");
    const fragment = document.createDocumentFragment(); // DOM 조작을 위한 프래그먼트 생성

    movies.forEach((movie, index) => {
        const movieCard = createMovieCard(movie, index); // 영화 카드 생성
        fragment.appendChild(movieCard); // 프래그먼트에 영화 카드 추가
    });
    
    movieList.appendChild(fragment); // 프래그먼트를 한 번에 DOM에 추가
};

 DocumentFragment를 생성하여 여기에 영화 카드를 추가한 후에 한 번에 실제 DOM에 추가하면 여러 개의 DOM 조작을 하나로 합쳐서 렌더링 성능을 향상했다.