ภาพรวมของ Web Worker

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

ปัจจุบันเนื้อหาส่วนใหญ่ในหลักสูตรนี้จะมุ่งเน้นที่แนวคิดต่างๆ เช่น ข้อพิจารณาด้านประสิทธิภาพ 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);
});

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

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

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

เทรดทำงานบนเว็บทำงานบนเทรดใด

เทรดหลัก

โปรดลองอีกครั้ง

ชุดข้อความของตัวเอง (หรือที่เรียกว่าชุดข้อความของ Web Worker)

ถูกต้อง

เทรด GPU

โปรดลองอีกครั้ง

ผู้ปฏิบัติงานบนเว็บจะเข้าถึงอะไรได้บ้าง

JavaScript แบบเดิม เช่น อาร์เรย์และออบเจ็กต์

ถูกต้อง

ชุดย่อยของ API แบบเข้มงวดที่ใช้ได้ในบริบทของ window รวมถึง fetch

ถูกต้อง

บริบทของ window แต่เป็นโดยอ้อมเท่านั้น

ถูกต้อง

นักพัฒนาเว็บจะเข้าถึงบริบท "หน้าต่าง" ได้อย่างไร

โดยตรง โดยการอ้างอิงสมาชิกของออบเจ็กต์ window

โปรดลองอีกครั้ง

ผู้ปฏิบัติงานเว็บไม่สามารถเข้าถึง window ไม่ว่าจะด้วยวิธีใดก็ตาม

โปรดลองอีกครั้ง

ผ่านไปป์ไลน์การรับส่งข้อความที่อำนวยความสะดวกโดย postMessage ในบริบทของ Web Worker (self)

ถูกต้อง

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

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