이 치킨은 DocumentFragment를 처음 사용하여 다시 그리기 최적화

원인: 본 요리의 닭이 쓴 한 단락의 코드 성능이 좋지 않아서 다시 배열하고 다시 그리는 비용이 크다. 지도교사가 나더러 고치라고 한다!
치킨 코드 첨부

	let str = '';
    for(let i = 0; i < arr.length; i++){
     
            str = `
        

            ${
       arr[i].name}**${
       arr[i].age}
        
                    `;
    container.innerHTML += str;
    }

그룹 사이를 옮겨다니며 DOM 세션을 만들고 삽입하고 다른 해결 방법이 있지만 이번에도 새로운 지식을 알게 되었습니다. 바로 Document Fragment입니다.
공식적인 설명은 다음과 같다. DocumentFragment, 문서 세그먼트 인터페이스, 부모 대상이 없는 가장 작은 문서 대상이다.이것은 표준 문서처럼 노드 (nodes) 로 구성된 문서 구조를 저장하는 경량판 문서로 사용된다.문서에 비해 가장 큰 차이점은 DocumentFragment가 실제 DOM 트리의 일부분이 아니기 때문에 DOM 트리의 재렌더링을 촉발하지 않고 성능 등의 문제를 초래하지 않는다는 것이다.
가장 자주 사용하는 방법은 문서 세션을 매개 변수로 사용하는 것이다. (예를 들어, 모든 Node 인터페이스가 Node.appendChild와 Node.insertBefore와 유사한 방법) 이 경우 (append) 추가되거나 (inserted) 삽입된 것은 세션 자체가 아닌 모든 하위 노드이다.모든 노드가 한 번에 문서에 삽입되기 때문에, 이 작업은 각 노드가 각각 문서에 삽입되는 것이 아니라, 후자가 여러 번 다시 렌더링하는 작업만 발생하기 때문이다.
이 인터페이스는 웹 구성 요소 (웹 components) 에서도 매우 유용하다. 요소는 HTML Template Element에 있다.content 속성에는 DocumentFragment가 포함되어 있습니다.
document을 사용할 수 있습니다.createDocumentFragment 메서드나 구조 함수로 빈 DocumentFragment를 만듭니다.

//    
let fragment = document.createDocumentFragment();

나는 자신의 치킨 코드를 다음과 같이 바꾸었다.

    //            ，         
    let fragment = document.createDocumentFragment();
    appendNode(fragment,arr);
    //                
    container.appendChild(fragment);


    function appendNode($node,data){
     
        let div;
        // for      max       （         ）
        for(let i = 0,max = data.length - 1;i < max ; i++){
     
            div = document.createElement('div');
            div.className = 'box';
            div.appendChild(document.createTextNode(data[i].name + '**' + data[i].age));
            // div.appendChild(document.createTextNode(data[i].age));

            $node.appendChild(div);
        }
    }

총괄: 코드량이 몇 줄 증가했지만 성능이 향상되어 왔다 갔다 하는 리셋을 피할 수 있습니다!DocumentFragement를 사용하는 것은 DOM 노드를 직접 조작하는 것보다 훨씬 빠르고, 프로그래머는 새 DOM 노드를 이용하여 DocumentFragement를 조작할 수 있기 때문에 전체 페이지의 DOM을 조작하는 것보다 더욱 쉽다.따라서 대량의 DOM 작업이 필요할 때 가능한 한 DocumentFragement를 사용하면 당신의 응용을 더욱 빠르게 할 수 있습니다!(마지막 한마디는 다른 사람의 총결산에서 나온다)