ใน JavaScript มีหลายวิธีในการปรับปรุงส่วนติดต่อผู้ใช้โดยรวมของไซต์ ที่ “คนทำงานเว็บ” เป็นแนวทางหนึ่งที่ช่วยให้เธรดหลักสามารถดำเนินการต่อไปได้โดยไม่ถูกบล็อก ประกอบด้วยอินสแตนซ์กลไก JavaScript ที่แยกจากกัน และด้วยเหตุนี้จึงไม่สามารถเรียกใช้ฟังก์ชันการทำงานของเธรดหลักได้
บทความนี้จะกล่าวถึงวิธีการใช้ “คนทำงานเว็บ” สำหรับมัลติเธรดใน JavaScript
Web Worker คืออะไร?
“คนทำงานเว็บ” สอดคล้องกับ API ของเบราว์เซอร์ที่ช่วยให้ JavaScript สามารถรันงานแบบขนาน/พร้อมกันบนเธรดแยกต่างหาก/เฉพาะ
ความต้องการคนทำงานเว็บคืออะไร?
เนื่องจาก JavaScript เป็นแบบเธรดเดียว ดังนั้นโค้ด JavaScript ที่ซับซ้อนจึงบล็อกเธรด UI เช่น หยุดหน้าต่างหลักที่จัดการกับงานทั้งหมดสำหรับการรีเฟรช การใช้เหตุการณ์อินพุตของผู้ใช้ ฯลฯ ในสถานการณ์เช่นนี้ ประสบการณ์ผู้ใช้จะได้รับผลกระทบ . เพื่อรับมือกับปัญหานี้ “คนทำงานเว็บ” มีผลบังคับใช้และแก้ไขการบล็อกเธรด UI
วิธีใช้ Web Workers สำหรับมัลติเธรดด้วย JavaScript
เพื่อทำก “คนทำงานเว็บ” ใช้ตัวสร้างผู้ปฏิบัติงาน เป็นเช่นนั้น โดยจะใช้ URL เป็นอาร์กิวเมนต์ ซึ่งสอดคล้องกับเส้นทางของไฟล์สคริปต์ผู้ปฏิบัติงานที่ใช้ฟังก์ชันที่ต้องการ อย่างไรก็ตาม หากต้องการรวมโค้ดผู้ปฏิบัติงานในไฟล์ HTML ให้ใช้ a 'หยด' เพื่อเขียนรหัสพนักงาน
ไวยากรณ์ (การสร้าง Web Worker)
ค่าคงที่ x = ใหม่ คนงาน ( 'worker.js' ) ;ไวยากรณ์ (ส่งข้อความถึงคนงาน)
ค่าคงที่ x = ใหม่ คนงาน ( 'worker.js' ) ;
ไวยากรณ์ (การรับข้อความจากคนงาน)
x. ส่งข้อความ = การทำงาน ( เหตุการณ์ ) {คอนโซล บันทึก ( เหตุการณ์. ข้อมูล ) ;
} ;
ตัวอย่าง: การใช้ “Web Worker” เพื่อคำนวณแฟกทอเรียลของตัวเลขใน JavaScript
ตัวอย่างต่อไปนี้ใช้ “คนงาน()” Constructor เพื่อสร้าง Web Worker และคำนวณแฟกทอเรียลของตัวเลข:
< html >
< ศีรษะ >
< สไตล์ h2 = 'จัดแนวข้อความ: กึ่งกลาง;' > ตัวอย่างคนทำงานเว็บ h2 >
ศีรษะ >
< ร่างกาย >
< สคริปต์ >
ค่าคงที่ x = ใหม่ คนงาน ( URL createObjectURL ( ใหม่ หยด ( [
`
// สคริปต์ผู้ปฏิบัติงาน
ค่าคงที่ ข้อเท็จจริง = ( n ) => {
ถ้า ( n == 0 || n == 1 ) {
กลับ 1น ;
}
อื่น {
กลับ บิ๊กอินท์ ( n ) * ข้อเท็จจริง ( บิ๊กอินท์ ( n ) - - 1น ) ;
}
} ;
ตัวเอง. ส่งข้อความ = ( เหตุการณ์ ) => {
ค่าคงที่ กับ = ข้อเท็จจริง ( เหตุการณ์. ข้อมูล ) ;
ตัวเอง. โพสต์ข้อความ ( กับ. toString ( ) ) ;
} ; `
] , { พิมพ์ : : 'ข้อความ/จาวาสคริปต์' } ) ) ) ;
x. โพสต์ข้อความ ( 15น ) ;
x. ส่งข้อความ = ( เหตุการณ์ ) => {
ค่าคงที่ ออก = เหตุการณ์. ข้อมูล ;
คอนโซล บันทึก ( 'แฟคทอเรียลของ 15 ผ่าน Web Worker-> ' , ออก ) ;
} ;
ร่างกาย >
html >
ในรหัสนี้ ใช้ขั้นตอนต่อไปนี้:
- ขั้นแรก ระบุหัวข้อที่ระบุ
- หลังจากนั้นให้สร้าง “คนทำงานเว็บ” วัตถุที่มี URL ของวัตถุ Blob ที่ประกอบด้วยรหัสสำหรับผู้ปฏิบัติงาน
- รหัสที่ทุ่มเทให้กับผู้ปฏิบัติงานจะรวมอยู่ในฟังก์ชันที่ไม่ระบุชื่อซึ่งคำนวณแฟกทอเรียลของตัวเลขผ่านฟังก์ชันแบบเรียกซ้ำ
- นอกจากนี้ ผู้ปฏิบัติงานยังรับฟังข้อความที่ส่งผ่านเธรดหลักโดยใช้ “self.onmessage” เหตุการณ์ ดึงค่าแฟกทอเรียลของตัวเลขที่ส่งผ่าน และให้ผลลัพธ์แก่เธรดหลักผ่านทาง “โพสต์ข้อความ()” วิธี.
- ในเธรดหลัก ให้สร้างอินสแตนซ์ของผู้ปฏิบัติงานและส่งข้อความพร้อมหมายเลข “ 15น '. ที่นี่, ' n ” หมายถึงค่า “BigInt”
- หลังจากที่ผู้ปฏิบัติงานคำนวณแฟกทอเรียลเสร็จแล้ว ผู้ปฏิบัติงานจะส่งผล/ผลลัพธ์กลับไปยังเธรดหลักโดยใช้ “โพสต์ข้อความ()” วิธี.
- สุดท้าย เธรดหลักจะดึงข้อมูล/รับผลลัพธ์ใน “ข้อความส่งถึง” เหตุการณ์และส่งคืนค่าแฟกทอเรียลที่สอดคล้องกันของตัวเลขบนคอนโซล
เอาท์พุต
ข้อดีของคนทำงานเว็บ
การประมวลผลแบบขนาน : ในกรณีที่รันโค้ดเดียวกันในลักษณะคู่ขนาน
ไม่มีการหยุดชะงักในการดำเนินการโค้ด: การเรียกใช้โค้ดเสร็จสิ้นโดยไม่คำนึงถึงการรีเฟรช ฯลฯ ในหน้าปัจจุบัน
การติดตามความเคลื่อนไหว: การตรวจจับการเคลื่อนไหวทั้งหมดเกิดขึ้นในผู้ปฏิบัติงานเบื้องหลัง
เปิดใช้งานมัลติเธรด: สิ่งเหล่านี้เปิดใช้งานมัลติเธรดใน JavaScript
ประสิทธิภาพที่เพิ่มขึ้น: ปรับประสิทธิภาพให้เหมาะสมโดยการทำงานที่เข้มข้น/ท้าทายในเธรดที่แยกจากกัน
ประสบการณ์ผู้ใช้ที่มีประสิทธิภาพ: สิ่งเหล่านี้หลีกเลี่ยงการบล็อกเธรดหลัก ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ตอบสนอง
ข้อจำกัดของ Web Worker
อย่างไรก็ตาม มีข้อจำกัดบางประการสำหรับคนทำงานเว็บเช่นกัน มีระบุไว้ดังต่อไปนี้:
- การใช้หน่วยความจำมากขึ้น
- ไม่สามารถอัปเดต DOM ในเธรดของผู้ปฏิบัติงานหรือเรียกใช้วัตถุหน้าต่าง
บทสรุป
“คนทำงานเว็บ” สอดคล้องกับ API ของเบราว์เซอร์ที่เปิดใช้งาน JavaScript เพื่อรันงานในเวลาเดียวกันบนเธรดแยกต่างหาก/เฉพาะ สิ่งเหล่านี้สามารถนำมาใช้โดยการใช้ URL เป็นอาร์กิวเมนต์ ซึ่งสอดคล้องกับเส้นทางของไฟล์สคริปต์ของผู้ปฏิบัติงาน บล็อกนี้กล่าวถึงการใช้ “Web Workers” สำหรับการทำงานแบบมัลติเธรดใน JavaScript