Co jsou to weboví pracovníci?
Tento článek pojednává o využití webových pracovníků a jejich důležitosti ve skriptovacím enginu HTML5.Java vytvořeném s jediným vláknem a za nimi není žádný souběžný proces (žádný jiný proces se nevykonává, dokud není dokončen první proces). Jak javascript běží v popředí a webová stránka je časově náročná. Proto, aby se zabránilo tomuto statnému problému, přišel HTML5 s novou technologií s názvem Web pracovníci. Je to malý skript na pozadí, který provádí výpočet při nákladných úkolech, aniž by zasahoval do uživatelského rozhraní nebo výkonu webové stránky. Toto izolované vlákno je relativně nízké hmotnosti a je podporováno ve všech webových prohlížečích. Díky tomu bude HTML spuštěno další vlákna.
Typy webových pracovníků v HTML5
Weboví pracovníci jsou také označováni jako „oddaní pracovníci“. Měli samostatný model sdílené paměti. Jinými slovy, můžeme říci, že celý rozsah javascriptu se stal spuštěn na jednom vlákně. Při práci ve webovém prohlížeči jsme se setkali s nějakou dialogovou zprávou o dráze kvůli těžkému zpracování stránky. Aby bylo zajištěno dobré řešení, webový prohlížeč HTML API přišel s rozhodováním o různých výpočtech současně.
Níže jsou uvedeny tři důležité typy pracovníků webu:
1. Sdílený webový pracovník
Tento typ využívá API a každá jednotka pracovníka má více připojení při odesílání zprávy (více skriptů) za předpokladu, že každý kontext je ze stejného původu. Podpora prohlížeče pro tohoto pracovníka je omezená. Říká se jim konstruktér sdílených pracovníků ().
2. Vyhrazený webový pracovník
Vytvoření souboru je velmi jednoduché pouhým voláním konstruktoru s jeho zdrojovou cestou. Při přenosu zpráv využívají metodu komunikace zpráv nazvanou post message (). Dokonce i obsluhy událostí se používají, když se koná nějaký posluchač. Popisovač onmessage () se používá k přijetí zprávy.
3. Servisní pracovník
Tento pracovník přímo neinteraguje s webovou stránkou a běží na pozadí. Mohou se obnovit, kdykoli je to potřeba, a chová se jako proxy, mohou k nim přistupovat více vlákna.
Jak vytvořit soubor webových pracovníků?
Nemají podporu některých funkcí, jako je okenní objekt, DOM, nadřazený objekt. Všechny funkce jsou prováděny předáním jejich repliky.
Krok 1: Vytvoření importu souboru konstruktor Worker () Soubor je vytvořen pomocí nového objektu a skript vypadá.
var worker = new Worker(sample.js);
Krok 2: Vytvoření poštovní zprávy (). Vytvořené pracovní soubory automaticky vyvolají metodu post message (). Metody post message () směrují zprávu předanou do hlavního vlákna. A podobně můžeme odeslat zprávu z hlavního vlákna do pracovního vlákna. Zde začíná pracovník.
worker. postMessage();
Krok 3: Dále vyvolejte obslužné rutiny události a povolte zprávu od webového pracovníka.
worker. onmessage = function(event)
Od té doby jsme viděli, jak odesílat a přijímat zprávy. Nyní se podívejme, jak ukončit pracovníka uprostřed procesu.
Krok 4: Zastavení procesu.
worker.terminate()
Krok 5: Implementace scénáře zpracování chyb, který pracovník používá.
Worker.onerror();
Top 9 funkcí webových pracovníků HTML5
- Weboví pracovníci jsou asynchronním protokolem a byli nejvhodnější pro výpočetní úkoly a považovali se za profesionální funkce Javascriptu.
- Weboví pracovníci platí přísná prováděcí platforma pro okna mobilních a stolních počítačů a umožňují webovou stránku spouštět bez zamrzání webové stránky v prohlížečích.
- Hlavní výhodou je, že můžeme provozovat drahé procesy v rámci jednoho jednotlivého vlákna, které nepřerušuje běžící hlavní vlákno.
- Weboví dělníci jsou malá lehká vlákna, která žijí jednotlivě a prokládají uživatelské rozhraní.
- Weboví pracovníci, kteří mají vlákna orientovaná na jádro, pomáhají oslovit vysoký výkon stránky prohlížečů.
- Weboví pracovníci pomáhají při vytváření paralelního programování a provádějí akce s více podprocesy.
- Weboví pracovníci zvyšují rychlost aplikace java JScript.
- Webový pracovník je považován za skript na straně klienta a používá se vyšší v herních aplikacích.
- Vlákna webového pracovníka spolu komunikují pomocí metody zpětného volání Message ().
Příklady webových pracovníků HTML5
Weboví pracovníci mají přístup k navigátoru, požadavku XMLHTTP, Navigátoru kvůli jejich vícezpracovávacím činnostem. Níže uvedený příklad se zaměřuje na předvedené typy pracovníků.
Příklad č. 1
Zobrazuje soubor Ukázkový pracovník Ukázka fungování prohlížeče.
Kód:
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Web Worker Demo
Validating the browser compatibility of Web Browsers
Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)
Výstup:
Příklad č. 2
Následující příklad ukazuje, jak se pracovní úkoly spouštějí za úlohou pomocí třídy a počet se provádí pro pracovní úkoly. Pracovní úkoly automaticky aktualizují webovou stránku v každé smyčce, dokud smyčka neskončí. K ukončení výkonu pracovníka se zde používá funkce terminate ().
Úloha, kterou za webovým pracovníkem vykonává:
Kód:
wrk.html
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )
start worker terminate
start blocking thread
test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)
Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)
Výstup:
Závěr
Nakonec jsme viděli, jak weboví pracovníci pracují nezávisle na hlavním vláknu, které pomáhá webovým organizacím při vytváření náročných aplikací. A důrazně se doporučuje používat webové pracovníky v javascriptu pro těžkopádné úkoly. Doporučuje se, aby se webový prohlížeč, který se již nepoužívá, uzavřel, aby se spotřebovaly systémové prostředky.
Doporučený článek
Toto je průvodce webovými pracovníky HTML5. Zde diskutujeme o nejlepších 9 funkcích webových pracovníků HTML5 a jejich příklady s implementací kódu. Další informace naleznete také v našich doporučených článcích -
- Html5 Nové prvky | Nejlepších 10
- Rámečky HTML se syntaxí
- Úvod do výhod HTML
- 10 hlavních otázek a odpovědí na rozhovor v HTML5