Wie kann ich Javascript-Profil lesen und optimieren?

Question

Ich habe einen Prozess, der Hunderte von Zeilen in einem Raster über jQuery aktualisiert. Es dauert zu lange, also versuche ich herauszufinden, wo der Flaschenhals zuerst ist, damit ich dort arbeiten kann. Ich habe das Profilerstellungs-Tool von Chrome ausprobiert, es aber schwer verstanden, es zu verstehen (siehe Screenshot). Wie finde ich heraus, welches das Problem ist, da sich Selbst und total völlig unterscheiden?

Answer 1

self ist, wie viel Zeit wurde verbrachte Arbeit direkt in dieser Funktion.

total ist, wie viel Zeit in dieser Funktion und in den aufgerufenen Funktionen verbracht wurde.

Answer 2

Der Flaschenhals hier ist fast garantiert das DOM (Methoden innerhalb des Browsers), nicht irgendein spezifischer JS-Code.

Wenn Sie genügend Daten anzeigen, dass die Aktualisierung den Browser für einige Sekunden sperrt, sollten Sie sich überlegen, stattdessen ein virtuelles Scrollraster zu verwenden. Mein Favorit ist SlickGrid.

Anstatt nur eine riesige Tabelle zu rendern, speichern Sie Ihr Dataset in wesentlich leichteren JS-Objekten im Speicher. (Dies kann folglich in einer Größenordnung geändert und sortiert werden, die schneller ist als die DOM-basierten Aktualisierungen, die Sie gerade ausführen.) SlickGrid rendert nur DOM-Elemente für den Teil der Tabelle, den Sie gerade betrachten, so dass es viel weniger Belastung gibt der Browser.

Sie können auch den Datensatz load small chunks gleichzeitig auswählen (das Back-End wird als einfache Seitennumerierung implementiert), sodass Sie effektiv unendliche Zeilen im Browser mit konstanter Leistung anzeigen können.