JavaScript 팁 DocumentFragment를 사용하여 DOM 렌더링 속도 향상_javascript 팁

누구나 JavaScript를 사용할 때 DOM 작업이 가장 일반적입니다. 웹 프런트 엔드 기술이 발전함에 따라 Ajax 요청을 통해 데이터를 얻은 다음 페이지 요소의 콘텐츠를 업데이트하는 등 DOM 요소를 작동하기 위해 JS를 점점 더 많이 사용하고 있습니다. , 일반적으로 node.appendChild()와 유사한 메서드를 사용하여 이 작업을 완료합니다. 이 메서드는 버퍼링되지 않습니다. 즉,appendChild 메서드를 호출할 때마다 브라우저가 페이지를 다시 렌더링합니다. 물론, 이 방법을 사용하는 데는 문제가 없습니다. 왜냐하면 우리는 일반적으로 소수의 DOM 노드를 업데이트하므로 큰 성능 문제를 일으키지 않습니다. 그러나 많은 수의 DOM 노드가 업데이트되면 성능 차이가 발생합니다. 점점 더 분명해질 것입니다. 브라우저는 페이지, 특히 일부 복잡한 태그를 지속적으로 렌더링해야 하기 때문에 많은 수의 다시 렌더링은 성능을 소모하고 사용자 경험에 영향을 미칩니다. 그렇다면 이러한 유형의 DOM 작업의 효율성을 향상시킬 수 있는 좋은 방법이 있습니까?

개발 중에 이러한 상황이 자주 발생하지는 않지만 JS가 DocumentFragment 메커니즘을 제공한다는 점을 이해하는 것이 필요합니다. 버퍼링 메커니즘은 DOM을 먼저 제공합니다. 노드가 생성된 후 DocumentFragment 객체가 페이지에 추가됩니다. 이때 모든 노드가 한 번에 렌더링되므로 브라우저의 부담이 크게 줄어듭니다. 예를 들어 다음 코드는

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

function CreateNodes() {
for(var i = 0;i < 10000;i ){
var tmpNode = document.createElement("div")
tmpNode.innerHTML = "test" i "
";
document.body.appendChild(tmpNode)
}
}
function CreateFragments(){
varragment = document.createDocumentFragment(); 🎜>for(var i = 0;i < 10000;i ){
var tmpNode = document.createElement("div")
tmpNode.innerHTML = "test" i "
";
fragment.appendChild(tmpNode);
}
document.body.appendChild(fragment);
}

위 코드는 두 가지 기능을 제공합니다. , 각각 일반적인 DOM 메서드와 DocumentFragment를 사용하여 10,000개의 div 노드를 페이지에 추가합니다. 두 번째 방법은 첫 번째 방법보다 훨씬 빠릅니다. 이는 div 태그의 단순한 타일 추가일 뿐입니다. 더 복잡한 HTML 태그이거나 다중 레이어 중첩 태그인 경우 성능 차이가 더 분명해집니다.
위의 예를 통해 JavaScript 애플리케이션을 개발할 때 이렇게 많은 수의 노드가 발생하는 경우 대체 솔루션으로 DocumentFragment를 사용하는 것이 좋습니다.