ภาพรวมของ Web Worker

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีที่ผู้ปฏิบัติงานบนเว็บพูดคุยกับ window

ผู้ปฏิบัติงานบนเว็บสื่อสารกับ window ของเทรดหลักได้ ผ่านไปป์ไลน์การรับส่งข้อความ ไปป์ไลน์นี้ช่วยให้คุณเรือข้ามฟากไปยัง และ จากเทรดหลักและ Web Worker ส่งข้อมูลจาก Web Worker ไปยัง เทรดหลัก คุณตั้งค่าเหตุการณ์ message ในบริบทของผู้ปฏิบัติงานเว็บ (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 คุณจะสามารถส่งข้อมูลไปยัง window จาก Web Worker ที่คุณสามารถใช้เพื่ออัปเดต DOM หรือทำงานอื่นๆ ที่ต้องทำกับ เทรดหลัก

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

ถัดไป: กรณีการใช้งานของผู้ปฏิบัติงานบนเว็บที่ชัดเจน

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