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, ກະຕຸ້ນກວດກາວ່າ ຄອມພິວເຕີ້ຜູ້ນຳໃຊ້ຂອງເຈົ້າສະໜັບສະໜູນ 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, ແຕ່ມັນຖືກນຳໃຊ້ໃນວຽກການຄວາມນຳໃຊ້ 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 ສົ່ງຂໍ້ຄວາມ, ຈະດຳເນີນລາຍການໃນຜູ້ຟັງເຫດການ. ຂໍ້ມູນຈາກ 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