ปัจจุบันเนื้อหาส่วนใหญ่ในหลักสูตรนี้จะมุ่งเน้นที่แนวคิดต่างๆ เช่น ข้อพิจารณาด้านประสิทธิภาพ 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 หรือทำงานอื่นๆ ที่ต้องทำกับ
เทรดหลัก
ทดสอบความรู้ของคุณ
เทรดทำงานบนเว็บทำงานบนเทรดใด
ผู้ปฏิบัติงานบนเว็บจะเข้าถึงอะไรได้บ้าง
window
แต่เป็นโดยอ้อมเท่านั้นwindow
รวมถึง fetch
นักพัฒนาเว็บจะเข้าถึงบริบท "หน้าต่าง" ได้อย่างไร
postMessage
ในบริบทของ Web Worker (self
)
window
window
ไม่ว่าจะด้วยวิธีใดก็ตาม
ถัดไป: กรณีการใช้งานของผู้ปฏิบัติงานบนเว็บที่ชัดเจน
ในโมดูลถัดไป เราจะอธิบายกรณีการใช้งานของ Web Worker ที่เป็นรูปธรรมอย่างละเอียด ตามที่แสดงให้เห็น ในโมดูลนี้ จะมีการใช้ Web Worker เพื่อดึงไฟล์ JPEG จาก URL ที่ระบุ และอ่านข้อมูลเมตา Exif ใน Web Worker จากนั้นจะส่งข้อมูลดังกล่าว กลับไปที่ชุดข้อความหลักเพื่อแสดงต่อผู้ใช้