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 ສະເພາະ, ແຕ່ນຳໃຊ້ໃນບາງທຸກຄວາມພະຍາຍາມ.

ສ້າງວິສະວະບັນ 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