ホームページ > 記事 > ウェブフロントエンド > JavaScript文書断片化操作例 分析_JavaScriptスキル
JavaScript文書断片化操作例 分析_JavaScriptスキル
- WBOYオリジナル
- 2016-05-16 15:26:011101ブラウズ
この記事では、例を通じて JavaScript ドキュメントの断片化の操作方法を分析します。参考のために皆さんと共有してください。詳細は次のとおりです:
ドキュメントの断片化を使用すると、場合によってはページの効率が向上することがあります。
DOM を操作する Javascript は、非常にパフォーマンスを重視するプロセスです。場合によっては、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 までご連絡ください。