Möglichkeiten, um die Leistung zu erhöhen, wenn große Wert auf innerHTML gesetzt

Question

Ich versuche, eine große (200K) Antwort auf Innerhtml eines Knotens zu setzen. Das Ziel ist eine bessere Zeit als 2,7 sec im Internet Explorer 6. Irgendwelche Ideen ?,

Dank

Answer 1

Ich habe gehört, dass innerText ist etwa zwei Mal schneller als innerHTML in IE zu erhalten. Nicht sicher, ob es wahr ist, aber es könnte einen Versuch wert sein.

if (window.ActiveXObject) { // we're using IE 
    document.getElementById('myElement').innerText = 'Bla bla bla bla'; 
    // or create a textnode: 
    var txt = document.createTextNode('Lorem ipsum'); 
    document.getElementById('myElement').appendChild(txt); 
} else { 
    // other code here 
} 

aktualisieren: Beachten Sie, wenn Sie den HTML-Code myElement ändern möchten, tun innerText nicht verwenden - die HTML im Klartext sichtbar ist, wie wenn Sie < und > verwendet haben.

Answer 2

Dadurch wird es nicht schneller passieren, aber es wird den Browser daran hindern, den Benutzer zu blockieren; sie können auch weiterhin die Seite nutzen, während dies im Hintergrund geschieht:

function asyncInnerHTML(HTML, callback) { 
    var temp = document.createElement('div'), 
     frag = document.createDocumentFragment(); 
    temp.innerHTML = HTML; 
    (function(){ 
     if(temp.firstChild){ 
      frag.appendChild(temp.firstChild); 
      setTimeout(arguments.callee, 0); 
     } else { 
      callback(frag); 
     } 
    })(); 
} 

es verwenden:

var allTheHTML = '<div><a href="#">.............</div>'; 
asyncInnerHTML(allTheHTML, function(fragment){ 
    myTarget.appendChild(fragment); // myTarget should be an element node. 
}); 

Diese Technik wird länger dauern als Normal innerHTML aber der Benutzer in der Lage, weiter zu machen Verwenden Sie Ihre Website, ohne eine Verzögerung zu bemerken.

Answer 3

Zunächst einmal würde ich sicherstellen, dass Ihr HTML so einfach wie möglich ist. Als minimale Struktur Markup wie möglich. Verwenden Sie CSS überall, einschließlich seiner kaskadierenden Funktion, so dass Sie das Klassenattribut nicht überall einstellen usw.

Dann versuchen Sie weitere Forschung in den besten Methoden pro Browser. Zum Beispiel, einige machen es besser, indem sie DOM-Objekte erstellen, einige setzen alles auf die innereHTML eines einzelnen Nicht-Baum-DOM-Knotens und fügen es dann der Struktur usw. hinzu. Ich schlage vor, Sie lesen Quirksmode.org's Benchmark - W3C DOM vs. innerHTML.

Sie werden wahrscheinlich auch ein Skript wie JimmyP verwenden möchten, um Chunks hinzuzufügen, damit die Benutzeroberfläche des Browsers nicht zu hängen scheint. Obwohl Sie es nicht zu sehr aufteilen möchten, werden Sie unnötigerweise zu viele Seitenaktualisierungen auslösen, wenn Sie sie nicht benötigen.

Answer 4

Bei einer großen HTML-Nutzlast besteht das Risiko des Fehlers "Operation Aborted" in IE 6. Nehmen Sie sich etwas Zeit und lesen Sie die folgenden StackOverflow-Fragen, da der Fehler bei der Aktualisierung des DOM mit innerHTML auftritt und MS nicht hat eine komplettes fix an Ort und Stelle:

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

Answer 5

Machen Sie den HTML so einfach wie möglich, oder verwenden Sie XML mit den kürzesten möglichen Elemente/Attributnamen.

Stil mit CSS (Verwenden Sie kein XML mit XSLT, das könnte noch langsamer beim Parsen/Erstellen sein).

Die Handhabung von XML in verschiedenen Browsern ist leider nicht kompatibel.

Answer 6

warum nicht die Antwort im JSON-Format bringen und auf der Clientseite verarbeiten, zum Beispiel here eine große Menge von Daten wird jedes Mal angesteuert, wenn Sie eine Navigationsoption ändern, und alle Zeilen werden vom Client gerendert.

Answer 7

Stellen Sie sicher, dass Ihr JSON/HTML/Plain Text so einfach wie möglich ist. Die einfachste Lösung wäre, weniger Arbeit zu verrichten, aber wenn Sie wirklich 200k streamen müssen, stellen Sie sicher, dass der Transport zum Browser komprimiert ist, was in Ihrer App und/oder Ihrem Webserver konfigurierbar sein sollte. Gzip'ping-Inhalte (vorausgesetzt, Sie verwenden einen AJAX-freundlichen Service) helfen wirklich, besonders bei einfachem Text.

Schauen Sie sich andere Dinge an wie Loops, die vereinfacht werden können, usw., aber es klingt wie die Sicherheit, dass die Daten bereit sind und dass die Daten effizient über die Leitung gesendet werden können.

Wenn IE der Ausreißer ist und alle anderen Browser gut funktionieren, müssen Sie möglicherweise weitermachen. Es gibt nur so viel, was du tun kannst, aber ich vermute, dass es nicht das Hauptproblem ist.