การใช้งาน Multi-Thread ในภาษา JavaScript แบบง่ายๆ พร้อมตัวอย่าง

# การใช้งาน Multi-Thread ในภาษา JavaScript ด้วย Web Workers: เสริมความสามารถให้แอปพลิเคชันของคุณ

JavaScript เป็นภาษาที่ให้ความสำคัญกับความเร็วและการตอบสนองสูง แต่ด้วยความที่มันถูกออกแบบมาให้เป็น single-threaded มีบางครั้งที่การประมวลผลที่หนักหน่วงสามารถทำให้แอปพลิเคชันเกิดการหน่วงหรือ "freeze" ได้ การแนะนำ Web Workers ใน HTML5 จึงเปลี่ยนแปลงวิธีการเขียนโค้ด JavaScript ให้สามารถทำงานแบบ multi-threaded ได้ ซึ่งเพิ่มประสิทธิภาพและความสามารถในการจัดการปัญหาการประมวลผลที่หนักหน่วง

ตัวอย่างที่ 1: การคำนวณหาค่า Fibonacci แบบบนหลาย thread

การคำนวณหาค่า Fibonacci สำหรับตัวเลขที่มีค่าสูงอาจกินเวลานานและใช้ทรัพยากรการประมวลผลเยอะ ถ้าเราทำการคำนวณบน main thread มันอาจทำให้เกิด `jank` หรือการสะดุดของแอปพลิเคชันได้ การใช้ Web Worker จะช่วยลดและกระจายภาระนี้ไปได้

 // file: fibonacci.js
self.addEventListener('message', function(e) {
  var number = e.data;

  function fibonacci(num) {
    if (num <= 1) return 1;
    return fibonacci(num - 1) + fibonacci(num - 2);
  }

  var result = fibonacci(number);
  self.postMessage(result);
});

// file: main.js
var worker = new Worker('fibonacci.js');
worker.addEventListener('message', function(e) {
  console.log('Fibonacci Number:', e.data);
});
worker.postMessage(42); // Send number to worker

ในตัวอย่างนี้ เราได้สร้าง worker ที่ทำหน้าที่คำนวณหาค่า Fibonacci และจะทำงานโดยไม่กระทบกับ main thread ของเว็บเพจ

ตัวอย่างที่ 2: การโหลดข้อมูลจำนวนมาก

การโหลดสินค้าหลายพันรายการจาก API และการประมวลผลหลังจากนั้นอย่างการเรียงลำดับหรือการกรองก็สามารถทำได้ดีกว่าเมื่อใช้ Web Workers

 // worker-sort.js
self.addEventListener('message', function(e) {
  var products = e.data;

  // ยกตัวอย่างการเรียงลำดับสินค้าตามราคา
  products.sort(function(a, b) {
    return a.price - b.price;
  });

  self.postMessage(products);
});

// file: main.js
var sorterWorker = new Worker('worker-sort.js');
sorterWorker.addEventListener('message', function(e) {
  console.log('Sorted Products:', e.data);
});
sorterWorker.postMessage(productList); // Send product list to worker

ด้วยการนำข้อมูลไปประมวลผลบน worker, เราลดภาระของ main thread ได้และสร้างประสบการณ์ที่ลื่นไหลกว่าให้กับผู้ใช้

ตัวอย่างที่ 3: การทำ Image Processing

การประมวลผลภาพ เช่น การทำ filter หรือการแก้ไข pixel values ก็เป็นงานที่ "หนัก" และเหมาะที่จะได้รับการประมวลผลแยกร่วมกับ Web Workers

 // file: image-worker.js
self.addEventListener('message', function(e) {
  var imageData = e.data;

  // ยกตัวอย่างการทำ grayscale filter
  for (var i = 0; i < imageData.data.length; i += 4) {
    var brightness = 0.34 * imageData.data[i] + 0.5 * imageData.data[i + 1] + 0.16 * imageData.data[i + 2];
    imageData.data[i] = brightness;
    imageData.data[i + 1] = brightness;
    imageData.data[i + 2] = brightness;
  }

  self.postMessage(imageData);
});

// file: main.js
var imageWorker = new Worker('image-worker.js');
imageWorker.addEventListener('message', function(e) {
  console.log('Processed Image Data:', e.data);
});
imageWorker.postMessage(imageData); // เริ่มการประมวลผลภาพ

Usecase ในโลกจริง

บริษัทต่างๆ ได้เริ่มใช้ Web Workers เพื่อปรับปรุงประสบการณ์ของผู้ใช้ เช่น Google Maps ใช้ Web Workers สำหรับการคำนวณแผนที่, Facebook สำหรับการโหลดสตรีมข้อมูล, หรือแม้กระทั่งการใช้งานในเว็บไซต์อีคอมเมิร์ซในการตรวจสอบและโหลดสินค้าในสต็อก

การใช้ multi-threaded approach ใน JavaScript ผ่าน Web Workers จะช่วยทำให้ประสบการณ์ของผู้ใช้ดีขึ้น และสร้างแอปพลิเคชันที่มีประสิทธิภาพ ถ้าคุณสนใจที่จะขยายความรู้ของคุณในการเขียนโปรแกรมขั้นสูง เราขอเชิญคุณมาสัมผัสประสบการณ์การเรียนรู้ที่ EPT ที่เราพร้อมจะนำคุณไปสู่การเข้าใจที่ลึกซึ้งยิ่งขึ้นในโลกแห่งการเขียนโปรแกรม มาเป็นส่วนหนึ่งของชุมชนที่กำลังเติบโตและเรียนรู้กับเราวันนี้!

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