event loop explorer

Event Loop Explorer

เกี่ยวกับโครงการ

Event Loop Explorer เป็นเครื่องมือที่ช่วยให้เข้าใจว่ารหัส JavaScript ดำเนินการอย่างไรในเบราว์เซอร์ มันแสดงให้เห็นถึงสแต็กการโทร, เว็บ API, งาน, microtasks และเฟสเรนเดอร์

ภาพหน้าจอ:

การสาธิต:

อย่าลังเลที่จะลองที่นี่: https://vault-developer.github.io/event-loop-explorer/

ข้อ จำกัด ที่รู้จักและความเรียบง่าย:

• รหัส JavaScript ถูกแยกวิเคราะห์เป็น AST โดยใช้ Acorn Parser แล้วสร้างลำดับเหตุการณ์ ตัวอย่างเริ่มต้นทั้งหมดใช้งานได้ตามที่คาดไว้คุณสามารถลองแก้ไขรหัสและดูว่ามันทำงานอย่างไร อย่างไรก็ตามไม่ได้รับการคุ้มครองทุกกรณี Async/รอคำสัญญาที่ซับซ้อน 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

แผนการในอนาคต:

• แก้ไขภาพเคลื่อนไหวที่ล้าหลังใน Event Loop Wheel;
• เพิ่มฟังก์ชั่นการก้าวไปข้างหน้า
• เพิ่มการกระทำของ GitHub เพื่อตรวจสอบ PRS;
• ทำให้เค้าโครงมือถือเป็นมิตรกับผู้ใช้มากขึ้น
• เพิ่มไวยากรณ์การตรวจสอบรหัส;
• ตรวจสอบกรณีการแยกวิเคราะห์ JS รวมถึง new Promise((res) => {res(console.log(4))}) ;
• เพิ่มสลับไปยังคอนโซลเพื่อสลับระหว่างคอนโซลเอาท์พุทล็อกและบันทึกที่ครอบคลุมสำหรับทุกขั้นตอน
• เพิ่มการทดสอบหน่วย
• ทำความสะอาดรหัสลบ Todos;

แรงบันดาลใจจาก:

• JS Visualiser โดย Andrew Dillon
• "In the Loop" นำเสนอโดย Jake Archibald ที่ jsconf.asia 2018