JavaScript 문서 조각화 작업 예시 분석_javascript 기술
- WBOY원래의
- 2016-05-16 15:26:011104검색
본 글은 자바스크립트 문서 조각화 작업 방식을 예시를 통해 분석한 것입니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
경우에 따라 문서 조각화를 사용하면 페이지 효율성이 향상될 수 있습니다.
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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.