event loop explorer

事件循環探索器

關於項目

事件循環Explorer是一種工具，可幫助您了解JavaScript代碼如何在瀏覽器中執行。它可視化呼叫堆棧，Web API，任務，微型箱和渲染階段。

屏幕截圖：

演示：

隨時在這裡嘗試：https：//vault-developer.github.io/event-loop-explorer/

已知的限制和簡化：

• JavaScript代碼使用Acorn Parser解析為AST，然後生成事件順序。所有默認示例都按預期工作，您可以嘗試修改代碼並查看其工作原理。但是，並非所有情況都涵蓋。異步/等待，複雜的承諾，setInterval，作業運算符將無法正常工作。
• 通常每16.66ms（60fps）觸發渲染階段，但是在此項目中，它可以簡化為每個第二個事件循環圓圈。為了簡單起見，我們將每個圓都計算為360ms，因此渲染相每720ms觸發一次。
• UI不友好，請僅使用桌面設備。

貢獻：

如果您想做出貢獻，請隨時為此存儲庫分叉並創建拉動請求。
“未來計劃”部分中有很多主題。
有問題或想法嗎？
在我們的討論會議上隨時提出它嗎？

在本地啟動：

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

cd event-loop-explorer

yarn install

yarn dev

未來計劃：

• 修復活動環輪中的滯後動畫；
• 添加步驟向前功能；
• 添加github操作以檢查PRS；
• 使移動佈局更加用戶友好；
• 添加代碼驗證語法；
• 檢查JS解析邊緣案例，包括new Promise((res) => {res(console.log(4))}) ;
• 為控制台添加一個切換，以在Console.Log輸出和每個步驟的綜合日誌之間切換；
• 添加單元測試；
• 清理代碼，刪除戒酒；

靈感來自：

• JS Visualiser Andrew Dillon的
• 傑克·阿奇博爾德（Jake Archibald）在JSCONF.ASIA 2018提出的“循環”