HTML వెబ్ వర్కర్స్

వెబ్ వర్కర్ అనేది బ్యాక్గ్రౌండ్ లో నడిచే జావాస్క్రిప్ట్, పేజీ పనితీరును ప్రభావితం చేయదు.

వెబ్ వర్కర్ ఏమిటి?

హెచ్ఎంఎల్ పేజీలో స్క్రిప్ట్ నడిచేటప్పుడు, పేజీ ప్రతిస్పందించడానికి సమర్ధంగా లేదు, స్క్రిప్ట్ పూర్తి అయ్యే వరకు.

వెబ్ వర్కర్ అనేది బ్యాక్గ్రౌండ్ లో నడిచే జావాస్క్రిప్ట్, ఇతర స్క్రిప్ట్లకు స్వతంత్రంగా ఉంటుంది, పేజీ పనితీరును ప్రభావితం చేయదు. మీరు ఏదైనా చేయవచ్చు: క్లిక్ చేయండి, విషయాన్ని ఎంచుకోండి మొదలుకొని, ఈ సమయంలో వెబ్ వర్కర్ బ్యాక్గ్రౌండ్ లో నడుస్తుంది.

బ్రౌజర్ మద్దతు

పట్టికలో వరుసలు పూర్తిగా వెబ్ వర్కర్ మద్దతు ఉన్న మొదటి బ్రౌజర్ వెర్షన్ సూచిస్తాయి.

API
వెబ్ వర్కర్ 4.0 10.0 3.5 4.0 11.5

HTML వెబ్ వర్కర్స్ ఉదాహరణ

ఈ ఉదాహరణలో, ముఖ్యమైన వెబ్ వర్కర్ సృష్టించబడింది, బ్యాక్గ్రౌండ్ లో లెక్కింపు చేస్తోంది:

లెక్కింపు:

నేను ప్రయత్నించండి

వెబ్ వర్కర్ మద్దతు పరిశీలించండి

వెబ్ వర్కర్ సృష్టించడానికి ముందు, వినియోగదారి బ్రౌజర్ ఇది మద్దతు అవుతుందా పరిశీలించండి:

if (typeof(Worker) !== "undefined") {
    // అవును! వెబ్ వర్కర్ మద్దతు ఉంది!
    // కొన్ని కోడ్.....
}
    // క్షమించండి! వెబ్ వర్కర్ మద్దతు లేదు!
}

వెబ్ వర్కర్ ఫైల్ సృష్టించండి

ఇప్పుడు, మాత్రమే మా వెబ్ వర్కర్ని ఒక బాహ్య జావాస్క్రిప్ట్ ఫైల్లో సృష్టించాలి.

ఇక్కడ, మేము పరిగణన స్క్రిప్ట్ సృష్టించాము. ఈ స్క్రిప్ట్ "demo_workers.js" ఫైల్లో నిల్వ చేయబడుతుంది:

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

ఈ కోడ్లో ముఖ్యమైన భాగం postMessage() మాదిరిగా ఉంది - ఇది హైల్టెక్ పేజీకి సందేశం పంపడానికి ఉపయోగించబడుతుంది.

ప్రత్యామ్నాయంగా: వెబ్ వర్కర్ సాధారణంగా ఈ విధమైన సాధారణ స్క్రిప్ట్లకు ఉపయోగించబడదు, బదులుగా మరింత సిపియు వనరులను వెతికే పనులకు ఉపయోగించబడుతుంది.

వెబ్ వర్కర్ ఆబ్జెక్ట్ సృష్టించడం

ఇప్పుడు మేము వెబ్ వర్కర్ ఫైల్ని కలిగివున్నాము. అప్పుడు మేము హైల్టెక్ పేజీ నుండి దానిని సంకలించాలి.

ఈ కోడ్ లో వర్కర్ ఉనికిని పరిశీలించే కోడ్ పంక్తి ఉంది. వర్కర్ లేకపోతే, - ఒక కొత్త వెబ్ వర్కర్ ఆబ్జెక్ట్ సృష్టించి, "demo_workers.js" ఫైల్లో కోడ్ని నిర్వహించబడుతుంది:

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

అప్పుడు మేము వెబ్ వర్కర్ నుండి సందేశాలను ప్రాప్తం చేసుకోవచ్చు.

వెబ్ వర్కర్కు "onmessage" ఇవెంట్ లిస్టెనర్ జోడించండి:

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

వెబ్ వర్కర్ సందేశాన్ని పంపినప్పుడు, సందేశం వినికించే ఇవెంట్ లిస్టెనర్లో కోడ్ నిర్వహించబడుతుంది. వెబ్ వర్కర్ నుండి ప్రాప్తమయిన డాటా ఇవెంట్.data లో నిల్వ చేయబడుతుంది.

వెబ్ వర్కర్ తొలగించడం

వెబ్ వర్కర్ సృష్టించబడిన తర్వాత, దాని తొలగించబడకుండా బయటి స్క్రిప్ట్ పూర్తి అయినప్పటికీ దాని సందేశాలను వినికించడానికి కొనసాగుతుంది.

వెబ్ వర్కర్ని తొలగించి, బ్రౌజర్/కంప్యూటర్ వనరులను విడిచిపెట్టడానికి terminate() మాదిరిగా ఉపయోగించండి:

w.terminate();

వర్కర్ పునర్వినియోగం

మీరు worker వ్యవచారాన్ని undefined గా సెట్ చేస్తే, దాని ముగిసిన తర్వాత ఈ కోడ్ని మళ్ళీ ఉపయోగించవచ్చు:

w = undefined;

పూర్తి Web Worker ఉదాహరణ కోడ్

మేము .js ఫైల్లో వర్కర్ కోడ్ని చూసాము. ఇప్పుడు హైల్టెక్ పేజీ కోడ్ ఇలా ఉంది:

ఉదాహరణ

<!DOCTYPE html>
<html>
<body>
<p>సంఖ్యలను గణించండి: <output id="result"></output></p>
<button onclick="startWorker()">స్టార్ట్ వర్కర్</button> 
<button onclick="stopWorker()">స్టాప్ వర్కర్</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

వెబ్ వర్కర్ బాహ్య ఫైల్లో ఉన్నందున, వాటిని ప్రాప్యం చేయలేదు ఈ జాబితా జావాస్క్రిప్ట్ ఆబ్జెక్ట్లు కోసం:

  • window ఆబ్జెక్ట్
  • document ఆబ్జెక్ట్
  • parent ఆబ్జెక్ట్