event loop explorer

Event Loop Explorer

Über das Projekt

Event Loop Explorer ist ein Tool, mit dem Sie verstehen können, wie JavaScript -Code im Browser ausgeführt wird. Es visualisiert den Call -Stack, Web -APIs, Aufgaben, Mikrotasks und Renderphase.

Screenshots:

Demo:

Fühlen Sie sich frei, es hier zu versuchen: https://vault-developer.github.io/event-loop-explorer/

Bekannte Einschränkungen und Vereinfachungen:

• Der JavaScript -Code wird mit AST unter Verwendung von Acorn -Parser analysiert und dann werden die Reihenfolge der Ereignisse generiert. Alle Standardbeispiele funktionieren wie erwartet. Sie können versuchen, den Code zu ändern und zu sehen, wie er funktioniert. Nicht alle Fälle sind jedoch abgedeckt. Async/Warte, komplexe Versprechen, SetInterval, Zuweisungsbetreiber funktionieren nicht wie erwartet.
• Die Renderphase wird normalerweise alle 16,66 ms (60 fps) ausgelöst, aber in diesem Projekt wird sie nur auf jeden zweiten Ereignisschleifkreis vereinfacht. Wir zählen jeden Kreis für den Einfachheit halber als 360 ms, so dass die Renderphase alle 720 ms ausgelöst wird.
• UI ist nicht mobilfreundlich. Bitte verwenden Sie nur Desktop-Geräte.

Beitrag:

Wenn Sie einen Beitrag leisten möchten, können Sie dieses Repository freigeben und eine Pull -Anfrage erstellen.
Es gibt viele Themen im Abschnitt "Zukunftspläne".
Eine Frage oder Idee haben?
Fühlen Sie sich frei, es in unserer Diskussionssitzung zu erhöhen?

Vor Ort starten:

 git clone [email protected]:vault-developer/event-loop-explorer.git

cd event-loop-explorer

yarn install

yarn dev

Zukünftige Pläne:

• Fixieren Sie die Animation der Verzögerung im Ereignisschleifrad;
• Stufenwärtsfunktionalität hinzufügen;
• GitHub -Aktion hinzufügen, um PRs zu überprüfen.
• Mobiles Layout benutzerfreundlicher machen;
• Codes -Validierungssyntax hinzufügen;
• Überprüfen Sie die Fälle von JS Parsing Edge, einschließlich new Promise((res) => {res(console.log(4))}) ;
• Fügen Sie einen Umschalter zur Konsole hinzu, um zwischen Konsolenausgabe und umfassenden Protokollen für jeden Schritt zu wechseln.
• Unit -Tests hinzufügen;
• Reinigen Sie den Code, entfernen Sie Todos.

Inspiriert von:

• JS Visualisierer von Andrew Dillon
• "In der Schleife" von Jake Archibald bei Jsconf.asia 2018 präsentiert