Heim Web-Frontend js-Tutorial Leistungsprobleme mit JavaScript-Schleifenanweisungen

Leistungsprobleme mit JavaScript-Schleifenanweisungen

Feb 28, 2017 pm 02:18 PM
javascript 循环语句 性能问题

In den meisten Programmiersprachen verbrauchen Schleifenanweisungen die meiste Zeit
Und Schleifenanweisungen sind ein sehr wichtiges Programmiermuster

In unserem JavaScript gibt es vier Arten von Schleifen

  1. for-Schleife

  2. While-Schleife

  3. Do-While-Schleife

  4. For-In-Schleife

Die ersten drei Schleifen kommen auch in anderen Sprachen sehr häufig vor
Die For-In-Schleife ist möglicherweise neu für Schüler, die C/C++ in der Schule studiert haben
Sie durchsucht Instanz- und Prototypeigenschaften, also es verursacht mehr Overhead pro Iteration
Die For-In-Schleife ist am Ende nur 1/7 so schnell wie die anderen drei Typen
Also, es sei denn, wir müssen explizit über eine unbekannte Anzahl von Eigenschaftenobjekten iterieren, andernfalls sollten wir das tun Versuchen Sie, die Verwendung von for-in
zu vermeiden, geschweige denn eine for-in-Schleife zum Durchlaufen des Arrays

. Wir können ein klares Objekt wie folgt iterieren

var props = [&#39;prop1&#39;, &#39;prop2&#39;],      i = 0;while(i < props.length){
    fn(obj[props[i++]]);
}
Nach dem Login kopieren

Dieser Code erstellt ein Array von Objektattributen basierend auf den Attributen im Objekt und verwendet dann eine While-Schleife, um die Attributliste zu durchlaufen und die entsprechenden Attributwerte zu verarbeiten
Auf diese Weise muss nicht nach jedem Attribut von gesucht werden das Objekt, was den Schleifenaufwand reduziert

Die Prämisse des obigen Ansatzes ist, dass die internen Eigenschaften des Objekts bekannt sind
Wenn wir die interne Implementierung des Objekts nicht kennen
Wir haben sie immer noch um mit den Eigenschaften des Objekts selbst umzugehen, und wir können nur dies tun

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        //...
    }
}
Nach dem Login kopieren

Der Preis besteht darin, dass bei jeder Iteration festgestellt werden muss, ob die Eigenschaft die eigene Eigenschaft des Objekts ist und nicht geerbt.

Mit Ausnahme von for-in ist die Leistung anderer Schleifen ähnlich. Sie sollten daher die Anforderungen berücksichtigen und den Schleifentyp auswählen.


Ich glaube, dass Freunde, die gerade Programmieren gelernt haben, mit dem Schreiben von Schleifen vertraut sind

for(var i = 0; i < arr.length; i++){
    fn(arr[i]);
}
Nach dem Login kopieren

Jedes Mal, wenn diese Schleifenanweisung wiederholt wird, müssen wir das Längenattribut in arr nachschlagen, was sehr zeitaufwändig ist
Damit wir optimieren können,

for(var i = 0, len = arr.length; i < len; i++){
    fn(arr[i]);
}
Nach dem Login kopieren

Den Array-Längenwert in einer lokalen Variablen zwischenspeichern, damit das Problem gelöst ist
Das Gleiche gilt für while, do-while
Abhängig von der Array-Länge kann es in vielen Browsern etwa 25 % der Laufzeit einsparen


Wir können die Leistung auch leicht verbessern, indem wir die Reihenfolge des Arrays umkehren

for(var i = items.length; i--;){
    process(items[i]);
}
Nach dem Login kopieren
var j = items.length;while(j--){
    process(items[j]);
}
Nach dem Login kopieren
var k = items.length - 1;do {
    process(items[k]);
}while(k--);
Nach dem Login kopieren

Auf diese Weise wird jede Iterationskontrollbedingung anhand von zwei Zeitpunkten beurteilt ( ob die Anzahl der Iterationen geringer ist als die Gesamtzahl, ob es wahr ist)
wird auf ein Urteil reduziert (ob es wahr ist), wodurch sich die Schleifengeschwindigkeit weiter verbessert


Ein paar letzte Worte
Wir haben vielleicht alle einige Array-Methoden wie arr.forEach() oder einige Framework-Iterationsmethoden wie $().each() von jQuery verwendet. Um über ein Array zu iterieren,
Diese Methoden führen eine Funktion für jedes Element von aus das Array
Obwohl sie praktisch sind, sind sie viel langsamer als eine normale Schleife (Aufruf einer externen Methode)
In allen Fällen ist die schleifenbasierte Iteration etwa achtmal schneller als die funktionsbasierte Iteration
Also wir Versuchen Sie, diese gewöhnlichen Schleifen (for, while, do-while) zu verwenden, wenn wir gewöhnliche Schleifen (for, while, do-while) verwenden können, um Probleme zu lösen

Das Obige ist JavaScript In Bezug auf die Leistungsprobleme von Schleifenanweisungen Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).


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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

Vue-Entwicklungshinweise: Vermeiden Sie häufige Speichernutzungs- und Leistungsprobleme Vue-Entwicklungshinweise: Vermeiden Sie häufige Speichernutzungs- und Leistungsprobleme Nov 22, 2023 pm 02:38 PM

Da Vue immer häufiger eingesetzt wird, müssen Vue-Entwickler auch darüber nachdenken, wie sie die Leistung und Speichernutzung von Vue-Anwendungen optimieren können. In diesem Artikel werden einige Vorsichtsmaßnahmen für die Vue-Entwicklung erläutert, um Entwicklern dabei zu helfen, häufige Speichernutzungs- und Leistungsprobleme zu vermeiden. Vermeiden Sie Endlosschleifen. Wenn eine Komponente kontinuierlich ihren eigenen Status aktualisiert oder eine Komponente kontinuierlich ihre eigenen untergeordneten Komponenten rendert, kann es zu einer Endlosschleife kommen. In diesem Fall geht Vue der Arbeitsspeicher aus und die Anwendung wird sehr langsam. Um diese Situation zu vermeiden, bietet Vue a

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

See all articles