ภาพรวมของ Web Worker

ที่ผ่านมา เนื้อหาส่วนใหญ่ในหลักสูตรนี้มุ่งเน้นที่แนวคิดต่างๆ เช่น การพิจารณาประสิทธิภาพ HTML โดยทั่วไป, คำแนะนำแหล่งข้อมูล, การเพิ่มประสิทธิภาพทรัพยากรประเภทต่างๆ เพื่อปรับปรุงเวลาในการโหลดหน้าเริ่มต้นและการตอบสนองอินพุตของผู้ใช้ ตลอดจนการโหลดทรัพยากรเฉพาะด้านแบบ Lazy Loading

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

JavaScript มักถูกกล่าวถึงว่าเป็นภาษาแบบชุดข้อความเดียว ในทางปฏิบัติ กรณีนี้หมายถึงเทรดหลัก ซึ่งเป็นเทรดเดียวที่เบราว์เซอร์ทำงานส่วนใหญ่ตามที่คุณเห็นในเบราว์เซอร์ งานนี้ประกอบด้วยงานที่เกี่ยวข้องกับสิ่งต่างๆ เช่น การเขียนสคริปต์ งานการแสดงผลบางประเภท การแยกวิเคราะห์ HTML และ CSS และงานที่แสดงต่อผู้ใช้ประเภทอื่นๆ ซึ่งช่วยสร้างประสบการณ์ของผู้ใช้ ในความเป็นจริง เบราว์เซอร์ใช้เทรดอื่นๆ ในการทำงานที่คุณซึ่งเป็นนักพัฒนาซอฟต์แวร์ไม่มีสิทธิ์เข้าถึงโดยตรง เช่น เทรด GPU

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

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

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

วิธีเปิดใช้งาน Web Worker

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

const myWebWorker = new Worker('/js/my-web-worker.js');

ในกรณีนี้ ในไฟล์ JavaScript ของผู้ปฏิบัติงาน - my-web-worker.js คุณจะเขียนโค้ดที่ทำงานในเทรดของผู้ปฏิบัติงานแยกต่างหากได้

ข้อจำกัดของ Web Worker

ผู้ปฏิบัติงานด้านเว็บจะไม่สามารถเข้าถึงบริบทของ window ได้โดยตรง และมีสิทธิ์เข้าถึง API ที่ API มีให้แบบจำกัด ซึ่งต่างจาก JavaScript ที่ทำงานบนเทรดหลัก โปรแกรมทำงานบนเว็บมีข้อจำกัดต่อไปนี้

• ผู้ปฏิบัติงานเกี่ยวกับเว็บไม่สามารถเข้าถึง DOM ได้โดยตรง
• เว็บผู้ปฏิบัติงานสามารถสื่อสารกับบริบท window ผ่านไปป์ไลน์การรับส่งข้อความ ซึ่งหมายความว่าโปรแกรมทำงานบนเว็บจะเข้าถึง DOM โดยอ้อม ด้วยวิธีการเดียว
• ขอบเขตของ Web Worker คือ self แทนที่จะเป็น window
• ขอบเขต Web Worker เข้าถึงโครงสร้างและข้อมูลพื้นฐานของ JavaScript รวมถึง API เช่น fetch และ API อื่นๆ อีกจำนวนมาก

วิธีที่พนักงานเว็บติดต่อกับ window

เว็บผู้ปฏิบัติงานจะสื่อสารกับบริบท window ของเทรดหลักผ่านไปป์ไลน์การรับส่งข้อความได้ ไปป์ไลน์นี้ให้คุณเรือข้ามฟากไปยังและ จากเทรดหลักและ Web Worker ได้ หากต้องการส่งข้อมูลจาก Web Worker ไปยังเทรดหลัก คุณต้องตั้งค่าเหตุการณ์ message ในบริบทของ Web Worker (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

จากนั้นในสคริปต์ในบริบท window ในเทรดหลัก คุณจะได้รับข้อความจากชุดข้อความของ Web Worker โดยใช้เหตุการณ์ message อีกเหตุการณ์หนึ่งได้ ดังนี้

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

ไปป์ไลน์การรับส่งข้อความของ Web Worker เป็นช่องทางลี้ภัยจากบริบทของ Web Worker การใช้ Web Worker จะช่วยให้คุณส่งข้อมูลไปยัง window จาก Web Worker ซึ่งใช้เพื่ออัปเดต DOM หรือทำงานอื่นๆ ที่ต้องทำในเทรดหลักได้

ทดสอบความรู้ของคุณ

ถัดไป: กรณีการใช้งานของ Web Worker แบบเป็นรูปธรรม

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