Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie kann ich eine Javascript-Funktion beschleunigen?

Susan Sarandon
Freigeben: 2024-11-01 04:45:27
Original
537 Leute haben es durchsucht

How did I speed up a Javascript function by

In einem aktuellen Projekt bin ich auf eine Funktion gestoßen, deren Effizienz zu wünschen übrig ließ. Diese Funktion führte zwei Kartenschleifen, drei Filter (jeweils begleitet von einem Includes) und eine zusätzliche Karte mit integrierter Suche durch, insgesamt 12 Iterationen. Obwohl einige dieser Methoden, wie z. B. Filter, nicht das gesamte Array durchlaufen mussten, war der Vorgang dennoch recht kostspielig, insbesondere bei großen Artikelmengen.

Die Komplexität dieser Funktion betrug O(n * m), was mit der Skalierung des Projekts schnell zu einem Problem werden konnte.

Deshalb habe ich beschlossen, diese Funktion zu optimieren. Der erste Schritt, den ich unternahm, bestand darin, die beiden Schlüsselarrays durch ein Set zu ersetzen. In JavaScript ist ein Set eine Struktur, die eindeutige Daten speichert und eine viel schnellere Anwesenheitsprüfung ermöglicht als ein Array. Während die Überprüfung eines Arrays eine O(n)-Komplexität aufweist, ist sie in Set O(1). Darüber hinaus nimmt die Leistung der Set.has-Methode im Gegensatz zu Array.includes.

nicht mit der Zunahme der Datenanzahl in Set ab

Diese Änderung hat bereits zu einer deutlichen Verbesserung der Filter geführt, die auf den Arrays betrieben werden. Allerdings gab es in einer der Karten ein Array.find(), das ebenfalls optimiert werden konnte. In JavaScript ist eine Map eine indizierte Liste, während Array.find eine lineare Suche durchführt und je nach Leistung des Prozessors, auf dem der Code ausgeführt wird, 2.100 bis 12.000 Mal langsamer als Map sein kann.

Durch das Ersetzen von Array.find durch Map.get in einer der Schleifen konnte ich die Gesamtzahl der Iterationen von 12 auf 9 reduzieren. Während eine Reduzierung um drei Schleifen möglicherweise nicht signifikant erscheint, ist die Komplexität des Algorithmus gestiegen O(n m) und die Funktionsausführungszeit wurde um beeindruckende 96 % reduziert!

In Tests, die auf einem Intel Core i7-10510U durchgeführt wurden, dauerte die Ausführung der Funktion mit Arrays 28-mal länger als die Ausführung mit Map and Set, wobei Arrays mit 5.000 Elementen verwendet wurden: 191,19 ms bis 6,80 ms.

Es ist erwähnenswert, dass der ursprüngliche Algorithmus mit Arrays zwar eine Komplexität von O(n * m) hatte, die Ausführungszeit jedoch exponentiell mit der Anzahl der Elemente zunahm. In einem Softwareentwicklungsszenario ist es entscheidend, das Geschäftswachstum und die Einschränkungen der Maschinen zu berücksichtigen, auf denen der Code ausgeführt wird. Wenn die Arrays beispielsweise auf 50.000 Elemente anwachsen würden, würde die Ausführungszeit des ursprünglichen Algorithmus 13.585 ms betragen, während der optimierte Algorithmus mit Set und Map nur 135 ms dauern würde. In diesem Fall wäre der ursprüngliche Algorithmus 100-mal langsamer und würde durch die Optimierung eine Reduzierung der Ausführungszeit um 99 % verzeichnen.

Abschluss

Angesichts der Geschwindigkeitsüberlegenheit von Set und Map gegenüber Array beim Informationsabruf sind die Kosten für die Iteration zum Erstellen eines Sets oder einer Map gerechtfertigt, wenn diese Informationen in Iterationen wie Array.filter oder Array.find überprüft werden müssen.

Die Verwendung von Set ist jedoch aufgrund einiger Nachteile möglicherweise nicht immer sinnvoll, wie z. B. der fehlenden sequentiellen Reihenfolge, der Unmöglichkeit des direkten Zugriffs auf Elemente über den Index und der Einschränkung, keine doppelten Elemente zu speichern.

Trotz dieser Einschränkungen kann das Ersetzen von Arrays durch Set oder Map in vielen Situationen erhebliche Vorteile in Bezug auf Leistung und Effizienz bringen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Javascript-Funktion beschleunigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage