본 글은 자바스크립트 문서 조각화 작업 방식을 예시를 통해 분석한 것입니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
경우에 따라 문서 조각화를 사용하면 페이지 효율성이 향상될 수 있습니다.
Javascript 운영 DOM은 성능 집약적인 프로세스입니다. 어떤 경우에는 DOM 루프 작업을 수행해야 합니다. DOM에서 수행하는 모든 작업은 일반적으로 에너지 소비에 심각한 영향을 미치는 "재배열"을 유발합니다. DOM 작업을 최대한 줄여 "재배열"을 줄입니다.
DOM의 순환 작업 과정을 살펴보면서 문서 조각(creatDocumentFragment)을 사용하고 DOM에 추가해야 할 내용을 문서 조각에 한 번에 추가한 다음 문서 조각을 DOM에 추가하는 방식을 선택했습니다. DOM 작업 횟수를 줄이세요.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文档碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
var temp = document.createDocumentFragment();//文档碎片(当把文档碎片付给某节点时，只是把文档碎片中的子节点付给了某节点，它本身并没有插入到这个节点中)
for (var i=0; i<100; i++) {
var test =document.createElement('div');//创建一个节点
test.innerHTML = 'aaa' + i;//给节点添加内容
temp.appendChild(test);//把创建的节点插入到temp文档中
}
document.body.appendChild(temp);//把temp文档插入到body末尾
</script>
</body>
</html>
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
