Vai jums kādreiz ir bijis nepieciešams pārlūkprogrammā palaist kodu, kas prasīja tik ilgu laiku, lai palaistu lietojumprogrammu, un tas kādu laiku nereaģē? Izmantojot HTML5 tīmekļa darbiniekus, jums tas vairs nav jāpiedzīvo.
Tīmekļa darbinieki ļauj atdalīt ilgstoši darbojošos kodu un palaist to neatkarīgi no cita koda, kas darbojas lapā. Tas saglabā jūsu lietotāja interfeisa atsaucību pat sarežģītu darbību laikā.
Kas ir tīmekļa darbinieki?
Tradicionāli JavaScript ir viena pavediena valoda. Tas nozīmē, ka nekas cits nevar darboties, kamēr darbojas viens koda fragments. Piemēram, ja kods mēģina animēt DOM elementu, kodam, kas mēģina mainīt mainīgo, ir jāgaida, līdz animācija beigsies, pirms to var palaist.
Tīmekļa darbinieki ir JavaScript faili, kas tiek izpildīti atsevišķā pavedienā bez tiešas piekļuves DOM.
Viens veids, kā domāt par tīmekļa darbiniekiem, ir tas, ka tie ir koda fragmenti, kuru palaišana prasa daudz laika, tāpēc jūs nododat tos pārlūkprogrammai, lai tās izpildītu fonā. Tā kā šis kods tagad darbojas fonā, tas neietekmē JavaScript, kas atbild par jūsu tīmekļa lapu.
Kā blakusparādība tas vairs nevar tieši mijiedarboties ar pārējo jūsu kodu, tāpēc tīmekļa darbiniekiem nav piekļuves DOM. Tomēr joprojām ir pieejamas daudzas citas pārlūkprogrammas API, tostarp WebSocket un Fetch API.
Tomēr tīmekļa darbinieki nav pilnībā izolēti no galvenā pavediena. Ja darbiniekam ir jāsazinās ar galveno pavedienu, tas var nosūtīt ziņojumu, un galvenais pavediens var nosūtīt savu ziņojumu, atbildot.
Kāpēc tīmekļa darbinieki?
Pirms tīmekļa darbiniekiem vienīgais veids, kā palaist JavaScript, kas prasīja daudz laika pārlūkprogrammā, bija:
- Pieņemiet, ka lapa kādu laiku nereaģē.
- Ielauziet šo kodu asinhroni gabali.
Tā kā lapa, kas nereaģē, parasti ir slikta lietotāja pieredze, varat izvēlēties asinhrono opciju. Šāda koda rakstīšana nozīmē tā sadalīšanu mazākās daļās, kuras pārlūkprogramma var palaist, kamēr tā neapstrādā lietotāja interfeisu. Daļām ir jābūt pietiekami mazām, lai, ja lietotāja saskarne ir jāatjaunina, pārlūkprogramma varētu pabeigt pašreizējās daļas izpildi un apmeklēt lietotāja saskarni.
Tīmekļa darbinieki tika pievienoti HTML5, lai piedāvātu labāku šīs problēmas risinājumu. Tā vietā, lai piespiestu jūs radoši izmantot asinhrono kodu, tie ļauj tīri atdalīt funkciju, lai tā darbotos savā izolētajā pavedienā.
Tas izstrādātājiem atviegloja šāda koda rakstīšanu un uzlaboja arī lietotāja pieredzi.
Lietošanas gadījumi tīmekļa darbiniekiem
Jebkura lietojumprogramma, kurai nepieciešams daudz aprēķinu klienta pusē, varētu gūt labumu no tīmekļa darbiniekiem.
Pieņemsim, piemēram, jūsu lietojumprogramma vēlas ģenerēt lietošanas pārskatu un saglabā visus klienta datus privātuma apsvērumu dēļ.
Lai izveidotu šo pārskatu, jūsu tīmekļa lietojumprogrammai ir jāizgūst dati, jāveic aprēķini, jāsakārto rezultāti un jāiesniedz tie lietotājam.
Ja mēģinātu to izdarīt galvenajā pavedienā, lietotājs pilnībā nevarētu izmantot lietojumprogrammu, kamēr lietojumprogramma apstrādās datus. Tā vietā varat pārvietot daļu vai visu šo kodu tīmekļa darbiniekā. Tas ļauj lietotājam turpināt lietot lietojumprogrammu, kamēr tiek veikti aprēķini.
Kā izmantot tīmekļa darbiniekus JavaScript
The Web Worker API definē, kā izmantot tīmekļa darbiniekus. Izmantojot šo API, tiek izveidots Worker objekts ar Worker konstruktoru, piemēram:
let newWorker = strādnieks('darbinieks.js');The Strādnieks konstruktors pieņem JavaScript faila nosaukumu kā savu parametru un palaiž failu jaunā pavedienā. Tas atgriež darbinieka objektu, lai ļautu galvenajam pavedienam mijiedarboties ar darbinieka pavedienu.
Darbinieki mijiedarbojas ar galveno pavedienu, sūtot ziņojumus uz priekšu un atpakaļ. Jūs izmantojat postZiņojums funkcija, lai nosūtītu notikumus starp darbinieku un galveno pavedienu. Izmantojiet ziņojumā notikumu klausītājs, lai klausītos ziņas no otras puses.
Šeit ir koda piemērs. Pirmkārt, galvenais pavediens varētu izskatīties šādi:
ļaut strādnieks = jauns Darbinieks ('darbinieks.js')
worker.postMessage('Čau!')
darbinieks.onmessage = funkciju(e) {
console.log('Strādnieku pavediens saka', e.dati)
}
Šis galvenais pavediens izveido darbinieka objektu no worker.js un pēc tam nosūta tam ziņojumu ar darbinieks.postMessage. Pēc tam tas definē notikumu klausītāju, kas pēc koncepcijas ir līdzīgs a DOM notikumu klausītājs. Notikums tiks aktivizēts katru reizi, kad darbinieks nosūtīs ziņojumu atpakaļ uz galveno pavedienu, un apstrādātājs reģistrē darbinieka ziņojumu konsolē.
Darba ņēmēja kodam (worker.js) ir viens darbs:
ziņa = funkciju(e) {
ļaut ziņojums = e.data;
console.log('Galvenais pavediens teica', ziņa);
postMessage('Sveiki!')
}Tas noklausās visus ziņojumus, kas nosūtīti no galvenā pavediena, reģistrē ziņojumu konsolē un nosūta atbildes ziņojumu atpakaļ uz galveno pavedienu.
Visi ziņojumi šajā piemērā ir bijuši virknes, taču tā nav prasība: jūs varat nosūtīt gandrīz jebkura veida datus kā ziņojumu.
Tādus strādniekus, kurus esat redzējis līdz šim, sauc par veltītiem darbiniekiem. Tiem varat piekļūt tikai no faila, kurā tos izveidojāt (tie tam ir paredzēti). Koplietojamie darbinieki ir pretēji: viņi var saņemt ziņojumus no vairākiem failiem un nosūtīt ziņojumus uz tiem. Kopīgi darbinieki konceptuāli ir tādi paši kā īpaši darbinieki, taču jums tie ir jāizmanto nedaudz savādāk.
Apskatīsim piemēru. Tā vietā, lai izmantotu Worker konstruktoru, katram failam, kas vēlas izmantot koplietotu darbinieku, ir jāizveido darbinieka objekts, izmantojot SharedWorker():
ļaut SharedWorker = jauns SharedWorker('worker.js')Tomēr atšķirības ar to nebeidzas. Lai fails varētu nosūtīt vai saņemt ziņojumu no koplietota darbinieka, tas ir jādara, piekļūstot a osta objektu, nevis darīt to tieši. Lūk, kā tas izskatās:
sharedWorker.port.postMessage('Sveiki!')
sharedWorker.port.onMessage = funkciju(e) {
console.log('Dalītais strādnieks nosūtīja', e.dati);
}
Porta objekts ir jāizmanto arī darbinieka iekšienē:
onconnect = funkciju(e) {
konst ports = e.ports[0];
port.onmessage = funkciju(e) {
console.log('Ziņa saņemta', e.dati)
port.postMessage('Sveiki!');
}
}
The pieslēdzoties klausītājs tiek aktivizēts katru reizi, kad tiek izveidots savienojums ar portu (kad ziņojumā notikumu uztvērējs ir iestatīts galvenajā pavedienā).
Kad tas notiek, kods no savienojuma notikuma saņem portu, ar kuru tikko tika pievienots, un saglabā to mainīgajā. Pēc tam kods reģistrē ziņojumā klausītājs ostas objektā. Pēc tam kods reģistrē ziņojumu konsolē un izmanto portu, lai nosūtītu ziņojumu atpakaļ uz galveno pavedienu.
Tīmekļa darbinieki uzlabo lietotāju pieredzi
Tīmekļa darbinieki ir JavaScript pavedieni, kas ļauj fonā palaist sarežģītas un ilgstošas koda daļas. Šis kods ļaus izvairīties no lietotāja interfeisa bloķēšanas. Tīmekļa darbinieku izmantošana ievērojami atvieglo šāda veida koda rakstīšanu un uzlabo lietojumprogrammas lietotāja pieredzi. Varat izveidot tīmekļa darbiniekus un mijiedarboties ar viņiem, izmantojot tīmekļa darbinieka API.