การวิเคราะห์สั้นๆ เกี่ยวกับ Buffer ใน Node.js และการพูดคุยเกี่ยวกับ Event Loop

การใช้บัฟเฟอร์

ไบนารีข้อมูล

• เนื้อหาทั้งหมดในคอมพิวเตอร์: ข้อความ ตัวเลข รูปภาพ เสียง และวิดีโอ จะถูกแสดงด้วยไบนารี่ในที่สุด

• JS สามารถประมวลผลข้อมูลที่ใช้งานง่ายได้โดยตรง เช่น สตริง โดยปกติแล้วเราจะแสดงเนื้อหาเหล่านี้แก่ผู้ใช้

• แต่คุณอาจคิดว่า JS It ยังสามารถประมวลผลรูปภาพได้

  • ที่จริงแล้ว บนหน้าเว็บ
  • JS หรือ HTML มักจะประมวลผลรูปภาพไปยังเบราว์เซอร์
  • เท่านั้น รูปภาพและสุดท้ายก็เรนเดอร์รูปภาพ
• • utf-8 GBK
  • แตก

  ต่างกันสำหรับเซิร์ฟเวอร์

  • เราต้องอ่านข้อมูลไบนารี่นั้นจะถูกแปลงเป็นข้อความที่เกี่ยวข้องผ่าน GKB
  • ตัวอย่างเช่นสิ่งที่เราต้องอ่านคือข้อมูลรูปภาพ (ไบนารี่) จากนั้นทำการประมวลผลรองกับข้อมูลรูปภาพด้วยวิธีการบางอย่าง (การครอบตัด การแปลงรูปแบบ การหมุนการเพิ่มตัวกรอง) มีไลบรารีที่เรียกว่า sharp ใน Node ซึ่งมีหน้าที่ในการอ่านรูปภาพหรือ Buffer ของรูปภาพที่เข้ามาแล้วประมวลผล
  • ตัวอย่างเช่น ใน Node การเชื่อมต่อแบบยาวจะถูกสร้างขึ้นผ่าน TCP TCP จะส่งไบต์ เราจำเป็นต้องแปลงข้อมูลเป็นไบต์ก่อนที่จะส่งผ่านและต้องทราบขนาดของไบต์ที่ส่ง (ลูกค้าต้องตัดสินว่าจะอ่านเนื้อหาได้มากน้อยเพียงใดตามขนาด)

Buffer และ Binary

• เราจะพบว่า สำหรับการพัฒนาส่วนหน้านั้นมักจะไม่ค่อยเกี่ยวข้องกับการจัดการไบนารี่ซึ่งกันและกัน แต่สำหรับฝั่งเซิร์ฟเวอร์เพื่อที่จะใช้งานฟังก์ชั่นต่างๆ มากมาย เราจะต้องดำเนินการข้อมูลไบนารี่โดยตรง

• ดังนั้นเพื่ออำนวยความสะดวกให้กับนักพัฒนาในการทำหน้าที่ให้สมบูรณ์มากขึ้น , Node ได้จัดเตรียมคลาสชื่อ Buffer ให้กับเรา และเป็นคลาสแบบโกลบอล อย่างที่

• เราเคยบอกไปแล้วว่าข้อมูลไบนารี่ถูกจัดเก็บไว้ใน Buffer แล้วมันจะถูกเก็บไว้อย่างไร?

  • เราสามารถคิดได้ว่า Buffer เป็นอาร์เรย์ที่เก็บไบนารี่
  • แต่ละรายการในอาร์เรย์นี้สามารถจัดเก็บไบนารี่ 8 บิตได้: 00000000 ซึ่งก็คือหนึ่งไบต์พอดี

• เพราะเหตุใดจึงเป็น 8 บิต

  • ในคอมพิวเตอร์ มีเพียงไม่กี่กรณีที่เราดำเนินการบิตไบนารี่โดยตรง เนื่องจากข้อมูลที่จัดเก็บไว้ในบิตไบนารี่มีจำกัดมาก
  • 1 byte = 8 bit
  • byte แล้ว 8 บิตจะรวมกันเป็นหน่วยหนึ่ง
  • 1 byte = 8 bit , 1kb = 1024 byte , 1M = 1024kb , 1 G = 1024 M
  • เช่น ชนิด int ในภาษาการเขียนโปรแกรมหลายภาษาคือ 4 ไบต์ และชนิด long คือ 8 ไบต์
  • เช่น TCP ส่ง
  For
  • ไบต์สตรีมต้องระบุจำนวนไบต์เมื่อเขียนและอ่าน
  • เช่น ค่าของ RGB คือ 255 ตามลำดับ ดังนั้นโดยพื้นฐานแล้ว

