Welche Best Practices für die Client-Server-Interaktion gibt es?
Ich baue eine Website für die Arbeit, und eines der wichtigeren Features ist ein reiches Inhaltsraster, das Daten anzeigt. Standardmäßig werden nur 20 Elemente pro Seite angezeigt. In der Datenbank befinden sich jedoch ~ 200 Elemente, die gefiltert, sortiert und durchsucht werden können.
Unser Verkaufs- und Marketingteam hat außerdem eine "Alles auflisten" -Funktion angefordert, damit sie alle Daten an einem Ort anzeigen und durchblättern können, anstatt die Daten durchblättern zu müssen.
Dieses gesamte System wird mit ASP.Net MVC auf der Serverseite, jQuery und Flexigrid auf der Clientseite erstellt und verwendet JSON, um Daten zwischen den beiden über AJAX auszutauschen.
Ich habe den eigentlichen Datenübertragungsteil ziemlich solide bekommen. Eine Seite mit 20 Ergebnissen benötigt 800 ms für die gesamte Anfrage (POST eine Anfrage an den Server über Flexigrid und die Antwort erhalten). Es ist eher die clientseitige Verarbeitung, die eine Weile dauert.
Ich könnte einige der clientseitigen Verarbeitung auf den Server übertragen. Dies würde jedoch dazu führen, dass die serverseitige Operation länger dauert und die Größe des zurückgegebenen Dokuments viel größer wird. Kein Problem in Situationen mit einer Highspeed-Internetverbindung ... aber das ist nicht unbedingt der Fall.
Die andere Möglichkeit, die ich habe, besteht darin, so viele Daten wie möglich herunterzuladen und den größten Teil der Datenverarbeitung auf den Client zu verlagern. Dies verkürzt die Anforderungszeit auf im Wesentlichen Null (nur geänderte Elemente werden abgerufen und nicht der gesamte Datensatz). Es wird auf Maschinen mit schnellen CPUs und viel RAM ziemlich gut funktionieren, aber das ist auch nicht unbedingt der Fall.
Da mindestens eine Person dies als "keine echte Frage" markiert hat, lassen Sie mich klarstellen ...
- Was kann ich möglicherweise tun, um die clientseitigen Verarbeitungszeitprobleme zu beheben, ohne so viel Verarbeitung auf den Server zu verschieben, dass es zu einem Problem mit der Datenübertragung kommt?
- Welche Best Practices gibt es, wenn es darum geht, die clientseitige Verarbeitung mit der serverseitigen Verarbeitung auszugleichen?
- Ist es besser, auf der Seite des Servers oder des Clients zu irren?
- Mit welchen Werkzeugen kann ich diesen Austausch besser optimieren, damit es nicht weiter schief geht?
3 Antworten
Was bearbeiten Sie auf der Client-Seite, die so lange dauert? Die Verarbeitung eines JSON-Objekts (auch eines sehr großen) sollte nicht zu intensiv sein.
Viele DOM-Lookups beim Schreiben Ihrer Daten-Client-Seite könnten die Dinge verlangsamen. Das Reduzieren von DOM-Lookups kann die Leistung erheblich verbessern. Ich glaube, gute Praxis für den Abgleich von Server & amp; clientseitige Verarbeitung führt zu einem Fehler auf dem Server. Da der Server unter Ihrer Kontrolle steht, können Sie jederzeit Ihren Server aktualisieren. Indem Sie den Großteil der Verarbeitung auf dem Server behalten, wird es auch für mobile Geräte und ältere Computer einfacher.
Sie sollten AJAX & amp; clientseitige Funktionen in einer Weise, die die Benutzererfahrung verbessert. Laden und verarbeiten Sie Daten so, wie sie von den Benutzern angefordert werden. Indem Sie nur das laden, was Sie anfordern, können Sie die Belastung Ihres Servers verringern. Klient.
Wenn Sie die gleiche Art von Daten immer wieder anfordern, können Sie sowohl bei Server & amp; clientseitige Zwischenspeicherung Durch die Verwendung von Caching können Sie die Anfragezeiten und / oder die Bandbreite reduzieren.
Wie sich herausstellt, liegt das Problem eher bei den JavaScript-Engines auf der Clientseite als bei den Daten, mit denen ich arbeite. Ich habe den Großteil des Tages damit verbracht, den Prozess zu vergleichen und verschiedene Operationen zu planen.
In Chrome läuft alles schnell. Alles läuft in Firefox ziemlich schnell (dachte nicht so schnell wie Chrome). Der wirkliche Performance-Nachzügler ist der Internet Explorer.
Wenn ich den gesamten Datensatz lade - alle 200 Zeilen -, versucht Flexigrid eine Nachbearbeitung auf jeder Zelle in der Tabelle durchzuführen. Wie Sie auf dem Screenshot sehen können, hat jede Zeile 29 Zellen ... also schauen wir uns eine Reihe von Formatierungsoperationen an, insgesamt 5800 mal.
Ich konnte einige der teureren Operationen (dh das Erstellen von jQuery-Objekten) aus der Zell-Schleife der unteren Ebene herausziehen, so dass sie nur einmal pro Zeile ausgeführt werden, aber letztendlich bin ich immer noch mit IE-bezogener Leistung konfrontiert Probleme.
Um Ihnen einige reale Benchmarks zu geben, setze ich den Code so, dass er die Gesamtzeit ausspuckt, bevor er bestimmte Ereignisse erreicht:
-
populatewird ausgelöst, wenn der Browser zuerst die XHR-Anforderung sendet -
addDatawird ausgelöst, nachdem die Anforderung zurückgegeben wurde und bevor das JSON-Objekt analysiert wird -
addCellPropwird nach dem ersten Parsing von Daten ausgelöst und durchläuft jede Zelle in der Tabelle -
donewird ausgelöst, wenn alles fertig ist
Verarbeitung von 20 Datenzeilen (Standard):
%Vor%Verarbeitung des vollständigen Datensatzes (179 Zeilen auf diesem System):
%Vor% Die teuerste Operation ist zwischen addCellProp und done . Ich bin durchgegangen und habe den Code so effizient wie möglich gemacht, aber es gibt nur so viel, was Sie tun können, wenn Sie die vielen Iterationen eines Datensatzes durchlaufen, insbesondere wenn Sie das DOM manipulieren.
Ich habe Flexigrid modifiziert (trotz vieler Empfehlungen nicht), um das DOM so wenig wie möglich zu berühren, und das hat die Dinge tatsächlich ziemlich beschleunigt. Als ich mit dieser Forschung begann, brauchte IE9 zwischen 20 und 30 Sekunden, um das Ereignis done zu treffen.
Die unglückliche Wahrheit hier ist, dass nicht alle Plattformen gleich sind, und IE scheint nicht die beste Engine für die Arbeit mit Daten in der Anzeige auf diese Weise zu sein.
Ein besserer Ansatz könnte sein, die HTML-Tabelle auf der Serverseite zu erstellen und zu manipulieren und das gesamte Ding (Markup und alles) an den Browser zu senden, wenn IE-Benutzer dies verlangen und nicht, dass das Markup aus einem rohen JSON erstellt wird Objekt.
Was kann ich möglicherweise tun, um die clientseitigen Verarbeitungszeitprobleme zu beheben, ohne so viel Verarbeitung auf den Server zu verschieben, dass es zu einem Problem mit der Datentransferzeit kommt?
Kommen die Daten aus einer Datenbank? Wenn ja, beschränken Sie die Daten dort. Dies ist, was die dB ist gut. Ich benutze Flexigrid und behalte alle Paging-Sortierung und Filterung dort. Die Datenbank gibt nur die angeforderten Daten sortiert und gefiltert zurück. Alles, was der Server tun muss, ist es zurückzugeben und der ganze Client muss es nur rendern.
Welche Best Practices gibt es, wenn es darum geht, die clientseitige Verarbeitung mit der serverseitigen Verarbeitung auszugleichen?
Behalten Sie das Client-Seitenlicht so gut wie möglich
Ist es besser, auf der Seite des Servers oder des Clients zu irren?
Yes Server hat viel mehr Power
Welche Tools kann ich verwenden, um diesen Austausch besser zu optimieren, damit die Dinge nicht weiter schief gehen?
IE-Entwicklertools verwenden die Registerkarte "Netzwerk", um zu sehen, was über die Leitung kommt
Tags und Links asp.net-mvc ajax flexigrid