การวิเคราะห์เชิงลึกของกลไกการดำเนินเหตุการณ์ใน JS

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว:

ฉันสับสนเล็กน้อยเมื่อเริ่มเรียนคำถามทดสอบข้อเขียนเมื่อไม่นานมานี้ วันนี้เราจะวิเคราะห์กลไกการดำเนินกิจกรรมของ JS อย่างละเอียด

มาดูโค้ดกันก่อนครับ

เพื่อนๆ ลองเขียนลำดับการพิมพ์ดูครับ

แบบเธรดเดียวส่วน

JS จะใช้เป็นภาษาสคริปต์ของเบราว์เซอร์ วัตถุประสงค์หลักของ Js คือเพื่อใช้งาน DOM ซึ่งกำหนดว่า JS ต้องเป็นเธรดเดียว หาก JS เป็นแบบมัลติเธรดเช่น Java และหากทำงานสองเธรด DOM ในเวลาเดียวกัน ดังนั้นเบราว์เซอร์ควรใช้งานอย่างไร

การเปิดตัว JS นั้นมีจุดประสงค์เพื่อใช้ประโยชน์จากความนิยมของ Java ภาษานี้ถูกเขียนขึ้นเมื่อไม่นานมานี้ ดังนั้นนี่คือเหตุผลว่าทำไม JS จึงเป็น

กลไกการดำเนินการ . JS แบบ

เนื่องจาก JS เป็นแบบเธรดเดียว งานจึงต้องถูกจัดเรียง งานทั้งหมดจะดำเนินการตามกฎ

• งานแบบซิงโคร

นัส

• งานแบบอะซิงโครนัส

งานแบบซิงโครนัสและงานแบบอะซิงโครนัสเข้าสู่สแต็กการดำเนินการ ขั้นแรก JS จะกำหนดว่าประเภทของงานนั้น

• เป็นงานแบบซิงโครนัส หากเข้าสู่เธรดหลักโดยตรง

• จะเป็นงานแบบอะซิงโครนัส เข้าสู่ Event Table และลงทะเบียนฟังก์ชันเรียกกลับ Event Queue

หลังจากดำเนินการงานซิงโครนัสทั้งหมด

• แล้ว

• JS จะเข้าสู่ Event Queue ฟังก์ชันการอ่าน

• จะดำเนินการกระบวนการนี้ซ้ำ ๆ จนกว่างานทั้งหมดจะเสร็จสิ้น นี่คือวิธีที่เรามักพูดกันว่า事件循环

JS กำหนดว่า Execution Stack นั้นว่างเปล่า

อืม ฉันไม่รู้ - - - JS ควรมีตรรกะเฉพาะของตัวเองเพื่อตรวจสอบว่าสแต็กการดำเนินการว่างเปล่าหรือไม่

งานแบบอะซิงโครนัส

ลำดับการดำเนินการงานแบบอะซิงโครนัสคือ: งานมาโคร -> งานไมโคร

งานแบบอะซิงโครนัสสามารถแบ่งออกเป็น

• งาน

• มาโคร งาน

ไมโคร งานมาโครทั่วไป

• I/0

• setTimeout

• setInterval

งานไมโครทั่วไป

• สัญญา

• .then

• .catch

ตอบ

vite ปลั๊กอินที่กำหนดค่าก่อน , เวอร์ชันมีปัญหา โปรดอย่าสนใจสัญญาณเตือนสีแดงนี้

การวิเคราะห์

• 开始了ด้วยงานซิงโครนัส ขั้นแรกจะเข้าสู่สแต็กการดำเนินการ

• เพื่อ

• ดำเนินการฟังก์ชัน a task()

• ดำเนินการพร้อมกัน รหัสต่อไปนี้จะไม่ตรงกัน b เข้าสู่สแต็กการดำเนินการเป็นงานซิงโครนัส

• a end กลายเป็นไมโครทาสก์ของงานอะซิงโครนัส และเข้าสู่สแต็กการดำเนินการ

จนถึงตอนนี้ คิวงานซิงโครนัสได้开始了a , b

จนถึงตอนนี้ คิวงานอะซิงโครนัสได้เริ่มต้นแล้ว งาน: setTimeout Microtask: a end

หากไม่มีรหัสที่ตามมา ลำดับการพิมพ์จะเป็นดังนี้

มาถึงคำถามนี้ มันไม่ได้หมายความว่างานแมโครจะถูกดำเนินการเร็วกว่างานไมโคร เพราะเหตุใด setTimeout จึงถูกพิมพ์หลังจาก a end

看这张图

setTimeout เข้าสู่คิวงานเป็นงานแมโคร

ทั่วไป

แล้วเหตุผล

async await นำไปสู่การสร้างงานย่อย แต่งานย่อยนี้เป็นของงานมาโครปัจจุบัน ดังนั้น a end จะถูกดำเนินการก่อน และหลังจากการดำเนินการแล้ว ระบบจะตัดสินว่างานแมโครปัจจุบันสิ้นสุดลงแล้ว ดำเนินการงานแมโครถัดไป พิมพ์ setTimeout

และดำเนินการต่อตามกระบวนการ

• c เนื่องจากการแปลงของ Promise จึงกลายเป็นงานแบบซิงโครนัสและเข้าสู่คิวงาน

• c end เข้าสู่คิวงานเมื่องานไมโครที่ได้รับจาก Promise

• d เข้าสู่ คิวงานเป็นงานซิงโครนัส

จนถึงตอนนี้ การซิงโครไนซ์คิวงาน

• a

• b

• c

• d

จนถึงตอนนี้ คิวงานอะซิงโครนัส

• สิ้นสุด microtask

• c end microtask

• setTimeout macrotask

ดังนั้นลำดับการพิมพ์จึงเป็นดังนี้

Postscript:

ความเข้าใจของฉันเกี่ยวกับกลไกการดำเนินการ JS อาจค่อนข้างไม่ถูกต้อง และฉันหวังว่าพวกคุณจะชี้ให้เห็น

[วิดีโอแนะนำที่เกี่ยวข้อง: ส่วนหน้าของเว็บ]

ด้านบนนี้เป็นการวิเคราะห์เชิงลึกของรายละเอียดของกลไกการดำเนินกิจกรรมใน JS สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!