HTML Web Workers

Web worker คือ JavaScript ที่ทำงานที่ background จะไม่ส่งผลกระทบต่อประสิทธิภาพของหน้าเว็บ

อะไรคือ Web Worker?

เมื่อปฏิบัติการสคริปต์ในหน้าเว็บ HTML หน้าจะไม่สามารถตอบสนองได้จนกว่าสคริปต์จะเสร็จงาน

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

การสนับสนุนของเครื่องนอนหลัง

ตัวเลขในตารางนี้ชี้ถึงสีส่วนที่สนับสนุน Web Worker ในฉบับแรกของเครื่องนอนหลัง。

API
Web Worker 4.0 10.0 3.5 4.0 11.5

ตัวอย่างตัวอย่าง HTML Web Workers

ตัวอย่างด้านล่างนี้สร้างแฟ้ม web worker โดยง่ายๆ ที่นำทำงานนับที่หลังแบบ background:

นับ:

ทดลองด้วยตัวเอง

ตรวจสอบการสนับสนุน Web Worker

ก่อนที่จะสร้าง web worker โปรดตรวจสอบว่าเครื่องนอนหลังนี้สนับสนุน Web Worker หรือไม่:

if (typeof(Worker) !== "undefined") {
    // ใช่แล้ว! สนับสนุน Web worker!
    // บางรายการรหัส.....
}
    // ขอโทษ! ไม่สนับสนุน Web Worker!
}

สร้างแฟ้ม Web Worker

ตอนนี้ ของเราจะสร้าง web worker ของเราในแฟ้ม JavaScript ด้านนอก.

ในที่นี้ เราสร้างสคริปต์นับตัว. สคริปต์นี้ถูกเก็บไว้ในแฟ้ม "demo_workers.js":

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

ส่วนที่สำคัญของรหัสด้านต้นนี้คือวิธี postMessage() - มันใช้สำหรับส่งข้อความกลับไปยังหน้า HTML:

หมายเหตุ: web worker ทั่วไปไม่ได้ถูกใช้สำหรับสคริปต์ที่เรียบง่ายและนั่นมีส่วนในการใช้สำหรับงานที่เรียกร้องความใช้ CPU มากกว่า:

สร้าง Web Worker ตัว

ตอนนี้เรามีแฟ้ม web worker แล้ว จึงต้องการเรียกใช้มันจากหน้า HTML:

รหัสด้านล่างนี้เป็นการตรวจสอบว่ามี worker หรือไม่ หากไม่มี - มันจะสร้างแฟ้ม web worker ใหม่และปฎิบัติตามรหัสใน "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

ดังนั้นเราสามารถรับข้อความที่มาจาก web worker ได้:

เพิ่ม event listener "onmessage" สำหรับ web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

ขณะที่ web worker ส่งข้อความ มันจะทำการปฏิบัติตามรหัสใน event listener. ข้อมูลจาก web worker จะถูกเก็บไว้ใน event.data:

ยุติ Web Worker

หลังจากที่สร้าง web worker มันจะยังคงดูแลข้อความ (แม้ว่าสคริปต์ด้านนอกจะเสร็จงานลงแล้ว) จนกว่ามันถูกยุติลง:

หากต้องการทำการยุติ web worker และปลดลงทรัพยากรของเครื่องบันทึกหรือคอมพิวเตอร์ โปรดใช้วิธี terminate():

w.terminate();

การเรียกใช้ Web Worker ซ้ำ

หากคุณตั้งค่าตัวแปร worker ให้เป็น undefined ในตอนที่มันถูกยุติลง คุณสามารถนำรหัสนี้มาใช้ซ้ำ:

w = undefined;

รหัสตัวอย่างเต็มของ Web Worker

เราได้เห็นรหัส Worker ในแฟ้ม .js แล้ว. ต่อไปนี้คือรหัส HTML ของหน้าเว็บ:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

ทดลองด้วยตัวเอง

Web Worker และ DOM

เนื่องจาก web worker ตั้งอยู่ในไฟล์นอกเหนือจากไฟล์แก้ไข พวกเขาไม่สามารถเข้าถึง JavaScript วัตถุดังนี้:

  • window วัตถุ
  • document วัตถุ
  • parent วัตถุ