บัฟเฟอร์และสตริง

• Buffer จะถูกเก็บไว้หนึ่งไบต์ในคอมพิวเตอร์ซึ่งก็คือ เทียบเท่ากับอาร์เรย์ของไบต์ แต่ละรายการในอาร์เรย์มีขนาดหนึ่งไบต์

• หากเราต้องการใส่สตริงลงในบัฟเฟอร์ กระบวนการคืออะไร?

  • ส่งสตริงโดยตรงไปยังคลาสบัฟเฟอร์ จากนั้น buffer
  • อินสแตน

ซ์

// ใช้คีย์เวิร์ดใหม่เพื่อสร้างอินสแตนซ์บัฟเฟอร์ แต่วิธีการสร้างนี้หมดอายุแล้ว const buffer = new Buffer(ข้อความ)
console.log(บัฟเฟอร์); // <บัฟเฟอร์ 48 65 6c 6c 6f>
console.log(buffer.toString()); // สวัสดี

การเข้ารหัสและถอดรหัสสตริงภาษาจีน

• buffer ต้นคือ utf-8 ดังนั้นในโค้ดต่อไปนี้ คลาส Buffer จึงใช้การเข้ารหัส utf-8 เพื่อเข้ารหัสสตริงของเรา เรายังใช้ utf-8 เพื่อถอดรหัสสตริง
• ภาษาจีนของเรามีคุณสมบัติพิเศษ ในการเข้ารหัส utf-8 ข้อความหนึ่งสอดคล้อง 3

ข้อความ const การเข้ารหัสไบนารี่ 3 ไบต์ = 'Hello'
// ใช้ Buffer.from เพื่อถอดรหัสสตริงของเรา const buffer = Buffer.from(ข้อความ)
console.log(บัฟเฟอร์); // <บัฟเฟอร์ e4 bd a0 e5 a5 bd e5 95 8a>
// มีเมธอด toString ในบัฟเฟอร์อินสแตนซ์ที่สามารถถอดรหัสการเข้ารหัส console.log(buffer.toString()); // 'Hello'

• จะเกิดอะไรขึ้นหากการเข้ารหัสและการถอดรหัสใช้ผลลัพธ์การเข้ารหัสในรูปแบบที่แตกต่างกัน

  • ไม่ต้องสงสัยเลยว่าสิ่งที่ถอดรหัสไม่ใช่สตริงที่เราเข้ารหัสไว้ตั้งแต่แรก:

const message = 'Hello'
const buffer = Buffer.from (ข้อความ 'utf16le')
console.log(บัฟเฟอร์); // <บัฟเฟอร์ 60 4f 7d 59 4a 55>
console.log(buffer.toString()); // `O}YJU

วิธีอื่นในการสร้างบัฟเฟอร์

มีหลายวิธีในการสร้าง buffer ที่นี่เราสามารถสร้าง Buffer ผ่าน alloc ได้

• โดยตรง

แก้ไข

• เป็น

  • เลข
  • ฐานสิบ มันจะช่วยให้เราแปลงเป็นเลขฐานสิบหกโดยอัตโนมัติ

ตัวอย่างเช่น หากส่งผ่าน 8 ที่นี่ บัฟเฟอร์ที่สร้างขึ้นจะมี 8 องค์ประกอบ และเลขฐานสองที่สอดคล้องกับแต่ละองค์ประกอบจะเป็น 0
บัฟเฟอร์ const = Buffer.alloc (8)
console.log(บัฟเฟอร์); // <บัฟเฟอร์ 00 00 00 00 00 00 00 00>
// หากกำหนดค่าให้กับเลขฐานสิบ บัฟเฟอร์จะช่วยเราแปลงเป็นเลขฐานสิบหก จากนั้นเขียนลงในตำแหน่งบัฟเฟอร์[0] = 88 
// ใน js สิ่งใดก็ตามที่ขึ้นต้นด้วย 0x จะแสดงเป็นบัฟเฟอร์เลขฐานสิบหก[1] = 0x88
console.log(buffer); // <Buffer 58 88 00 00 00 00 00 00>

การทำงานของบัฟเฟอร์และไฟล์

