HTML5 уеб работници - Ръководство за топ 3 вида уеб работници в HTML5

Съдържание:

Anonim

Какво представляват работниците в мрежата?

Тази статия е свързана с използването на уеб служителите и тяхното значение в HTML5.Java скрипт двигателя, изграден с една нишка и няма съвместен процес зад тях (Никой друг процес не се изпълнява, докато първият процес не приключи). Тъй като javascript работи на преден план и прави уеб страницата отнемаща време. Следователно, за да избегне този тежък проблем, HTML5 създаде нова технология, наречена Уеб служители. Това е малък основен скрипт, който прави изчисления при скъпи задачи, без да се намесва в потребителския интерфейс или производителността на уеб страницата. Тази изолирана нишка е с относително леко тегло и се поддържа във всички уеб браузъри. Това прави HTML стартирането на допълнителни нишки.

Видове уеб работници в HTML5

Работниците в мрежата също се наричат ​​„посветени работници“. Те получиха отделен модел на споделена памет. С други думи, можем да кажем, че целият обхват на JavaScript се е стартирал в една нишка. По време на работа в уеб браузър се натъкнахме на някакво диалогово съобщение за пистата за писта поради тежката обработка на страницата. За да предостави добро решение HTML API на уеб браузъра излезе с управляващи различни изчисления едновременно.

Три важни типа уеб служители са дадени по-долу:

1. Споделен уеб работник

Този тип използва API и всяка единица работник има множество връзки, докато изпраща съобщение (множество скриптове), при условие че всеки контекст е от един и същ произход. Поддръжката на браузъра за този работник е ограничена. Те се наричат ​​с помощта на споделен конструктор на работник ().

2. Специализиран уеб работник

Създаването на файл е много просто, само като се обадите на Конструктор с неговия изходен път. Те използват съобщение за комуникация, наречено метод post message () по време на прехвърляне на съобщения. Дори мениджърите на събития се използват, когато някой слушател се състои. Onmessage на манипулатора () се използва за получаване на съобщение.

3. Сервизен работник

Този работник не взаимодейства директно с уеб страницата и работи във фонов режим. Те могат да се възстановяват, когато се изисква и действат като прокси, могат да бъдат достъпни чрез множество нишки.

Как да създадете файл за уеб работници?

Те нямат поддръжка на някои функции като прозорец обект, DOM, родителски обект. Всички функции се извършват чрез предаване на реплика от тях.

Стъпка 1: За да създадете файл за импортиране Конструктор Worker () Файл се създава с нов обект и скриптът изглежда така.

var worker = new Worker(sample.js);

Стъпка 2: Създаване на съобщение (). Създадените работни файлове автоматично извикват метода за съобщение (). Методите на post message () насочват съобщението да преминава към основната нишка. И по подобен начин можем да изпратим съобщение от основната нишка до работната нишка. Тук работникът започва.

worker. postMessage();

Стъпка 3: След това да хвърлите манипулатора на събитието, за да разрешите съобщението от уеб служителя.

worker. onmessage = function(event)

Отсега видяхме как да изпращаме и получаваме съобщения. Сега да видим как да прекратим работника в средата на процеса.

Стъпка 4: За да спрете процеса.

worker.terminate()

Стъпка 5: За да внедрите сценарий за обработка на грешки, използван от работника.

Worker.onerror();

Топ 9 функции на HTML5 уеб работници

  1. Работещите в мрежата като асинхронен протокол, те са били най-подходящи за извършване на изчислителни задачи и се считат за професионалните характеристики на Javascript.
  2. Работниците в мрежата плащат строга платформа за изпълнение на прозорци за мобилни устройства и настолни компютри, оставяйки да стартират уеб страницата, без да замразяват уеб страницата в браузърите.
  3. Основното предимство е, че можем да стартираме скъпи процеси в рамките на една отделна нишка, която не прекъсва работещата основна нишка.
  4. Работниците в мрежата са малки нишки с леко тегло, които живеят поотделно, преплитайки потребителския интерфейс.
  5. Работещите в мрежата като нишки, ориентирани към ядрото, помагат да достигнат до високата производителност на страницата на браузърите.
  6. Работниците в мрежата помагат при създаването на паралелно програмиране и извършват многопоточни действия.
  7. Работещите в мрежата увеличават скоростта на Java Java приложение.
  8. Уеб работникът се счита за сценарий от страна на клиента и се използва по-високо в приложението за игри.
  9. Нишките на уеб служителите комуникират помежду си, използвайки метода за обратно извикване след съобщение ().

Примери за HTML5 уеб работници

Работниците в мрежата имат достъп до навигатора, заявка за XMLHTTP, навигатор поради техните многообработващи дейности. По-долу примерът се фокусира върху специализирани видове работници, които да демонстрират.

Пример №1

Показва примерния файл на работника, демонстриращ работата на браузъра.

Код:



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";)
)

изход:

Пример №2

Следващият пример показва как работните задачи вървят зад задачата с помощта на клас и се прави броенето за работните задачи. Задачите на работника автоматично актуализират уеб страницата на всеки цикъл, докато цикълът приключи. За да прекратите изпълнението на работника, тук се използва terminate ().

Работата, извършена на заден план от уеб работника:

Код:

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++;
)

изход:

заключение

До края видяхме как работещите в мрежата работят независимо от основната тема, която помага на уеб организациите да правят взискателни приложения. И силно се препоръчва използването на уеб служители в javascript за задачи с голяма тежест. Предлага се, когато уеб браузърът вече не се използва, трябва да бъде затворен, за да консумира системните ресурси.

Препоръчителен член

Това е ръководство за HTML5 уеб работници. Тук обсъждаме най-добрите 9 функции на HTML5 Web Workers и неговите примери с прилагането на кода. Можете също да прегледате нашите предложени статии, за да научите повече -

  1. Html5 Нови елементи | Топ 10
  2. HTML рамки със синтаксис
  3. Въведение в предимствата на HTML
  4. Топ 10 въпроси и отговори за интервю с HTML5