HTML Web Workers

Web worker คือ JavaScript ที่ทำงานในภายหลังเว็บไซต์ จะไม่ทำให้ลดประสิทธิภาพของเว็บไซต์

อะไรคือ Web Worker?

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

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

การสนับสนุนของเบราเซอร์

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

API
Web Worker 4.0 10.0 3.5 4.0 11.5

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

ตัวอย่างด้านล่างนี้สร้าง 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 ได้:

เพิ่มตัวดูแลเหตุการณ์ "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>นับตัวเลข: <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