suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für einen JavaScript-Dokumentfragmentierungsvorgang: Analyse_Javascript-Kenntnisse

Beispiel für einen JavaScript-Dokumentfragmentierungsvorgang: Analyse_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:26:011151Durchsuche

In diesem Artikel wird die Funktionsweise der JavaScript-Dokumentfragmentierung anhand von Beispielen analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Verwendung der Dokumentfragmentierung kann in einigen Fällen die Seiteneffizienz verbessern.

Javascript-Betrieb von DOM ist ein sehr leistungsintensiver Prozess. In einigen Fällen muss jede Operation, die wir am DOM ausführen, eine „Neuanordnung“ auslösen, was sich im Allgemeinen erheblich auf den Energieverbrauch auswirkt DOM-Operationen so weit wie möglich reduzieren, um die „Neuanordnung“ zu reduzieren.

Angesichts des Prozesses des zyklischen Betriebs von DOM entscheiden wir uns für die Verwendung eines Dokumentfragments (creatDocumentFragment), fügen den Inhalt, der dem DOM hinzugefügt werden muss, auf einmal dem Dokumentfragment hinzu und fügen dann das Dokumentfragment dem DOM hinzu Baum, damit er effektiv sein kann Reduzieren Sie die Anzahl der DOM-Operationen. 

<!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>

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：node.js require() Quellcode interpret_node.jsNächster Artikel：node.js require() Quellcode interpret_node.js

In Verbindung stehende Artikel

Mehr sehen