Web worker aka Event loop เป็นภาษาอังกฤษง่ายๆ

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

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

ในการหลีกเลี่ยงข้อจำกัดนี้ นักพัฒนาสามารถใช้เทคนิคต่างๆ เช่น คนทำงานเว็บ ซึ่งอนุญาตให้โค้ด JavaScript ทำงานในพื้นหลังบนเธรดแยกต่างหาก หรือพวกเขาสามารถใช้ไลบรารี เช่น Async.js ซึ่งให้วิธีการเขียนโค้ดแบบอะซิงโครนัสใน สไตล์ซิงโครนัสมากขึ้น

อย่างไรก็ตาม JavaScript ยังมีกลไกที่เรียกว่า Event Loop ซึ่งช่วยให้สามารถจัดการงานหลายอย่างแบบอะซิงโครนัสได้ ลูปเหตุการณ์จะตรวจสอบคิวข้อความสำหรับข้อความใหม่ (เช่น งาน) และประมวลผลทีละข้อความ ด้วยเหตุนี้ JavaScript จึงสามารถจัดการงานหลายอย่างได้ในเวลาเดียวกัน แม้ว่าจะเป็นการทำงานแบบเธรดเดียวก็ตาม

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

ต่อไปนี้คือตัวอย่างการใช้ Web Worker ใน JavaScript เพื่อทำงานที่ใช้เวลานานในเบื้องหลัง:

// main.js
// Create a new web worker and pass it the path to the worker script
const worker = new Worker('worker.js');
// Send data to the worker
worker.postMessage({ data: 'Hello, Worker!' });
// Listen for messages from the worker
worker.onmessage = (event) => {
 console.log(event.data);
}
// worker.js

// Listen for messages from the main thread
self.onmessage = (event) => {
  // Perform a time-consuming task
  const result = performExpensiveTask(event.data);
  
  // Send the result back to the main thread
  self.postMessage(result);
}

ต่อไปนี้เป็นอีกตัวอย่างหนึ่งของการใช้ async/await เพื่อดำเนินการแบบอะซิงโครนัสในรูปแบบซิงโครนัส:

async function getData() {
  const response = await fetch('http://example.com/data');
  const data = await response.json();
  console.log(data);
}

getData();