JavaScript Academy · บทเรียน

กรณีใช้งานและข้อจำกัด

เรียนรู้ว่าเวิร์กเกอร์ช่วยได้เมื่อใดและทำอะไรไม่ได้บ้าง

กรณีใช้งานและข้อจำกัด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

งานที่ worker เหมาะกับ

worker บนเว็บเหมาะอย่างยิ่งกับงานที่ใช้ CPU หนัก ซึ่งมิฉะนั้นอาจทำให้ส่วนติดต่อผู้ใช้ค้าง:

การประมวลผลรูปภาพและวิดีโอ
การแยกวิเคราะห์ไฟล์ขนาดใหญ่ (CSV, ข้อมูลเจสัน)
การเข้ารหัสและการสร้างแฮช
ฟิสิกส์ การวิเคราะห์ข้อมูล และการจำลองสถานการณ์

ไม่มีสิทธิ์เข้าถึง DOM

ข้อจำกัดที่สำคัญที่สุดคือ worker ไม่สามารถแตะต้อง DOM ได้ ไม่มี document หรือ window worker จะคำนวณข้อมูลและส่งกลับมา ส่วนเธรดหลักจะเป็นผู้ปรับปรุงส่วนติดต่อผู้ใช้

// Inside a worker:
// document.querySelector(...) -> ReferenceError
// Workers have no DOM at all.

สิ่งที่ IS มีให้ใช้งาน

worker ยังคงเข้าถึง API ที่มีประโยชน์ได้หลายอย่าง เช่น fetch setTimeout WebSocket IndexedDB crypto และอาร์เรย์แบบกำหนดชนิด ดังนั้นการดึงข้อมูลและการจัดเก็บข้อมูลจึงทำงานนอกเธรดหลักได้อย่างเหมาะสม

// Inside a worker this is valid:
// const res = await fetch('/data.json');
// const json = await res.json();
// self.postMessage(json);

ข้อจำกัดของการโคลนแบบมีโครงสร้าง

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

// Cannot be sent:
// worker.postMessage(() => {});      // function - fails
// worker.postMessage(document.body); // DOM node - fails

ต้นทุนการเริ่มต้นและการส่งข้อความ

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

การให้ worker ทำงานต่อเนื่อง

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

// Reuse one worker for many tasks:
const worker = new Worker('worker.js');
function run(task) {
  worker.postMessage(task);
}
// Avoid: new Worker(...) on every single call.

กลุ่ม worker

หากต้องการใช้แกนประมวลผลของ CPU หลายแกน ให้สร้าง worker หลายตัวแล้วกระจายงานระหว่างกัน ติดตามว่าตัวใดว่าง และมอบหมายงานที่เข้ามาให้ตัวที่ว่าง

const pool = [];
for (let i = 0; i < 4; i++) {
  pool.push(new Worker('worker.js'));
}
// Round-robin or queue tasks across the pool.

การใช้หน่วยความจำร่วมกัน

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

// Requires COOP/COEP headers to be enabled.
// const shared = new SharedArrayBuffer(1024);
// Atomics.add(view, 0, 1); // safe concurrent update

การแยกข้อผิดพลาด

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

worker.onerror = (e) => {
  console.log('worker failed:', e.message);
  // optionally recreate the worker here
};

เมื่อใดที่ไม่ควรใช้ worker (NOT)

ไม่ควรใช้ worker เมื่องานนั้นง่ายมาก ต้องปรับปรุง DOM อยู่ตลอดเวลา หรือส่วนใหญ่เป็นการรอเครือข่าย (การทำงานแบบไม่พร้อมกันของ fetch ไม่บล็อกการทำงานอยู่แล้ว) ให้ใช้ worker กับงานที่ใช้ CPU เป็นหลักอย่างแท้จริง

นำทุกอย่างมาประกอบกัน

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

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจของคุณเกี่ยวกับกรณีการใช้งานและข้อจำกัดของ worker

สรุป

คุณได้เรียนรู้กรณีการใช้งานและข้อจำกัดของ worker:

เหมาะอย่างยิ่งกับงานที่ใช้ CPU หนัก แต่ไม่มีสิทธิ์เข้าถึง DOM
มี API จำนวนมากให้ใช้งาน เช่น การดึงข้อมูล IndexedDB และการเข้ารหัส
ข้อความถูกโคลนแบบมีโครงสร้าง จึงส่งฟังก์ชันหรือโหนด DOM ไม่ได้
ใช้ worker หรือ pool ซ้ำเพื่อเฉลี่ยต้นทุนการเริ่มต้น
ข้อผิดพลาดยังคงแยกอยู่ใน worker

คุณเรียน Web Workers จบแล้ว ถัดไปคือ IndexedDB

คำถามที่พบบ่อย

บทเรียน “กรณีใช้งานและข้อจำกัด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “กรณีใช้งานและข้อจำกัด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “กรณีใช้งานและข้อจำกัด”

เรียนรู้ว่าเวิร์กเกอร์ช่วยได้เมื่อใดและทำอะไรไม่ได้บ้าง คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “กรณีใช้งานและข้อจำกัด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy