API ของ JavaScript เบื้องต้นเกี่ยวกับ Web Workers

เว็บแรงงาน เป็น JavaScript API ที่ช่วยให้คุณ เรียกใช้สคริปต์ในชุดข้อความแยกต่างหากจากชุดหลัก. มันมีประโยชน์เมื่อคุณไม่ต้องการอุปสรรคใด ๆ ในการเรียกใช้สคริปต์หลักเนื่องจากสคริปต์พื้นหลัง.

API ของ Web Workers คือ สนับสนุนในเกือบทุกเบราว์เซอร์, สำหรับข้อมูลเพิ่มเติมดูที่ CanIUse docs ก่อนที่จะเริ่มใช้งานโค้ดลองมาดูสถานการณ์สองสามข้อที่คุณอาจต้องการใช้ API นี้เพื่อให้คุณเข้าใจถึงสิ่งที่ฉันต้องการ สคริปต์แบบพื้นหลัง.

ใช้กรณี

สมมติว่ามีสคริปต์ที่ ดึงข้อมูลและประมวลผลไฟล์. หากเป็นไฟล์ อย่างมาก ใหญ่มันจะใช้เวลานานในการประมวลผล! ซึ่งอาจทำให้สคริปอื่น ๆ ที่ถูกเรียกใช้ในภายหลังถูกเรียกใช้งาน.

อย่างไรก็ตามหากว่า การประมวลผลไฟล์ถูกย้ายไปยังเธรดพื้นหลัง, รู้จักกันในนาม ด้ายคนงาน, กิจกรรมอื่นจะไม่ถูกบล็อกจนกว่ากิจกรรมก่อนหน้าจะจบ.

สคริปต์ ดำเนินการในเธรดพื้นหลังของผู้ปฏิบัติงาน เป็นที่รู้จักกันในนาม สคริปต์ของผู้ปฏิบัติงาน หรือเพียงแค่ ผู้ปฏิบัติงาน.

สำหรับตัวอย่างอื่นให้จินตนาการว่ามี ฟอร์มใหญ่จัดเรียงในแท็บ. มันเขียนสคริปต์ในลักษณะที่ปรับปรุงการควบคุมในหนึ่งแท็บ ส่งผลกระทบต่อบางส่วนของการควบคุมในอื่น ๆ.

หากการอัปเดตของแท็บอื่นใช้เวลาพอสมควรแก่ผู้ใช้ ไม่สามารถใช้แท็บปัจจุบันอย่างต่อเนื่อง โดยไม่มีการหยุดกิจกรรม การดำเนินการนี้อาจทำให้ UI หยุดการทำงานของผู้ใช้.

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

ในทำนองเดียวกันหากคุณพบสถานการณ์ที่สคริปต์ อาจบล็อกผู้ใช้จากการใช้ส่วนต่อประสานผู้ใช้ จนกว่าการดำเนินการจะเสร็จสิ้นคุณอาจพิจารณาย้ายไปยังเธรดผู้ปฏิบัติงานเพื่อให้สามารถดำเนินการในพื้นหลังได้.

ขอบเขตและประเภทของแรงงาน

Web Workers API น่าจะเป็นหนึ่งใน API ที่ง่ายที่สุดในการทำงาน มันมีวิธีการที่ค่อนข้างตรงไปตรงมา สร้างเธรดผู้ปฏิบัติงาน และ สื่อสารกับพวกเขาจากสคริปต์หลัก.

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

อย่างไรก็ตามคุณ สามารถ ใช้ API จำนวนมากที่อยู่ภายใต้ หน้าต่าง, เช่น คำมั่นสัญญา และ นำมา, ในเธรดคนทำงานของคุณ (ดูรายการทั้งหมด).

คุณยังสามารถมี เธรดที่ซ้อนกันของผู้ปฏิบัติงาน: เธรดผู้ทำงานที่สร้างจากเธรดผู้ปฏิบัติงานอื่น คนงานที่สร้างโดยคนอื่นเรียกว่า subworker.

นอกจากนี้ยังมี จำนวนมาก ประเภท ของแรงงาน. หลักสองประการคือ พนักงานที่อุทิศตนและแบ่งปัน.

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

ตัวอย่างในบทช่วยสอนนี้จะเป็น เกี่ยวกับคนงานโดยเฉพาะ, ซึ่งเป็นประเภทที่พบมากที่สุด.

วิธีการ API

