ทำไม HTML5 Web Workers จึงมีประโยชน์?

JavaScript ถูกออกแบบให้ทำงานในสภาพแวดล้อม single-threaded หมายถึงสคริปต์หลายตัวไม่สามารถรันพร้อมกันได้ สมมติสถานการณ์ที่ต้องจัดการ UI events, query และประมวลผลข้อมูล API จำนวนมาก และจัดการ DOM

JavaScript จะทำให้เบราว์เซอร์ค้างเมื่อ CPU ใช้สูง ตัวอย่างง่ายๆ ที่ JavaScript วนลูปใหญ่:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Big for loop</title>
    <script>
      function bigLoop(){
        for(var i = 0; i <= 10000; i += 1){
          var j = i;
        }
        alert("Completed " + j + "iterations");
      }
      function sayHello(){
        alert("Hello sir....");
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="bigLoop();" value="Big Loop" />
    <input type="button" onclick="sayHello();" value="Say Hello" />
  </body>
</html>

เมื่อคลิกปุ่ม "Big Loop" จะเกิดขึ้น:

สถานการณ์ข้างต้นสามารถจัดการได้ด้วย Web Workers ซึ่งจะทำงานที่ใช้ทรัพยากร CPU สูงโดยไม่รบกวน UI และมักรันบนเธรดแยก