HTML Web Workers API
ဝဘ်လုပ်သားသည် စာမျက်နှာ၏စွမ်းဆောင်ရည်ကို မထိခိုက်စေဘဲ နောက်ခံတွင် လုပ်ဆောင်နေသည့် JavaScript တစ်ခုဖြစ်သည်။
Web Worker ဆိုတာ ဘာလဲ။
HTML စာမျက်နှာတစ်ခုတွင် scripts များကိုလုပ်ဆောင်သောအခါ၊ စာမျက်နှာသည် script ပြီးသည်အထိ တုံ့ပြန်မှုမရှိတော့ပါ။
ဝဘ်လုပ်သားသည် စာမျက်နှာ၏စွမ်းဆောင်ရည်ကို မထိခိုက်စေဘဲ အခြား script များနှင့် သီးခြား နောက်ခံတွင် လုပ်ဆောင်သည့် JavaScript တစ်ခုဖြစ်သည်။ ဝဘ်အလုပ်သမားသည် နောက်ခံတွင် အလုပ်လုပ်နေချိန်တွင် သင်အလိုရှိသမျှကို ဆက်လက်လုပ်ဆောင်နိုင်သည်- နှိပ်ခြင်း၊ အရာများကို ရွေးချယ်ခြင်း စသည်ဖြင့်။
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ဝဘ်အလုပ်သမားများကို အပြည့်အဝပံ့ပိုးပေးသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးပါသည်။
API | |||||
---|---|---|---|---|---|
Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML ဝဘ်အလုပ်သမားများ ဥပမာ
အောက်ဖော်ပြပါ ဥပမာသည် နောက်ခံတွင် နံပါတ်များကို ရေတွက်သည့် ရိုးရှင်းသော ဝဘ်လုပ်သားကို ဖန်တီးပေးသည်-
ဥပမာ
Web Worker Support ကို စစ်ဆေးပါ။
ဝဘ်အလုပ်သမကို မဖန်တီးမီ၊ အသုံးပြုသူ၏ဘရောက်ဆာက ၎င်းကို ပံ့ပိုးမှုရှိမရှိ စစ်ဆေးပါ-
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Web Worker File တစ်ခုဖန်တီးပါ။
ယခု၊ ကျွန်ုပ်တို့၏ ဝဘ်လုပ်သားကို ပြင်ပ JavaScript ဖြင့် ဖန်တီးကြပါစို့။
ဤတွင်၊ ကျွန်ုပ်တို့သည် ရေတွက်နိုင်သော ဇာတ်ညွှန်းတစ်ခုကို ဖန်တီးပါသည်။ ဇာတ်ညွှန်းကို "demo_workers.js" ဖိုင်တွင် သိမ်းဆည်းထားသည်-
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
အထက်ဖော်ပြပါ ကုဒ်၏ အရေးကြီးသော အစိတ်အပိုင်းမှာ postMessage()
HTML စာမျက်နှာသို့ မက်ဆေ့ချ်ကို ပြန်တင်ရန် အသုံးပြုသည့် နည်းလမ်းဖြစ်သည်။
မှတ်ချက်- ပုံမှန်အားဖြင့် ဝဘ်လုပ်သားများကို ထိုကဲ့သို့သော ရိုးရှင်းသော script များ အတွက် အသုံးမချသော်လည်း ပိုမို CPU အလေးထားသော လုပ်ဆောင်စရာများအတွက် ဖြစ်သည်။
Web Worker Object ဖန်တီးပါ။
ယခု ကျွန်ုပ်တို့တွင် ဝဘ်အလုပ်သမားဖိုင်ရှိသဖြင့် ၎င်းကို HTML စာမျက်နှာမှ ခေါ်ရန် လိုအပ်သည်။
အောက်ဖော်ပြပါစာကြောင်းများသည် အလုပ်သမားရှိ၊ မရှိ စစ်ဆေးပေးသည် - ၎င်းသည် ဝဘ်အလုပ်သမားအရာဝတ္တုအသစ်ကို ဖန်တီးပြီး "demo_workers.js" တွင် ကုဒ်ကို လုပ်ဆောင်သည်-
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
ထို့နောက် ဝဘ်အလုပ်သမားထံမှ မက်ဆေ့ချ်များ ပေးပို့နိုင်၊ လက်ခံနိုင်မည်ဖြစ်သည်။
ဝဘ်အလုပ်သမားထံသို့ "onmessage" အစီအစဉ်နားဆင်သူကို ထည့်ပါ။
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
ဝဘ်အလုပ်သမားသည် မက်ဆေ့ချ်တစ်ခုတင်သောအခါ၊ အစီအစဉ်နားထောင်သူအတွင်းရှိ ကုဒ်ကို လုပ်ဆောင်သည်။ ဝဘ်အလုပ်သမားထံမှ ဒေတာကို event.data တွင် သိမ်းဆည်းထားသည်။
ဝဘ်အလုပ်သမားကို ရပ်စဲပါ။
ဝဘ်လုပ်သားအရာဝတ္တုကို ဖန်တီးသောအခါ၊ ၎င်းသည် ရပ်စဲသွားသည်အထိ မက်ဆေ့ဂျ်များအတွက် (ပြင်ပ script ပြီးသည်နှင့်ပင်) ဆက်လက်နားဆင်နေမည်ဖြစ်ပါသည်။
ဝဘ်လုပ်သားတစ်ဦးနှင့် အခမဲ့ဘရောက်ဆာ/ကွန်ပြူတာအရင်းအမြစ်များကို ရပ်စဲရန်
terminate()
နည်းလမ်းကို အသုံးပြုပါ-
w.terminate();
Web Worker ကို ပြန်သုံးပါ။
အကယ်၍ သင်သည် worker variable ကို သတ်မှတ်မထားသောအဖြစ် သတ်မှတ်ပါက၊ ၎င်းကို ရပ်စဲပြီးနောက်၊ သင်သည် ကုဒ်ကို ပြန်လည်အသုံးပြုနိုင်သည်-
w = undefined;
ဝဘ်အလုပ်သမားနမူနာကုဒ်အပြည့်အစုံ
.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>
<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;
};
}
else
{
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Workers နှင့် DOM
ဝဘ်အလုပ်သမားများသည် ပြင်ပဖိုင်များတွင် ရှိနေသောကြောင့်၊ ၎င်းတို့သည် အောက်ပါ JavaScript အရာဝတ္ထုများကို အသုံးပြုခွင့် မရှိပါ။
- ပြတင်းပေါက်ဝတ္တု
- စာရွက်စာတမ်းအရာဝတ္ထု
- မိဘရှိကြပါတယ်။