เราทุกคนรู้ดีว่าเบราว์เซอร์รันโค้ด js ในเธรดเดียว เมื่อดำเนินการขั้นตอนของเพจ เพจจะไม่สามารถตอบสนองต่อสิ่งอื่นใดได้จนกว่าขั้นตอนนี้จะสิ้นสุดลง WebWorkers ที่แนะนำที่นี่สามารถเปลี่ยนแปลงทุกอย่างได้
WebWorkers คือโค้ด js ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นอยู่กับสคริปต์อื่นๆ และจะไม่ส่งผลต่อประสิทธิภาพของเพจ เราสามารถทำสิ่งที่เราต้องการต่อไปได้ เช่น คลิก เลือกเนื้อหา ฯลฯ ในขณะที่ WebWorkers ทำงานในเบื้องหลัง
พนักงานเว็บได้รับการสนับสนุนโดยเบราว์เซอร์หลัก ๆ ทั้งหมด ยกเว้น Internet Explorer
ขั้นตอนแรก: สร้างคนงานเรียกตัวสร้าง Worker() และระบุ URI ของสคริปต์ที่จะเรียกใช้ในเธรดของผู้ปฏิบัติงาน ตัวอย่างเช่น หน้าปัจจุบันระบุว่าสคริปต์ที่ดำเนินการโดยเธรดของผู้ปฏิบัติงานคือ script-worker.js
var myWorker = ผู้ปฏิบัติงานใหม่ (script-worker.js);
ใน script-worker.js เราสามารถรันโค้ดเพิ่มเติมได้ และการรันโค้ดนี้จะไม่ส่งผลกระทบต่อเพจเพื่อทำสิ่งอื่นๆ ที่คุณต้องการทำ ซึ่งฟังดูดีมาก
ขั้นตอนที่ 2: ส่งผ่านข้อมูลเพจสามารถโต้ตอบกับผู้ปฏิบัติงานเพื่อถ่ายโอนข้อมูล เพื่อให้ผู้ปฏิบัติงานสามารถคำนวณแบบเงียบ ๆ โดยไม่ส่งผลกระทบต่อความสามารถของเพจในการทำสิ่งที่มีความหมาย จากนั้นบอกให้เพจใช้ข้อมูล
//[รหัสหน้าหลัก]myWorker.postMessage(data-from-mainpage);//[รหัสผู้ปฏิบัติงาน]onmessage = function (oEvent) { console.log(ข้อมูลที่ส่งจากหน้าหลักคือ: +oEvent.data)) ; };ข้างต้นคือสถานการณ์ของ [หน้าหลักส่งข้อมูลไปยังสคริปต์คนงาน] ใช่ คุณเห็นโพสต์ข้อความที่เป็นมิตรมาก โอเค ฉันชอบสิ่งนี้
//[รหัสหน้าหลัก] myWorker.onmessage = function (oEvent) { console.log(ข้อมูลที่ส่งโดยสคริปต์ผู้ปฏิบัติงานคือ: +oEvent.data)); //[รหัสผู้ปฏิบัติงาน]postMessage(data-from- หน้าหลัก );ข้างต้นคือสถานการณ์ของ [สคริปต์ผู้ปฏิบัติงานส่งข้อมูลไปยังหน้าหลัก] มันยังง่ายมาก แต่สิ่งเหล่านี้เป็นเพียง API ที่สำคัญคือการใช้งานอย่างชาญฉลาดนั้นมีประโยชน์
นอกจากนี้ อาจมีข้อผิดพลาดในการดำเนินการของผู้ปฏิบัติงาน และหน้าหลักผ่านไป:
myWorker.onerror=function(oEvent){};คุณสามารถตรวจสอบข้อผิดพลาดของผู้ปฏิบัติงานได้
ขั้นตอนที่ 3: จุดสำคัญเธรดผู้ปฏิบัติงานสามารถทำงานได้โดยไม่รบกวน UI โค้ด JavaScript ที่ดำเนินการนั้นอยู่ในขอบเขตอื่นโดยสมบูรณ์และไม่ได้แชร์ขอบเขตกับโค้ดในหน้าเว็บปัจจุบัน
วิธีการ importScripts() มีให้ในขอบเขตส่วนกลางของ Worker ซึ่งรับ URL อย่างน้อย 1 รายการที่ชี้ไปยังไฟล์ JavaScript กระบวนการโหลดจะดำเนินการแบบอะซิงโครนัส
importScripts() จะมีผลก็ต่อเมื่อคุณระบุ URI ที่แน่นอน และกระบวนการดำเนินการเป็นแบบอะซิงโครนัสเช่นกัน
เมื่อเราสร้างออบเจ็กต์ WebWorkers ออบเจ็กต์จะคอยฟังข้อความต่อไป (แม้ว่าสคริปต์ภายนอกจะเสร็จสมบูรณ์แล้ว) จนกว่าจะถูกยกเลิก ใช้เมธอด myWorker.terminate() เพื่อยุติ WebWorkers และปล่อยทรัพยากรของเบราว์เซอร์/คอมพิวเตอร์
ขั้นตอนที่ 4: ข้อจำกัดที่สำคัญ1. ไม่สามารถเข้าถึงโหนด DOM ตัวแปรส่วนกลางหรือฟังก์ชันส่วนกลาง ไม่สามารถเรียกใช้ฟังก์ชันต่างๆ เช่น alert() หรือยืนยัน และไม่สามารถเข้าถึงตัวแปรส่วนกลางของเบราว์เซอร์ เช่น หน้าต่างและเอกสาร
2. อย่างไรก็ตาม Javascript ใน Web Worker ยังคงสามารถใช้ฟังก์ชันต่างๆ เช่น setTimeout() และ setInterval() และยังสามารถใช้ออบเจ็กต์ XMLHttpRequest สำหรับการสื่อสาร Ajax ได้อีกด้วย
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network