Heim > Web-Frontend > js-Tutorial > Synchrones vs. asynchrones Javascript

Synchrones vs. asynchrones Javascript

Susan Sarandon
Freigeben: 2024-12-09 15:42:12
Original
512 Leute haben es durchsucht

Heute werde ich über synchrones und asynchrones Javascript schreiben.
Kurz gesagt, die Definitionen;
Synchrone Aufgaben werden der Reihe nach ausgeführt, d. h. Sie müssen den ersten Auftrag abschließen, bevor Sie mit dem nächsten fortfahren können. Auf der anderen Seite können Sie asynchrone Jobs in beliebiger Reihenfolge oder sogar gleichzeitig ausführen.

Asynchron ist eine nicht blockierende Architektur, sodass die Ausführung einer Aufgabe nicht von einer anderen abhängig ist. Aufgaben können gleichzeitig ausgeführt werden.

Synchronous ist eine blockierende Architektur, daher hängt die Ausführung jeder Operation vom Abschluss der vorherigen ab. Jede Aufgabe erfordert eine Antwort, bevor mit der nächsten Iteration fortgefahren wird.

Im Grunde ist Javascript eine Single-Threaded, blockierende, synchrone Skriptsprache, die verwendet wird, um Webseiten interaktiv zu gestalten.
Single-Threading und Blockierung bedeuten, dass Javascript immer nur eine Aufgabe gleichzeitig ausführen kann, d. h. das Programm führt die Aufgaben der Reihe nach aus und jede Aufgabe muss abgeschlossen sein, bevor die nächste Aufgabe beginnt.

Obwohl JavaScript von Natur aus synchron ist, profitiert es von einem asynchronen Prozess. Lang laufende JavaScript-Funktionen können dazu führen, dass die Benutzeroberfläche (UI) oder der Server nicht mehr reagiert, bis die Funktion zurückgekehrt ist, was zu einer weniger hervorragenden Benutzererfahrung führt.
Es gibt jedoch einige Fälle, in denen Benutzer von der Blockierung der Programmierung profitieren können, beispielsweise bei der Durchführung einer Online-Zahlung.

Der Vorteil von JavaScript besteht darin, dass es das Beste aus beiden Welten bietet: Single-Thread und Multi-Thread, blockierend und nicht blockierend. Mit dieser Flexibilität können Programmierer Code in einer einzigen Programmiersprache statt in zwei schreiben – eine für synchrone Vorgänge und eine andere für asynchrone Vorgänge.

Asynchrone Programmierung verbessert das Benutzererlebnis, indem sie die Verzögerungszeit zwischen dem Aufruf einer Funktion und der Rückgabe des Werts dieser Funktion verringert. Asynchrone Programmierung führt zu einem schnelleren und nahtloseren Ablauf in der realen Welt.
Beispielsweise möchten Benutzer, dass ihre Apps schnell ausgeführt werden, das Abrufen von Daten von einer API jedoch Zeit in Anspruch nimmt. In diesen Fällen trägt die asynchrone Programmierung dazu bei, dass der App-Bildschirm schneller geladen wird, was das Benutzererlebnis verbessert.

Synchronisierte Programmierung hingegen ist für Entwickler von Vorteil. Synchrone Programmierung ist viel einfacher zu programmieren. Es wird von allen Programmiersprachen gut unterstützt und als Standardprogrammiermethode müssen Entwickler keine Zeit damit verschwenden, etwas Neues zu lernen, das Tür und Tor für Fehler öffnen könnte.

WIE MAN ZWISCHEN ASYNCHRONER UND SYNCHRONER PROGRAMMIERUNG WÄHLT
Berücksichtigen Sie bei der Entscheidung, welchen Ansatz Sie wählen möchten, die asynchrone Programmierung, die anpassungsfähig ist, und die synchrone Programmierung, die streng ist.

Asynchrone Programmierung ist der Multitasker, der von einer Aufgabe zur nächsten wechselt und das System benachrichtigt, wenn jede Aufgabe abgeschlossen ist. Synchrones Programmieren funktioniert mit einer eingleisigen Denkweise, bei der jeweils eine Aufgabe in einer festen Reihenfolge abgehakt wird.

Asynchrone Programmierung ermöglicht die gleichzeitige Ausführung mehrerer Dinge und wird in der Regel verwendet, um das Benutzererlebnis durch einen mühelosen, schnellen Ladeablauf zu verbessern.
Synchrone Programmierung wird am besten in reaktiven Systemen eingesetzt. Während es für Entwickler einfacher ist zu programmieren und von jeder Programmiersprache erkannt wird, ist die Synchronisierung ressourcenintensiv und kann die Arbeit verlangsamen.

Im Folgenden gebe ich einige Beispiele, um die synchrone und asynchrone Programmierung besser zu erklären.
SYNCHRONES PROGRAMMIERBEISPIEL

Sychronous VS Asynchronous Javascript

Die Ausgabe für den obigen Code ist;
Nissan 2003 wahr
{ Name: „Nissan“, Baujahr: 2003, Gut: wahr }
Adedamola 33 falsch
Ein Mann nannte Gott 300 wahr

Im obigen Codeausschnitt habe ich lediglich Objekte deklariert und Schlüsseln Werte zugewiesen.
Sie werden feststellen, dass die ausgegebene Ausgabe mit dem oben geschriebenen Code übereinstimmt. Dies bedeutet, dass bei einem Fehler beim ersten deklarierten Objekt der verbleibende Code nicht ausgeführt wird, da er synchron ausgeführt werden soll.

ASYNCHRONES PROGRAMMIERBEISPIEL

Sychronous VS Asynchronous Javascript

Die Ausgabe des Codes ist;
eins
Drei
Vier
Datei erfolgreich angehängt
Eine neue Datei wurde erstellt
Zwei

Dies ist ein Beispiel für asynchrone Programmierung, da die Aufgaben nicht der Reihe nach ausgeführt wurden und außerdem eine Aufgabe nicht auf den Abschluss einer anderen Aufgabe wartete, bevor sie ausgeführt wurde.
Im Idealfall sollte aus dem oben geschriebenen Code eins vor zwei und zwei vor drei und vier kommen. Außerdem hätte vor dem Anhängen eine neue Datei erstellt werden sollen, aber jede Aufgabe wurde basierend auf der für ihre Ausführung benötigten Zeit ausgeführt.
Damit wird die Behauptung weiter gefestigt, dass die asynchrone Programmierung es ermöglicht, mehr Dinge gleichzeitig zu erledigen.

Das obige ist der detaillierte Inhalt vonSynchrones vs. asynchrones Javascript. 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