ดูแผนภาพด้านล่างสำหรับ ภาพรวมอย่างรวดเร็วของวิธีการหลักทั้งหมด ที่ประกอบไปด้วย Web Workers API.

คนทำงาน () นวกรรมิก สร้างเธรดผู้ปฏิบัติงานเฉพาะ และ ส่งคืนวัตถุอ้างอิงของมัน. จากนั้นเราใช้วัตถุนี้เพื่อสื่อสารกับผู้ปฏิบัติงานที่เฉพาะเจาะจงนั้น.

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

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

รหัสตัวอย่าง

ตอนนี้เรามาดูตัวอย่างรหัส index.html หน้าถือ สคริปต์หลัก ภายใน

เราเริ่มต้นด้วย การสร้างเธรดผู้ปฏิบัติงานจากสคริปต์หลัก.

  w = new Worker ('worker.js'); 
  คนทำงาน () นวกรรมิก รับ URL ของไฟล์ผู้ปฏิบัติงานเป็นอาร์กิวเมนต์.
 จากนั้นเราเพิ่มตัวจัดการเหตุการณ์สำหรับ OnMessage เหตุการณ์ของอินสแตนซ์ของผู้ปฏิบัติงานที่สร้างขึ้นใหม่เพื่อ รับข้อมูลจากมัน.  ข้อมูล คุณสมบัติของ อี เหตุการณ์จะเก็บข้อมูลที่ได้รับ.
  w = new Worker ('worker.js'); w.onmessage = (e) => console.log ('ได้รับจากผู้ปฏิบัติงาน: $ e.data');  
 ตอนนี้เราใช้ postMessage () ไปยัง ส่งข้อมูลไปยังเธรดผู้ปฏิบัติงาน เมื่อคลิกปุ่ม postMessage () วิธีการสามารถใช้สองข้อโต้แย้ง ชนิดแรกสามารถเป็นประเภทใดก็ได้ (สตริง, อาร์เรย์ ... ) มันเป็นข้อมูล เพื่อส่งไปยังเธรดผู้ปฏิบัติงาน (หรือสคริปต์หลักเมื่อมีวิธีการในเธรดผู้ปฏิบัติงาน).
 พารามิเตอร์ที่สองหรือไม่ก็ได้คืออาร์เรย์ของวัตถุที่ สามารถใช้โดยเธรดผู้ปฏิบัติงาน (แต่ไม่ใช่สคริปต์หลักหรือในทางกลับกัน) วัตถุประเภทนี้เรียกว่า สามารถโอนได้ วัตถุ.
  document.querySelector ('ปุ่ม'). onclick = () => w.postMessage ('john');  
 ฉันแค่ส่งค่าสตริงไปยังเธรดผู้ปฏิบัติงาน.
 ในเธรดผู้ปฏิบัติงานเราต้องเพิ่ม OnMessage ตัวจัดการเหตุการณ์นั้น จะได้รับข้อมูล ส่งไปโดยสคริปต์หลักเมื่อคลิกปุ่ม ภายในตัวจัดการเรา เชื่อมสตริงที่ได้รับเข้าด้วยกัน และส่งผลลัพธ์กลับไปที่สคริปต์หลัก.
  console.info ('ผู้ปฏิบัติงานที่สร้างขึ้น'); onmessage = (e) => postMessage ('สวัสดี $ e.data');  
 ไม่เหมือนในสคริปต์หลักที่เราต้องใช้ W วัตถุอ้างอิงถึง อ้างถึงเธรดผู้ปฏิบัติงานเฉพาะ ซึ่งสคริปต์นั้นใช้ OnMessage และ postMessage วิธีการมี ไม่จำเป็นต้องมีวัตถุอ้างอิงในเธรดผู้ปฏิบัติงาน เพื่อชี้ไปที่เธรดหลัก.
 รหัสทำงานดังนี้ เมื่อเบราว์เซอร์โหลด index.html, คอนโซลจะแสดง "คนงานสร้าง" ข้อความทันทีที่ คนงาน () คอนสตรัคจะดำเนินการในหัวข้อหลัก, สร้างคนงานใหม่.
 เมื่อคุณคลิกปุ่มบนหน้าคุณจะได้รับ "ได้รับจากคนงาน: สวัสดีจอห์น" ข้อความในคอนโซลซึ่งเป็นสตริงที่เคยเป็น ตัดแบ่งในเธรดผู้ปฏิบัติงาน กับข้อมูลที่ส่งไปแล้ว ส่งกลับไปที่สคริปต์หลัก.