Ich habe vor kurzem bei einem neuen Unternehmen angefangen zu arbeiten und sie haben eine bestehende Anwendung mit 1000 Zeilen Javascript-Code. Die Baseline enthält Dutzende von JS-Dateien mit leicht über 10.000 Zeilen benutzerdefinierten Code, sie verwenden auch mehrere Drittanbieter-Bibliotheken wie Jquery, Livequery, JQTransform und andere. Eine der Hauptbeschwerden, die sie von den Benutzern erhalten haben, ist die Langsamkeit des clientseitigen Betriebs der Website. Ich wurde damit beauftragt, die Leistung von JS zu optimieren und zu verbessern. Mein erster Schritt wird natürlich sein, auf die neueste Jquery-Bibliothek umzusteigen und JSMin in den Build-Prozess einzubinden. Ansonsten frage ich mich, ob jemand Tipps hat, wo man mit der Optimierung einer so großen Codebasis beginnen kann?
Antworten
Zu viele Anzeigen?
Sie könnten versuchen, die DynaTrace Ajax Edition zu installieren ( kostenloser Download hier ) und sehen Sie, was Sie daraus schließen können. Es unterstützt nur IE8 ich glaube, aber das ist wahrscheinlich so gut wie jeder Ort zu starten. Es hat eine viel gründlichere und verständliche Profiler-Schnittstelle als entweder Firebug oder Chrome, meiner Meinung nach tun.
Eine Sache, die mir auffällt, ist "Livequery", die, wenn sie nicht verwendet wird sehr kann zu gigantischen Leistungsproblemen führen.
Denken Sie daran: In einer so großen Codebasis, die im Laufe der Zeit und möglicherweise nicht mit den modernsten" Javascript-Techniken entwickelt wurde, werden Ihre wirklichen Probleme sein schlechte Algorithmen in Ihrem eigenen Code. Neuere Bibliotheken und Minifizierungs-/Optimierungsmethoden sind gute Ideen, aber als Erstes müssen Sie die Seiten finden, die träge zu sein scheinen, und dann ein Profiling durchführen. Meiner Erfahrung nach werden Sie in einer großen, alten Codebasis wie dieser etwas Schreckliches finden wirklich schnell. Installieren Sie ein Desktop-Gadget, das die CPU-Auslastung überwacht. Auf diese Weise können Sie feststellen, wann der Seitencode den Browser direkt verlangsamt und nicht nur die Netzwerkverzögerung. Jeder starke Anstieg der CPU-Auslastung des Browsers über einen längeren Zeitraum sollte ein deutliches Warnsignal sein.
Profil dieses Codes. Optimieren Sie nicht etwas, wenn Sie nur das Gefühl haben, dass es optimiert werden könnte. Denken Sie an die 80%-20%-Regel. 80 % der Zeit wird für 20 % des Codes aufgewendet.
Verwenden Sie Googles Werkzeuge zum Verschließen . Sie können Ihren JS-Code optimieren und reduzieren, so dass er zumindest auf den Computern Ihrer Kunden schneller geladen wird.
Der richtige Weg ist Engpässe finden . Wenn Sie feststellen, dass die App tatsächlich langsam ist, können Sie mit Firebug um ein Profil Ihres Codes zu erstellen und festzustellen, wie viel aufgewendete Zeit für jede Funktion und wie viele Male sie wurden aufgerufen. Anhand dieser Informationen lässt sich ziemlich leicht feststellen, in welchen Bereichen Verbesserungen erforderlich sind.
Im Allgemeinen sind die Engpässe einer Webanwendung:
- Ausführliches Arbeiten mit dem DOM (Repaints, Reflows)
- Umfangreiche Netzwerkkommunikation (AJAX)
Sie haben einen langen Weg vor sich, mein Freund, und ich beneide Sie nicht darum.
Hier sind einige Techniken zur Leistungsoptimierung für Javascript die ich aufgeschrieben habe, nachdem ich kürzlich in einer ähnlichen Rolle wie der Ihren gearbeitet habe.
Sie sind in 5 große Kategorien eingeteilt, die sich nach dem Leistungsunterschied richten, den sie bewirken.
Angesichts dessen, was Sie über die Codebasis gesagt haben, denke ich jedoch, dass der zweite Abschnitt über Verwalten und aktives Reduzieren Ihrer Abhängigkeiten ist die wichtigste, vor allem:
- Änderung des Codes, um Bibliotheksabhängigkeiten zu reduzieren, und
- Verwendung eines Post-Load-Abhängigkeitsmanagers für Ihre Bibliotheken und Module
Alle 25 dort aufgeführten Techniken sind jedoch nützlich, um die Leistung zu verbessern.
Ich hoffe, dass Sie sie nützlich finden.