1. หากไฟล์ข้อความ

• ไม่ได้ระบุการเข้ารหัสอักขระ มันจะไม่ถูกถอดรหัส และ buffer ดั้งเดิมจะถูกส่งกลับโดยตรง ซึ่งเป็นผลลัพธ์เนื้อหาไฟล์ utf-8 เข้ารหัสเลขฐานสอง

const fs = need('fs')
fs.readFile('./a.txt', (ผิดพลาด, ข้อมูล) => {
  console.log(ข้อมูล); // <บัฟเฟอร์ e5 93 88 e5 93 88>
})

• การเข้ารหัสและถอดรหัสใช้ utf-8 คุณสามารถรับเนื้อหาที่ถูกต้องในไฟล์

const fs = need('fs')
// การเข้ารหัส หมายถึงการเข้ารหัสอักขระที่ใช้สำหรับการถอดรหัส และการเข้ารหัสจะมีค่าเริ่มต้นเป็น utf-8
fs.readFile('./a.txt', { การเข้ารหัส: 'utf-8' }, (ผิดพลาด ข้อมูล) => {
  console.log(data); // ฮ่าฮ่า})

• หากการเข้ารหัสอักขระที่ใช้ในการเข้ารหัสและถอดรหัสแตกต่างกัน เนื้อหาที่อ่านครั้งสุดท้ายจะอ่านไม่ออก

const fs = need('fs')
// การเข้ารหัสใช้การเข้ารหัสอักขระ utf16le และการถอดรหัสใช้รูปแบบ utf-8 จะต้องเป็นการถอดรหัสที่ไม่ถูกต้อง fs.readFile('./a.txt', { การเข้ารหัส: 'utf16le' } (ผิดพลาด , ข้อมูล) => {
  console.log(ข้อมูล); // ข้อผิดพลาด })
// โค้ดข้างต้นคล้ายกับโค้ดต่อไปนี้ const msg = 'Haha'
const buffer = Buffer.from(msg, 'utf-8')
console.log(buffer.toString('utf16le')); //

2. ไฟล์รูปภาพ

• จะคัดลอกการเข้ารหัสรูปภาพเพื่อให้บรรลุวัตถุประสงค์ในการคัดลอก

  • รูปภาพ ห้ามระบุแอตทริบิวต์ encoding เนื่องจากเป็นการเข้ารหัสอักขระ จะอ่านเมื่ออ่านรูปภาพเท่านั้น ซึ่งจะมีประโยชน์เมื่อดึงไฟล์ข้อความ

เท่านั้น

fs.readFile('./logo.png', (ผิดพลาด, ข้อมูล) => {
  console.log(data); // สิ่งที่พิมพ์ออกมาคือการเข้ารหัสแบบไบนารี่ที่สอดคล้องกับไฟล์รูปภาพ // นอกจากนี้เรายังสามารถเขียนการเข้ารหัสรูปภาพไปยังไฟล์อื่นได้ ซึ่งเทียบเท่ากับการที่เราคัดลอกรูปภาพ fs.writeFile(' ./bar) .png' ข้อมูล ผิดพลาด => {
    console.log(ผิดพลาด); 
  -
})

• หากต้องการพลิกและครอบตัดรูปภาพ คุณสามารถใช้ไลบรารี sharp

const sharp = need('sharp')

// ครอบตัดรูปภาพ logo.png เป็น 200x300 แล้วคัดลอกไปที่ไฟล์ bax.png sharp('./logo.png')
  .resize(200, 300)
  .toFile('./bax.png', (ผิดพลาด, ข้อมูล) => {
    console.log(ผิดพลาด);
  -

// คุณยังสามารถแปลงไฟล์รูปภาพเป็นบัฟเฟอร์ก่อน แล้วจึงเขียนลงในไฟล์ คุณยังสามารถคัดลอกรูปภาพที่คมชัด('./logo.png')
  .resize(300, 300)
  .toBuffer()
  .แล้ว(ข้อมูล => {
    fs.writeFile('./baa.png', data, err => {
      console.log(ผิดพลาด);
    -
  })

กระบวนการสร้างบัฟเฟอร์

• จริงๆ แล้วเมื่อเราสร้าง Buffer เราจะไม่ได้ใช้หน่วยความจำจากระบบปฏิบัติการบ่อยนัก โดยค่าเริ่มต้นจะนำไปใช้กับหน่วยความจำขนาด 8 * 1024 ไบต์ก่อน นั่นคือ 8kb
• จนกระทั่งหน่วยความจำเป็น ไม่เพียงพอหรือเกือบหมดเท่านั้น จากนั้นเราจะนำไปใช้กับ

ลูปเหตุการณ์หน่วยความจำใหม่และ IO แบบอะซิงโครนัส

เหตุการณ์วนซ้ำคืออะไร?

• วงเหตุการณ์คืออะไร?

  • อันที่จริง ฉันเข้าใจ event loop ว่าเป็นสะพานเชื่อมระหว่าง JS ที่เราเขียนกับเบราว์เซอร์หรือ Node

• event loop ของเบราว์เซอร์คือลิงก์ระหว่างโค้ด JS ที่เราเขียนและการเรียก API ของเบราว์เซอร์ ( setTimeout , AJAX ,监听事件ฯลฯ) ) บริดจ์สื่อสารผ่านฟังก์ชันการโทรกลับ ลู
• ปเหตุการณ์ของโหนดเป็นสะพานเชื่อมระหว่างโค้ด JS ที่เราเขียนและการเรียกของระบบ ( file system networ ฯลฯ)

กระบวนการและเธรด

กระบวนการและเธรดเป็นสองแนวคิดในระบบปฏิบัติการ:

• กระบวนการ ( process ): โปรแกรมที่คอมพิวเตอร์รัน
• เธรด ( thread ): หน่วยที่เล็กที่สุดที่ระบบปฏิบัติการสามารถรันกำหนดการคำนวณได้ ดังนั้น CPU จึงสามารถดำเนินการได้โดยตรง เธรดซึ่ง

ฟังดูเป็นนามธรรมมาก เราจะอธิบายตามสัญชาตญาณ:

• กระบวนการ: เราคิดว่าเมื่อคุณเริ่มแอปพลิเคชัน กระบวนการ (อาจจะหลายกระบวนการ) จะเริ่มต้นตามค่าเริ่มต้น
• เธรด: ในแต่ละกระบวนการ เธรดจะเริ่มต้น เพื่อรันโค้ดในโปรแกรม เธรดนี้เรียกว่า เธรดหลัก
• ดังนั้นเราจึงสามารถพูดได้ว่ากระบวนการนี้เป็นคอนเทนเนอร์ของเธรด

ลองใช้ตัวอย่างที่ชัดเจนเพื่ออธิบาย

• ว่า
• ระบบปฏิบัติการมีความคล้ายคลึงกับโรงงาน
• การประชุมเชิงปฏิบัติการในโรงงาน การประชุมเชิงปฏิบัติการนี้เป็นกระบวนการ
• แต่ละการประชุมเชิงปฏิบัติการอาจมีคนงานมากกว่าหนึ่งคน ในโรงงาน ผู้ปฏิบัติงานนี้เป็น

ระบบปฏิบัติการ

แบบหลายเธรดที่สามารถพัฒนา

และตรวจสอบข้อมูล) ทำงานไปพร้อมๆ กัน?

• เนื่องจากความเร็วในการประมวลผลของ CPU นั้นเร็วมาก และสามารถสลับระหว่างกระบวนการต่างๆ ได้อย่างรวดเร็ว
• เมื่อเธรดในกระบวนการของเราได้รับส่วนแบ่งเวลา พวกเขาสามารถรันโค้ดที่เราเขียนได้อย่างรวดเร็ว ซึ่ง
• เป็นประสบการณ์ที่ยอดเยี่ยมสำหรับผู้ใช้ ไม่มีการสลับที่รวดเร็วเช่นนี้

เบราว์เซอร์และ JavaScript

• เรามักพูดว่า JavaScript เป็นแบบเธรดเดียว แต่เธรด JS ควรมีกระบวนการคอนเทนเนอร์ของ Node เอง

• เบราว์เซอร์หรือเบราว์เซอร์ Node เป็นกระบวนการหรือไม่ มีเพียงเธรดเดียวในนั้นหรือไม่

  เบราว์เซอร์ปัจจุบันส่วนใหญ่มีหลายกระบวนการ เมื่อเราเปิดหน้าแท็บ
  • กระบวนการ
  • tab จะเริ่มต้นขึ้น เพื่อป้องกันไม่ให้หน้าหนึ่งติดขัดและทำให้ทุกหน้าไม่ตอบสนอง
  • มีหลายเธรดในกระบวนการรวมถึงเธรดที่เรียกใช้โค้ด JavaScript ด้วย

• อย่างไรก็ตาม การประมวลผลโค้ด JavaScript จะดำเนินการในเธรดที่แยกจากกัน

  • ซึ่งหมายความว่าโค้ด JS สามารถทำสิ่งเดียวเท่านั้นในเวลา
  • เดียวกัน ใช้เวลานาน ฉันคิดว่าเธรดปัจจุบันจะถูกบล็อก

กระบวนการดำเนินการ JavaScript

จะไม่ถูกดำเนินการจนกว่าจะถูกผลักเข้าไปในสแต็กการเรียกใช้ฟังก์ชัน มาวิเคราะห์กระบวนการดำเนินการของข้อความ

const = 'Hello World '

console.log(ข้อความ);

ผลรวมของฟังก์ชัน (num1, num2) {
  กลับ num1 + num2
-

ฟังก์ชั่นฟู() {
  ผลลัพธ์ const = ผลรวม (20, 30)
  console.log(ผลลัพธ์);
-

foo()

• จริงๆ แล้วโค้ด JS ของเราถือได้ว่าถูกดำเนินการในฟังก์ชัน main เหมือนกับภาษาโปรแกรมอื่นๆ
• อันดับแรก เราต้องพุชฟังก์ชันหลักเข้าไปในฟังก์ชันสแต็ก
• กำหนด message ตัวแปร
• และเรียกใช้ฟังก์ชัน log ฟังก์ชันจะถูกวาง เข้าสู่ฟังก์ชัน call stack หลังจากดำเนินการแล้ว ให้เปิดฟังก์ชัน
• foo และเรียกใช้ฟังก์ชัน foo ลงในฟังก์ชัน call stack อย่างไรก็ตาม ฟังก์ชัน sum จะต้องถูกเรียกใช้ระหว่างการดำเนินการ
• ดังนั้นฟังก์ชัน sum จะ จะถูกผลักเข้าไปในการเรียกฟังก์ชัน ฟังก์ชัน sum หลังจากการดำเนินการเสร็จสิ้น
• ฟังก์ชัน foo ยังได้รับค่าที่ส่งคืนโดยฟังก์ชัน sum และดำเนินการกำหนด ฟังก์ชัน log อีกครั้ง
• จึงต้องกดฟังก์ชัน log ลงบน call stack หลังจากเรียกใช้ฟังก์ชัน log แล้ว ฟังก์ชัน foo จะถูกดึงออกจากสแต็
• ก ฟังก์ชัน foo ถูกดำเนินการ รหัส js ทั้งหมดจะถูกดำเนินการ และฟังก์ชันหลักจะถูกดึงออกมาจาก

ลูปเหตุการณ์ของเบราว์เซอร์

อะไรขึ้นหากมีการดำเนินการแบบอะซิงโครนัสระหว่างการเรียกใช้โค้ด JS

• ตัวอย่างเช่น ถ้าเราแทรกการเรียกฟังก์ชัน setTimeout ไว้ตรงกลาง
• ฟังก์ชัน setTimeout จะถูกใส่ลงใน call stack และการดำเนินการจะสิ้นสุดทันที และจะไม่บล็อกการทำงานของโค้ดที่ตามมา

จากนั้น ฟังก์ชันจะส่งผ่านไปยังฟังก์ชัน setTimeout (เราเรียกว่าฟังก์ชัน timer ) จะดำเนินการเมื่อใด?

• ในความเป็นจริง setTimeout เรียก web api เบราว์เซอร์จะจัดเก็บฟังก์ชันการโทรกลับไว้ล่วงหน้า เมื่อถึงเวลาที่เหมาะสม ฟังก์ชันตัวจับเวลาจะถูกเพิ่มลงในคิว
• เหตุการณ์

เหตุใด setTimeout จึงไม่บล็อกการทำงานของโค้ด

• เมื่อมีการดำเนินการใน call stack

เป็นเพราะเบราว์เซอร์รักษาสิ่งที่สำคัญมากไว้ -

• เบราว์เซอร์ลูปเหตุการณ์จะช่วยเราบันทึกฟังก์ชันการโทรกลับใน setTimeout ด้วยวิธีใดวิธีหนึ่ง วิธีทั่วไปคือบันทึกไว้ในแผนผังสีแดงดำ

• และรอจนกว่าจะกำหนดเวลา setTimeout เมื่อถึงเวลาของตัวจับเวลา มันจะนำฟังก์ชันการเรียกกลับของตัวจับเวลาออกจากตำแหน่งที่บันทึกไว้และนำไปไว้ในคิวเหตุการณ์

• เมื่อลูปเหตุการณ์พบว่ามีบางอย่างอยู่ในคิวของเรา และสแต็กการเรียกฟังก์ชันปัจจุบันว่างเปล่า หลังจากดำเนินการโค้ดการซิงโครไนซ์แล้ว ฟังก์ชันการโทรกลับในคิวของเราจะถูกแยกออกจากคิวและใส่ลงในสแต็กการเรียกฟังก์ชันเพื่อดำเนินการ (ฟังก์ชันถัดไปจะไม่ถูกผลักเข้าไปในสแต็กจนกว่าฟังก์ชันก่อนหน้าในคิวจะโผล่ออกมา)

แน่นอน จะต้องมีเพียงเหตุการณ์เดียวเท่านั้น ตัวอย่างเช่น ในระหว่างกระบวนการบางอย่าง ผู้ใช้คลิกปุ่มในเบราว์เซอร์ เราอาจมีจอภาพสำหรับการคลิกปุ่มนี้ ซึ่งสอดคล้องกับฟังก์ชันการโทรกลับ จะถูกเพิ่มเข้าไปในคิวของเราด้วย ลำดับการดำเนินการจะขึ้นอยู่กับลำดับที่อยู่ในคิวเหตุการณ์ นอกจากนี้ยังมีบทสรุปของการเรียกกลับที่เราส่งคำขอ ajax ไปยังคิวเหตุการณ์

: อันที่จริง event loop เป็นสิ่งที่ง่ายมาก หมายความว่าเมื่อจำเป็นต้องดำเนินการโทรกลับบางอย่างภายใต้สถานการณ์พิเศษ การโทรกลับจะบันทึกไว้ ล่วงหน้าจะถูกยัดเข้าไปในคิวเหตุการณ์ และลูปเหตุการณ์จะนำมันออกมาและวางลงในสแต็กการเรียกใช้ฟังก์ชัน

งานแมโครและงานไมโคร

อย่างไรก็ตาม ลูปเหตุการณ์ไม่ได้รักษาเพียงคิวเดียว จริงๆ แล้ว มีสองคิว และการดำเนินการของงานในคิวต้องรอ

• จนกว่า

• macrotask queue

• ajax

• setTimeout , setInterval , การตรวจสอบ DOM , UI Rendering และ
• คิว microtask อื่น ๆ ( microtask queue ): then Promise จะโทรกลับ, Mutation Observer API , queueMicrotask() ฯลฯ

แล้วอะไรคือลำดับความสำคัญของสองคิวในลูปเหตุการณ์

• โค้ดใน main script จะถูกดำเนินการก่อน (โค้ดสคริปต์ระดับบนสุดที่เขียน)
• ก่อนที่จะดำเนินการงานแมโครใดๆ (ไม่ใช่คิว แต่เป็นงานแมโคร) ก่อนอื่นจะตรวจสอบก่อนว่ามีงานในคิวไมโครทาสก์ที่จำเป็นต้อง จะถูกดำเนินการ

• • นั่นคือก่อนที่งานแมโครจะถูกดำเนินการ จะต้องแน่ใจว่าคิวไมโครทาสก์ว่างเปล่า
  • หากไม่ว่างเปล่า งาน (การเรียกกลับ) ในคิวไมโครทาสก์จะถูกดำเนินการ

ก่อน

จุดทดสอบ: main stcipt , setTimeout , Promise then , queueMicrotask

setTimeout(() => {
  console.log('set1');4
  สัญญาใหม่ (แก้ไข => {
    แก้ไข()
  }).แล้ว(แก้ไข => {
    สัญญาใหม่ (แก้ไข => {
      แก้ไข()
    }).แล้ว(() => {
      console.log('แล้ว4');
    -
    console.log('แล้ว2');
  -
-

สัญญาใหม่ (แก้ไข => {
  console.log('pr1');
  แก้ไข()
}).แล้ว(() => {
  console.log('แล้ว1');
-

setTimeout(() => {
  console.log('set2');
-

คอนโซล.บันทึก(2);

QueueMicrotask(() => {
  console.log('queueMicrotask');
-

สัญญาใหม่ (แก้ไข => {
  แก้ไข()
}).แล้ว(() => {
  console.log('แล้ว3');
-

// pr1
// 2
//แล้ว1
//queueMicrotask
//แล้ว3
// set1
//แล้ว2
//แล้ว4
// set2

• setTimeout จะถูกผลักเข้าไปใน function call stack ทันที และจะถูก popped ออกจาก stack ทันทีหลังจากดำเนินการ ฟังก์ชัน timer จะถูกใส่เข้าไปในคิวงานมาโคร

• ฟังก์ชันที่ส่งผ่านไปยังคลาส Promise จะถูกดำเนินการทันที มันไม่ใช่ฟังก์ชันการโทรกลับ ดังนั้นจึงจะถูกพิมพ์ออกมา pr1 และเนื่องจากวิธี resolve ถูกดำเนินการ สถานะของสัญญาจะเปลี่ยนเป็น fulfilled ตาม ทันที ดังนั้นเมื่อฟังก์ชัน then ถูกดำเนินการ ฟังก์ชันการโทรกลับที่เกี่ยวข้องจะ ถูกใส่ลงในคิวไมโครทาสก์และ

• พบฟังก์ชัน setTimeout อีกครั้ง เมื่อสแต็กถูกเปิด ฟังก์ชันตัวจับเวลาจะถูกใส่ลงในคิวงานแมโคร

• เมื่อพบคำสั่ง console.log หลังจากที่ฟังก์ชันถูกพุชลงบนสแต็ 2 ถูกพิมพ์ออกมาแล้วเด้งออกมา

• ฟังก์ชั่นถูกผูกไว้กับ queueMicrotask ที่นี่ และฟังก์ชั่นจะถูกวาง หลังจากเข้าสู่คิว Microtask

• จะพบคำสั่ง Promise ใหม่ แต่จะเปลี่ยนสถานะ Promise ทันที ดังนั้นการโทรกลับ ที่สอดคล้องกับฟังก์ชันนั้นก็ถูกใส่เข้าไปในคิวไมโครทาสก์ด้วย

• เนื่องจากโค้ดสคริปต์การซิงโครไนซ์ได้รับการดำเนินการแล้ว ขณะนี้เหตุการณ์อยู่ที่จุดเริ่มต้นของลูป งานที่แข่งขันกับคิวไมโครทาสก์และงานมาโครจะถูกใส่ลงใน function call stack ตามลำดับความสำคัญ หมายเหตุ: ลำดับความสำคัญของงานขนาดเล็กนั้นสูงกว่างานมาโคร คุณต้องอ่านทุกครั้งก่อนต้องการดำเนินการงานมาโคร มันไม่ว่างเปล่า คุณต้องดำเนินการงานของคิวไมโครทาสก์ก่อน

• ไมโครทาสก์แรกคือการพิมพ์ then1 ไมโครทาสก์ที่สองคือการพิมพ์คิวไมโครทาสก์ และไมโครทาสก์ที่สามคือการพิมพ์ จากนั้น then3 การดำเนินการเสร็จสิ้น เริ่มดำเนินการงานแมโคร

• งานแมโครแรกมีความซับซ้อนมากขึ้น อันดับแรกจะพิมพ์ set1 จากนั้นจึงดำเนินการคำสั่ง new promise ที่จะเปลี่ยนสถานะทันที คิวไม่ว่างเปล่า ดังนั้นจึงจำเป็นต้องดำเนินการคิวไมโครทาสก์ที่มีลำดับความสำคัญสูงกว่า ซึ่งเทียบเท่ากับการดำเนินการโทรกลับทันที ซึ่งเป็นคำสั่ง Promise ใหม่เดียวกัน และการสลับที่สอดคล้องกันนั้นจะถูกใส่ลงในคิวไมโครทาสก์ โปรดทราบว่ามีฟังก์ชัน console หลังจากคำสั่ง Promise ใหม่ ฟังก์ชันนี้จะถูกดำเนินการทันทีหลังจากคำสั่ง Promise ใหม่ถูกดำเนินการ นั่นคือ การพิมพ์ then2 ยังมีงานในการเผชิญหน้าไมโครทาสก์ ดังนั้นขั้นตอนต่อไปคือการพิมพ์ then4 . จนถึงขณะนี้ คิวไมโครทาสก์ว่างเปล่า และคิวแมโครทาสก์สามารถดำเนินการต่อไปได้

• ดังนั้นแมโครทาสก์ set2 2 ต่อไปจะถูกพิมพ์ หลังจากดำเนินการแมโครทาสก์แล้ว

• ผลลัพธ์การพิมพ์ของโค้ดทั้งหมดจะเป็น: pr1 -> 2 -> then1 -> queueMicrotask -> then3 -> set1 -> then2 -> then4 -> set2

คำถามสัมภาษณ์ <2>

จุดทดสอบ: main script setTimeout , Promise then , queueMicrotask , await async

ส่วนเสริมความรู้ async: async, await เป็นไวยากรณ์น้ำตาล สำหรับ Promise เมื่อจัดการกับปัญหาลูปเหตุการณ์

• เราสามารถถือว่าโค้ดที่ดำเนินการหลังจากคีย์เวิร์ด await เป็นโค้ดที่รวมอยู่ใน new Promise((resolve,rejcet) => { 函数执行})
• สามารถถือว่าโค้ดหลังคำสั่ง await ได้ เป็นโค้ดใน then(res => {函数执行}) ในฟังก์ชัน Promise

async ก่อนหน้า async1() {
  console.log('async1 เริ่มต้น');
  รอ async2()
  console.log('async1 สิ้นสุด');
-

ฟังก์ชันอะซิงก์ async2() {
  console.log('async2');
-

console.log('สคริปต์เริ่มต้น');

setTimeout(() => {
  console.log('setTimeout');
}, 0)

อะซิงก์1()

สัญญาใหม่ (แก้ไข => {
  console.log('promise1');
  แก้ไข()
}).แล้ว(() => {
  console.log('promise2');
-

console.log('สิ้นสุดสคริปต์');

// สคริปต์เริ่มต้น
// เริ่มต้น async1
// async2
//สัญญา1
// สิ้นสุดสคริปต์
// สิ้นสุด async1
//สัญญา2
// setTimeout

• เป็นคำจำกัดความของฟังก์ชันที่จุดเริ่มต้น และไม่จำเป็นต้องถูกผลักเข้าไปในสแต็กการเรียกฟังก์ชันเพื่อดำเนินการจนกว่าจะพบคำสั่ง console แรก หลังจากกดสแต็กแล้ว ให้รัน script start จากนั้นจึงนำออกจาก stack

• เพื่อพบกับฟังก์ชัน setTimeout แรก ซึ่งสอดคล้องกับ timer จะถูกใส่ลงในคิวงานมาโคร

• และฟังก์ชัน async1 จะถูกดำเนินการ ขั้นแรก async1 start จะถูกพิมพ์ จากนั้นฟังก์ชัน async2 หลังจากคำสั่ง await จะถูกดำเนินการ เพราะดังที่ได้กล่าวไว้ก่อนหน้านี้ ฟังก์ชันที่อยู่หลังคีย์เวิร์ด await ถือเป็น new Promise ฟังก์ชันนี้จะถูกดำเนินการทันที ดังนั้น async2 จะถูกพิมพ์ออกมา แต่โค้ดที่อยู่หลังคำสั่ง await จะเทียบเท่ากับการใส่ลงใน callback กล่าวคือ console.log('async1 end') บรรทัดของโค้ดนี้ถูกใส่ลงในคิว microtask

• promise1 โค้ดยังคงดำเนินการต่อไป จากนั้นการโทรกลับจะถูกใส่ลงในคิวไมโครทาสก์เพื่อ

• ดำเนินการฟังก์ชัน script end การซิงโครไนซ์ได้ถูกดำเนินการแล้ว ลูปเหตุการณ์จะไปที่งานแมโครและคิวงานไมโครเพื่อดำเนินการงาน

• อันดับแรก ไปที่ไมโคร คิวงาน คำสั่งการพิมพ์ที่สอดคล้องกับงานไมโครงานแรกจะถูกดำเนินการ ซึ่งหมายความว่า async1 end จะถูกพิมพ์ จากนั้น promise2 จะถูกพิมพ์ ในเวลานี้ คิวไมโครทาสก์จะว่างเปล่า และงานในคิวงานแมโครจะเริ่มต้นขึ้น จะถูกดำเนินการ

• setTimeout ที่สอดคล้องกับฟังก์ชันจับเวลาจะถูกพิมพ์ ในเวลานี้ งานแมโครจะถูกดำเนินการด้วย และลำดับการพิมพ์สุดท้ายคือ: script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout