Beispiel für einen JavaScript-Dokumentfragmentierungsvorgang: Analyse

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

WBOY

Freigeben： 2016-05-16 15:26:01

Original

1129 Leute haben es durchsucht

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>

Nach dem Login kopieren

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