JavaScript 성능 최적화 문서 조각 만들기(document.createDocumentFragment)_javascript 팁

브라우저에서 document.body(또는 다른 노드)에 노드를 추가하면 페이지가 업데이트되고 이 변경 사항이 반영됩니다. 소량의 업데이트의 경우 하나씩 루프를 삽입하는 것도 잘 작동합니다. 사용. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

for(var i=0;i< 5;i ){
var op = document.createElement("span")
var oText = document.createTextNode(i)
op.appendChild(oText); 🎜>document.body.appendChild(op);
}

그러나 문서에 많은 양의 데이터(예: 1w)를 추가하려는 경우 노드를 하나 추가하면 됩니다. 위의 코드와 같이 하면 이 과정이 매우 느려질 수 있습니다.
이 문제를 해결하기 위해 createDocumentFragment() 메서드를 도입할 수 있는데, 이는 문서 조각을 생성하고 여기에 삽입할 새 노드를 연결한 후 문서에 한꺼번에 추가하는 것입니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var oFragmeng = document.createDocumentFragment(); //먼저 문서 조각 만들기
for(var i=0;i<10000;i ){
var op = document.createElement("span")
var oText = document.createTextNode(i) ;
op.appendChild(oText);
oFragmeng.appendChild(op); //먼저 문서 조각에 추가합니다.
}
document.body.appendChild(oFragmeng) ; //마지막 일회성 문서에 추가

테스트 후 IE 및 Firefox에서 성능이 크게 향상되었습니다. 직접 테스트해 볼 수 있습니다.
프런트엔드 성능 최적화는 세부 사항부터 시작됩니다. 주의를 기울이지 않으면 결과가 심각해집니다.

PS: 이 최적화는 루프에 HTML 코드를 추가하는 것과 다소 유사합니다.