Да ли вам је икада било потребно да покренете код у прегледачу да је требало толико дуго да ваша апликација неко време не реагује? Са ХТМЛ5 веб радницима, то више никада нећете морати да искусите.

Веб радници вам омогућавају да одвојите дуготрајни код и покренете га независно од другог кода који се покреће на страници. Ово одржава ваш кориснички интерфејс осетљив, чак и током сложених операција.

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

Традиционално, ЈаваСцрипт је једнонитни језик. То значи да ништа друго не може да ради док је један део кода покренут. На пример, ако имате код који покушава да анимира ДОМ елемент, код који покушава да промени променљиву мора да сачека да се анимација заврши пре него што може да се покрене.

Веб радници су ЈаваСцрипт датотеке које се извршавају у посебној нити без директног приступа ДОМ-у.

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

instagram viewer

Као споредни ефекат, више не може директно да комуницира са остатком вашег кода, тако да веб радници немају приступ ДОМ-у. Међутим, многи други АПИ-ји претраживача су и даље доступни, укључујући АПИ-је ВебСоцкет и Фетцх.

Међутим, веб радници нису потпуно изоловани од главне нити. Када радник треба да комуницира са главном нити, он може послати поруку и главна нит може послати сопствену поруку као одговор.

Зашто веб радници?

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

  • Прихватите да страница неко време неће реаговати.
  • Разбијте тај код асинхрони комади.

Пошто страница која не реагује обично представља лоше корисничко искуство, можете се одлучити за асинхрону опцију. Писање кода на овај начин значи поделу на мање делове које претраживач може да покреће док не рукује корисничким интерфејсом. Комади морају бити довољно мали да, ако је корисничком интерфејсу потребно ажурирање, претраживач може да заврши извршавање тренутног дела и да се посвети корисничком интерфејсу.

Веб радници су додати ХТМЛ5 како би понудили боље решење за овај проблем. Уместо да вас терају да будете креативни са асинхроним кодом, они вам омогућавају да јасно одвојите функцију за покретање у сопственој изолованој нити.

Ово је програмерима олакшало писање таквог кода и побољшало корисничко искуство.

Случајеви коришћења за веб раднике

Свака апликација која захтева много рачунања на страни клијента могла би имати користи од веб радника.

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

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

Ако бисте то покушали да урадите у главној нити, корисник би био потпуно неспособан да користи апликацију док апликација обрађује податке. Уместо тога, можете да преместите део или цео тај код у веб радника. Ово омогућава кориснику да настави да користи апликацију док се прорачуни изводе.

Како користити веб раднике у ЈаваСцрипт-у

Тхе АПИ за веб радника дефинише како се користе веб радници. Коришћење овог АПИ-ја подразумева креирање Воркер објекта са Воркер конструктором овако:

нека невВоркер = Воркер('воркер.јс');

Тхе Радник конструктор прихвата име ЈаваСцрипт датотеке као свој параметар и покреће датотеку у новој нити. Враћа Воркер објекат да би омогућио интеракцију главне нити са радном нити.

Радници комуницирају са главном нити тако што шаљу поруке напред и назад. Ви користите постМессаге функција за слање догађаја између радника и главне нити. Користити онмессаге слушалац догађаја да слуша поруке од друге стране.

Ево примера кода. Прво, главна нит може изгледати овако:

дозволити радник = Нова Воркер('воркер.јс')
воркер.постМессаге('Хеј!')
радник.онмессаге = функција(е) {
 цонсоле.лог('Радничка нит каже', е.подаци)
}

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

Код унутар радника (воркер.јс) има један посао:

онмессаге = функција(е) {
дозволити порука = е.дата;
 цонсоле.лог('Главна тема је рекла', порука);
 постМессаге('Здраво!')
}

Он ослушкује све поруке послате из главне нити, евидентира поруку на конзоли и шаље повратну поруку назад у главну нит.

Све поруке у овом примеру су низови, али то није услов: можете послати скоро било коју врсту података као поруку.

Радници које сте до сада видели зову се посвећени радници. Можете им приступити само из датотеке у којој сте их креирали (посвећени су томе). Заједнички радници су супротни: они могу примати поруке из више датотека и слати поруке у њих. Заједнички радници су концептуално исти као посвећени радници, али морате их користити мало другачије.

Погледајмо пример. Уместо да користи конструктор Воркер, свака датотека која жели да користи дељеног радника мора да креира објекат радника користећи СхаредВоркер():

дозволити схаредВоркер = Нова СхаредВоркер('воркер.јс')

Међутим, разлике ту не престају. Да би датотека послала или примила поруку од дељеног радника, то мора учинити тако што ће приступити а Лука објекат, уместо да то ради директно. Ево како то изгледа:

схаредВоркер.порт.постМессаге('Здраво!')
схаредВоркер.порт.онМессаге = функција(е) {
 цонсоле.лог('Заједнички радник послао', е.дата);
}

Морате да користите и објекат порта унутар радника:

онцоннецт = функција(е) {
конст порт = е.портс[0];
порт.онмессаге = функција(е) {
 цонсоле.лог('Порука је примљена', е.подаци)
 порт.постМессаге('Здраво!');
 }
}

Тхе онцоннецт слушалац се покреће сваки пут када се успостави веза са портом (када се ан онмессаге слушалац догађаја је подешен у главној нити).

Када се то догоди, код добија порт на који је управо био повезан из догађаја повезивања и чува га у променљивој. Затим, код региструје онмессаге слушалац на објекту порта. Код затим евидентира поруку на конзоли и користи порт да пошаље поруку назад у главну нит.

Веб радници побољшавају корисничко искуство

Веб радници су ЈаваСцрипт нити које вам омогућавају да покренете сложене и дуготрајне делове кода у позадини. Овај код ће тада избећи блокирање корисничког интерфејса. Коришћење веб радника знатно олакшава писање ове врсте кода и побољшава искуство корисника апликације. Можете креирати веб раднике и комуницирати са њима користећи АПИ за веб раднике.