ХТМЛ5 веб радници - Водич за Топ 3 врсте веб радника у ХТМЛ5

Преглед садржаја:

Anonim

Шта су веб радници?

Овај чланак говори о кориштењу веб радника и њиховој важности у ХТМЛ5.Јава скриптном механизму изграђеном с једним нити и иза њих не постоји паралелни процес (други процес се не извршава док се први процес не заврши). Како се ЈаваСцрипт покреће у првом плану и чини да веб страница буде много времена. Стога, како би избегао овај огроман проблем, ХТМЛ5 је смислио нову технологију названу Веб радници. То је мала скрипта за позадину која врши рачунање на скупим задацима без уплитања у корисничко сучеље или перформансе веб странице. Ова изолована нит је релативно мале тежине и подржава је у свим веб прегледачима. Ово чини ХТМЛ да покрене додатне теме.

Врсте Веб радника у ХТМЛ5

Радници на мрежи се такође називају „наменски радници“. Они имају посебан модел заједничке меморије. Другим речима, можемо рећи да се читав опсег ЈаваСцрипта покренуо на једној нити. Током рада у веб прегледачу наишли смо на неку дијалошку поруку с писте због тешке обраде странице. Да би обезбедио добро решење Веб претраживач ХТМЛ АПИ је смислио истовремено рачунање различитих рачунања.

Три важне врсте веб радника дате су у наставку:

1. Схаред Веб Воркер

Ова врста користи АПИ и свака јединица радника има више веза док шаље поруку (више скрипти) под условом да су сваки контекст истог порекла. Подршка прегледача за овог радника је ограничена. Називају се помоћу заједничког конструктора ().

2. Намјенски веб радник

Стварање датотеке је врло једноставно само позивањем Конструктора са његовом изворном стазом. Током преноса порука користе се комуникацијском поруком која се зове метода пост мессаге (). Чак се и саговорници догађаја користе када се неки слушатељ појави. Онмессаге за руковатељ () користи се за примање поруке.

3. Сервисни радник

Овај радник не комуницира директно са веб страницом и ради у позадини. Могу се обновити кад год је потребно и делују као проки, њима може приступити више нити.

Како створити датотеку веб радника?

Они немају подршку за неке функције као што су објект прозора, ДОМ, надређени објект. Све функције се обављају преношењем њихове реплике.

Корак 1: Да бисте креирали конструктор за увоз Воркер () конструктора Датотека се креира помоћу новог објекта, а скрипта изгледа.

var worker = new Worker(sample.js);

Корак 2: Креирање поруке (). Створене датотеке радника аутоматски позивају методу поруке (). Методе пост мессаге () усмеравају поруку да прође до главне теме. Слично томе, можемо послати поруку из главне нити радничкој нити. Овде радник почиње.

worker. postMessage();

Корак 3: Затим додајте алатку за обраду догађаја да дозволите поруку од веб радника.

worker. onmessage = function(event)

Од сада смо видели како слати и примати поруке, а сада да видимо како отпустити радника усред процеса.

Корак 4: Заустављање процеса.

worker.terminate()

Корак 5: Да бисте имплементирали сценарио руковања грешкама, који радник користи.

Worker.onerror();

Првих 9 карактеристика ХТМЛ5 веб радника

  1. Радници на мрежи који су асинхрони протокол били су најприкладнији за обављање рачунарских задатака и сматрали су се професионалним особинама Јавасцрипта.
  2. Веб радници плаћају строгу платформу за извршавање прозора за мобилне уређаје и радне површине, остављајући тако да покрену веб страницу без замрзавања веб странице у прегледачима.
  3. Суштинска предност је што можемо покренути скупе процесе унутар једне појединачне нити која не прекида покретачку главну нит.
  4. Радници на мрежи су малене лагане нити које појединачно преплићу корисничко сучеље.
  5. Радници на мрежи који су темељени на језгри помажу у постизању високих перформанси странице прегледача.
  6. Радници на мрежи помажу у креирању паралелног програмирања и обављају мултитхреадинг акције.
  7. Веб радници повећавају брзину за Јава апликацију ЈСцрипт.
  8. Веб радник се сматра сценаријем на страни клијента и користи се више у апликацијама за игре.
  9. Теме веб радника комуницирају међусобно користећи методу повратног позива пост Мессаге ().

Примери ХТМЛ5 веб радника

Радници на мрежи имају приступ навигатору, КСМЛХТТП Захтеву, Навигатору због својих активности вишеструке обраде. Следећи пример се фокусира на наменске врсте радника које треба демонстрирати.

Пример # 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

Следећи пример приказује како раднички задаци трче иза задатка користећи класу и броји ли се за радничке задатке. Задаци радника аутоматски ажурирају веб страницу у свакој петљи све док се петља не заврши. За прекид извршења радника овде се користи термин ().

Посао који је извршио веб радник иза позадине:

Шифра:

врк.хтмл




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

Излаз:

Закључак

До краја смо видели како веб радници раде независно од главне нити која помаже веб организацијама у изради захтевних апликација. А топло се препоручује употреба веб радника у ЈаваСцрипту за тешке задатке. Предлаже се да када веб претраживач више није у употреби, треба затворити да би трошио системске ресурсе.

Препоручени чланак

Ово је водич за ХТМЛ5 веб раднике. Овде смо расправљали о првих 9 карактеристика ХТМЛ5 веб радника и његових примера са имплементацијом кода. Можете и да прођете кроз наше предложене чланке да бисте сазнали више -

  1. Хтмл5 Нови елементи | Топ 10
  2. ХТМЛ оквири са синтаксом
  3. Увод у предности ХТМЛ-а
  4. Топ 10 питања и одговора за ХТМЛ5 интервју