event loop explorer

Event Loop Explorer

Tentang proyek

Event Loop Explorer adalah alat yang membantu memahami bagaimana kode JavaScript dieksekusi di browser. Ini memvisualisasikan tumpukan panggilan, API web, tugas, mikrotasks, dan fase render.

Tangkapan layar:

Demo:

Jangan ragu untuk mencobanya di sini: https://vault-developer.github.io/event-loop-explorer/

Batasan & Penyederhanaan yang Diketahui:

• Kode JavaScript diuraikan ke AST menggunakan Acorn Parser, dan kemudian urutan acara dihasilkan. Semua contoh default berfungsi seperti yang diharapkan, Anda dapat mencoba memodifikasi kode dan melihat cara kerjanya. Namun, tidak semua kasus tertutup. Async/menunggu, janji kompleks, setInterval, operator penugasan tidak akan bekerja seperti yang diharapkan.
• Fase render biasanya dipicu setiap 16.66ms (60fps), tetapi dalam proyek ini disederhanakan untuk setiap lingkaran loop peristiwa kedua. Kami menghitung setiap lingkaran sebagai 360ms untuk kesederhanaan, jadi fase render dipicu setiap 720ms.
• UI tidak ramah seluler, silakan gunakan perangkat desktop saja.

Kontribusi:

Jika Anda ingin berkontribusi, jangan ragu untuk membayar repositori ini dan membuat permintaan tarik.
Ada banyak topik di bagian "Rencana Masa Depan".
Punya pertanyaan atau ide?
Jangan ragu untuk menaikkannya di sesi diskusi kami?

Luncurkan secara lokal:

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

cd event-loop-explorer

yarn install

yarn dev

Rencana Masa Depan:

• Perbaiki animasi tertinggal di roda loop acara;
• Tambahkan fungsionalitas langkah maju;
• Tambahkan tindakan GitHub untuk memeriksa PR;
• membuat tata letak seluler lebih ramah pengguna;
• Tambahkan Sintaks Validasi Kode;
• Periksa kasus tepi parsing JS, termasuk new Promise((res) => {res(console.log(4))}) ;
• Tambahkan sakelar ke konsol untuk beralih antara output konsol.log dan log komprehensif untuk setiap langkah;
• Tambahkan tes unit;
• Bersihkan kode, hapus Todos;

Terinspirasi oleh:

• JS Visualiser oleh Andrew Dillon
• "In the Loop" yang disajikan oleh Jake Archibald di jsconf.asia 2018