[프런트엔드] 시나리오 질문: 문서 조각을 사용하여 ul 태그에 여러 노드를 삽입하는 방법

직접 삽입의 문제점: 여러 번 리플로우 됩니다. li가 삽입될 때마다 한 번씩 리플로우되어 성능이 소모됩니다.

여기에서 사용할 수 있습니다문서 조각이 문제를 해결하기 위해.

// 创建文档片段
let node = document.createDocumentFragment()

DocumentFragment노드는 DOM 이 아닌 문서 조각에 하위 요소를 삽입해도 페이지 리플로우가 발생하지 않으며 문서 조각을 DOM 트리에 삽입하면 한 번 리플로우됩니다.

따라서 DocumentFragment를 사용하면 재생할 수 있습니다성능 최적화역할.

원본 HTML:

<ul></ul>

문서 조각을 사용하여 삽입:

<script>
    let ul = document.getElementsByTagName('ul')[0]
    // 创建文档片段
    let node = document.createDocumentFragment()

    for (let i = 0; i < 5; i++) {
      
      
        let temp = document.createElement('li')
        node.appendChild(temp)
    }

    ul.append(node)
</script>

효과:

참고:

DocumentFragment에 대한 심층적인 이해 -Document Fragment- Nuggets(juejin.cn) javascript ul 태그에 여러 개의 li 노드를 삽입하고, createDocumengFragment_use js를 사용하여 기존 ul_foolBirdd의 블로그에 100개의 lis를 삽입합니다.-CSDN 블로그