Warum ist "element.innerHTML + =" schlechter Code?

Ich habe schon gesagt, nicht Anhängen Sachen mit element.innerHTML += ... wie diese:

var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");

elm.innerHTML += str; //not a good idea?

Was ist Los mit ihm?, welche anderen alternativen habe ich?

InformationsquelleAutor der Frage ajax333221 | 2012-07-17

24

Jedes mal innerHTML gesetzt ist, wird das HTML geparst, ein DOM gebaut, und in das Dokument eingefügt. Das dauert seine Zeit.

Zum Beispiel, wenn elm.innerHTML hat Tausende von divs, Tabellen, Listen, Bilder, etc., dann ruft .innerHTML += ... ist zu führen, dass der parser zu re-analysieren all das Zeug immer wieder. Dies könnte auch brechen Verweise auf bereits errichteten DOM-Elemente und dazu führen, dass andere chaos. In Wirklichkeit ist alles, was Sie tun möchten, ist fügen Sie ein neues element an das Ende.

Es ist besser, rufen Sie einfach appendChild:
```
var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);
```
Diese Weise werden die vorhandenen Inhalte elm sind nicht erneut analysiert.

HINWEIS: Es ist möglich, dass [einige] Browser sind schlau genug, um die Optimierung der += Betreiber und nicht re-analysieren Sie die vorhandenen Inhalte. Ich habe nicht recherchiert.

InformationsquelleAutor der Antwort Mike Christensen
13

Ja, elm.innerHTML += str; ist eine sehr schlechte Idee.

Den typischen "browser Wiederaufbau DOM" Antwort ist wirklich nicht gerecht:
1. Zuerst den browser gehen müssen durch die einzelnen Elemente unter der Ulme, die jeweils Ihre Eigenschaften und all Ihre Texte & Kommentare & Prozess-Knoten, und entkommen Sie zu bauen, die Ihnen einen string.
2. Dann haben Sie eine lange Zeichenfolge, die Sie anfügen. Dieser Schritt ist ok.
3. Dritten, beim setzen von innerHTML, browser entfernen Sie alle Elemente, Eigenschaften und Knoten es ging gerade durch.
4. Dann analysiert die Zeichenfolge, bauen Sie aus allen Elementen, Eigenschaften und Knoten, die es nur zerstört, um einen neuen DOM-fragment, das ist größtenteils identisch.
5. Schließlich befestigen Sie die neuen Knoten, und der browser layout die ganze Sache. Dies ist möglicherweise vermeidbar (siehe alternative unten), aber selbst wenn der angehängte Knoten(s) erfordert ein layout, alte Knoten haben Ihre layout-Eigenschaften zwischengespeichert anstatt neu berechnet aus frisch.
6. Aber es ist noch nicht fertig! Die browser haben ebenfalls zum recyceln Sie alte Knoten durch Scannen alle javascript-Variablen.
Probleme:
- Einige Eigenschaften können nicht reflektiert werden, die von HTML, zum Beispiel der aktuelle Wert der <input> gehen verloren und werden wieder auf den ursprünglichen Wert in das HTML-Format.
- Wenn Sie irgendwelche event-Handler, die auf dem alten Knoten, werden Sie zerstört, und Sie haben, fügen Sie alle von Ihnen.
- Wenn Ihr js-code auf allen alten Knoten, Sie werden nicht zerstört, sondern Sie werden verwaist.
  Sie gehört zum Dokument, aber nicht mehr in den DOM-Baum.
  Wenn Ihr code auf Sie zugreifen, kann nichts passiert oder es möglicherweise Fehler.
- Beide Probleme heißt, es ist unfreundlich mit js plugins - die plugins fügen Sie Handler oder erinnern Sie sich an alten Knoten und führen zu Speicherverlust.
- Wenn Sie in die Gewohnheit zu tun, DOM-manipulation mit innerHTML, können Sie versehentlich ändern Sie die Eigenschaften oder andere Dinge tun, die Sie nicht wollen.
- Je mehr Knoten man hat, desto ineffizienter ist diese, die mehr Akku-Saft für nichts.
Kurz gesagt, es ist ineffizient, es ist auch fehleranfällig, es ist einfach faul und uninformiert.

Die beste alternative ist - Element.insertAdjacentHTMLdass ich habe nicht gesehen, die anderen Antworten erwähnt:

elm.insertAdjacentHTML( 'beforeend', str )

Fast gleichen code, ohne innerHTML Probleme.
Kein rebuild, kein handler verloren, kein Eingang reset, weniger Fragmentierung des Speichers, keine schlechte Angewohnheit, kein Handbuch element Kreationen und Aufgaben.

Es erlaubt, Sie zu injizieren html-string in Elemente in einer Zeile, einschließlich der Eigenschaften, und erlaubt sogar, yow, um zu injizieren, composite und mehrere Elemente.
Seine Geschwindigkeit ist optimiert -
in Mozilla ' s testen, ist es 150 mal schneller.

Den Fall, dass jemand Ihnen sagen es ist nicht cross-browser, es ist so nützlich, dass es HTML5 standard und in alle Browser.

Nicht immer schreiben elm.innerHTML+= wieder.

InformationsquelleAutor der Antwort Sheepy
4

Die alternative ist .createElement().textContentund .appendChild(). Anhängen mit += ist nur ein Problem wenn man sich mit einer Menge Daten.

Demo: http://jsfiddle.net/ThinkingStiff/v6WgG/

Skript
```
var elm = document.getElementById( 'targetID' ),
    div = document.createElement( 'div' );
div.textContent = 'goodbye world';
elm.appendChild( div );
```
HTML -
```
<div id="targetID">hello world</div>
```
InformationsquelleAutor der Antwort ThinkingStiff
1

Wenn der Benutzer ältere Versionen des IE (oder vielleicht mit neueren auch noch nicht versucht), innerHTML auf eine td werden Probleme verursachen. Tabelle Elemente im IE nur Lesen, tsk tsk tsk.

InformationsquelleAutor der Antwort Tim

Ich nur auf die harte Tour gelernt, warum innerHTML schlecht ist, in diesem code unten, wenn Sie die innerHTML-chrome verliert das onclick-Ereignis jsFiddle

var blah = document.getElementById('blah');
var div = document.createElement('button');
div.style['background-color'] = 'black';
div.style.padding = '20px;';
div.style.innerHTML = 'a';
div.onclick = () => { alert('wtf');};

blah.appendChild(div);

//Uncomment this to make onclick stop working
blah.innerHTML += ' this is the culprit';

<div id="blah">
</div>

InformationsquelleAutor der Antwort Adam Sparks

0

Mike ' s Antwort ist vermutlich die bessere, aber eine andere überlegung ist, dass Sie den Umgang mit strings. Und bei der Verkettung von Strings in JavaScript kann wirklich langsam, vor allem in einigen älteren Browsern. Wenn du nur das verketten kleine Fragmente von HTML-dann ist es wohl nicht bemerkbar, aber wenn Sie einen großen Teil der Seite, die Sie Anhängen etwas wiederholt Sie sehr gut sehen konnte, eine deutliche pause im browser.

InformationsquelleAutor der Antwort jjathman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Skript

HTML -