event loop explorer

イベントループエクスプローラー

プロジェクトについて

Event Loop Explorerは、JavaScriptコードがブラウザでどのように実行されるかを理解するのに役立つツールです。コールスタック、Web API、タスク、マイクロタスク、およびレンダリングフェーズを視覚化します。

スクリーンショット：

デモ：

ここでお気軽にお試しください：https：//vault-developer.github.io/event-loop-explorer/

既知の制限と単純化：

• JavaScriptコードは、Acorn Parserを使用してASTに解析され、イベントの順序が生成されます。すべてのデフォルトの例は期待どおりに機能しています。コードを変更して、それがどのように機能しているかを確認することができます。ただし、すべてのケースがカバーされているわけではありません。 async/await、複雑な約束、setinterval、課題演算子は、予想どおりに機能しません。
• 通常、レンダリングフェーズは16.66ms（60fps）ごとにトリガーされますが、このプロジェクトでは、2秒ごとのイベントループサークルのみが簡素化されます。簡単にするためにすべての円を360msとしてカウントしているため、720msごとにレンダリングフェーズがトリガーされます。
• UIはモバイルフレンドリーではありません。デスクトップデバイスのみを使用してください。

貢献：

貢献したい場合は、このリポジトリをフォークしてプルリクエストを作成してください。
「将来の計画」セクションには多くのトピックがあります。
質問やアイデアがありますか？
ディスカッションセッションでお気軽に上げてください。

ローカルで発売：

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

cd event-loop-explorer

yarn install

yarn dev

将来の計画：

• イベントループホイールの遅れアニメーションを修正します。
• ステップフォワード機能を追加します。
• GitHubアクションを追加してPRを確認します。
• モバイルレイアウトをよりユーザーフレンドリーにします。
• コード検証構文を追加します。
• new Promise((res) => {res(console.log(4))})を含むJS解析エッジケースを確認します。
• コンソールにトグルを追加して、すべてのステップのコンソールの出力と包括的なログを切り替えます。
• ユニットテストを追加します。
• コードをクリーンアップし、Todosを削除します。

に触発された：

• Andrew DillonのJS Visualiser
• JSCONF.ASIA 2018でJake Archibaldが発表した「In theLoop」