JavaScript Academy · บทเรียน

การสร้าง Web Worker

สร้างเธรดเบื้องหลังสำหรับการทำงาน

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

เหตุใดจึงใช้เว็บเวิร์กเกอร์

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

การสร้างเวิร์กเกอร์

สร้างเวิร์กเกอร์โดยส่ง URL ของสคริปต์ให้ตัวสร้าง Worker เบราว์เซอร์จะโหลดไฟล์นั้นและเรียกใช้บนเธรดแยกต่างหาก

const worker = new Worker('worker.js');
// The code in worker.js now runs on its own thread.

สคริปต์ของเวิร์กเกอร์

ไฟล์เวิร์กเกอร์เป็น JavaScript ปกติ แต่ทำงานในขอบเขตส่วนกลางของตนเอง โดยไม่มี window และไม่มี document การสื่อสารทำได้ผ่านข้อความเท่านั้น

// worker.js
console.log('worker started');
// This runs off the main thread.

ขอบเขตส่วนกลางสองชุดที่แยกกัน

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

เธรดหลัก: window, DOM, ส่วนติดต่อผู้ใช้
เธรดเวิร์กเกอร์: self, การคำนวณ, ไม่มี DOM

Self ในเวิร์กเกอร์

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

// worker.js
self.addEventListener('message', (e) => {
  console.log('worker got:', e.data);
});

เวิร์กเกอร์แบบโมดูล

คุณสามารถสร้างเวิร์กเกอร์ที่ใช้โมดูล ES และ import ได้ด้วยการส่งตัวเลือก type: 'module' วิธีนี้ทำให้เวิร์กเกอร์นำเข้าโมดูลอื่นได้อย่างเป็นระเบียบ

const worker = new Worker('worker.js', { type: 'module' });
// Inside worker.js you can now use import statements.

การนำเข้าสคริปต์แบบคลาสสิก

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

// Inside a classic worker:
importScripts('math-utils.js', 'helpers.js');
// Their globals are now available in the worker.

การยุติเวิร์กเกอร์

หยุดเวิร์กเกอร์จากเธรดหลักด้วย worker.terminate() หรือหยุดจากภายในด้วย self.close() วิธีนี้จะคืนเธรดและหน่วยความจำ

// From the main thread:
worker.terminate();

// From inside the worker:
// self.close();

การจัดการข้อผิดพลาดของเวิร์กเกอร์

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

worker.addEventListener('error', (e) => {
  console.log('worker error:', e.message, 'at line', e.lineno);
});

ข้อกำหนดเรื่องต้นทางเดียวกัน

สคริปต์ของเวิร์กเกอร์ต้องให้บริการจากต้นทางเดียวกันกับหน้าเว็บ หรือผ่าน URL ของ Blob คุณไม่สามารถโหลดเวิร์กเกอร์โดยตรงจาก URL ข้ามต้นทางใด ๆ ได้

// Same-origin file path - works:
const w1 = new Worker('/js/worker.js');

// You can also build one from a Blob URL when needed.

แบบเฉพาะกับแบบใช้ร่วมกัน

Worker เป็นเวิร์กเกอร์แบบ เฉพาะ ซึ่งผูกกับหน้าที่สร้างเวิร์กเกอร์นั้น ส่วน SharedWorker สามารถเข้าถึงได้จากหลายหน้าที่มาจากต้นทางเดียวกัน บทเรียนนี้มุ่งเน้นเวิร์กเกอร์แบบเฉพาะ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจเรื่องการสร้างเว็บเวิร์กเกอร์

สรุปทบทวน

คุณได้เรียนรู้การสร้างเว็บเวิร์กเกอร์:

new Worker('worker.js') สร้างเธรดเบื้องหลัง
เวิร์กเกอร์มีส่วนกลางของตนเองคือ self และไม่มี DOM
ใช้ type: 'module' สำหรับการนำเข้า หรือใช้ importScripts ในเวิร์กเกอร์แบบคลาสสิก
terminate() / self.close() ใช้หยุดเวิร์กเกอร์
เวิร์กเกอร์ต้องมาจากต้นทางเดียวกัน

ถัดไป การส่งข้อความระหว่างเธรด

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

บทเรียน “การสร้าง Web Worker” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การสร้าง Web Worker”

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

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

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

บทเรียน “การสร้าง Web Worker” ใช้เวลานานแค่ไหน

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

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

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

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

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