Introducere în JavaScript API pentru lucrătorii web

Web Workers este un API JavaScript care vă permite să rulați scripturi într-un fir separat de cel principal. Poate să vină la îndemână atunci când nu doriți nici o piedică în execuția scripturilor principale, datorită script-urilor de fond.

Aplicația Web Workers API este susținut în aproape toate browserele, pentru informații mai detaliate, aruncați o privire la documentele CanUUse. Înainte de a intra în cod, să vedem câteva scenarii în care ați putea dori să utilizați acest API pentru a obține o idee despre ce am vrut să spun fundal-esque script-uri.

Utilizați cazuri

Să presupunem că există un scenariu prelucrează și procesează un fișier. Dacă este un fișier considerabil mare va dura mult timp pentru a fi procesat! Care ar putea stoca alte scripturi care au fost invocate mai târziu de la a fi executate.

Cu toate acestea, dacă procesarea fișierelor este mutată într-un fir de fundal, cunoscut ca firul de lucru, alte evenimente nu vor fi blocate până nu va fi terminată prima.

Scenariul executat într-un fir de lucrător de fundal este cunoscut sub numele de lucrător script sau doar muncitor.

Pentru un alt exemplu, imaginați-vă că există formă mare, aranjate în file. Este scripted într-un mod în care actualizarea controalelor într-o filă afectează unele dintre celelalte controale.

Dacă actualizarea celorlalte tab-uri durează un anumit timp utilizatorul nu puteți utiliza în mod continuu fila curentă fără ca evenimentele să fie suspendate. Acest lucru ar putea îngheța interfața de utilizator, spre disperarea utilizatorului.

Deoarece un utilizator nu va vedea celelalte file în timp ce completează unul curent, puteți actualizați comenzile celorlalte file într-un fir de fundal. În acest fel, utilizatorul poate continua să utilizeze fila curentă pe care o completează, fără ca niciun script să fie blocat de procesul de actualizare a comenzilor din alte file.

De asemenea, dacă găsiți un scenariu în cazul în care un scenariu ar putea bloca un utilizator de la utilizarea interfeței utilizator până când se execută execuția, vă recomandăm să o mutați în firul de lucru, astfel încât acesta să poată fi executat în fundal.

Domeniile și tipurile de lucrători

Aplicația Web Workers API este probabil una dintre cele mai simple API-uri cu care să lucrați. Are metode destul de simple creați fire de lucru și comunicați cu ei din scenariul principal.

Domeniul de aplicare global al firului lucrător se află într-un context diferit de firul principal. Tu nu pot accesa metodele și proprietățile lui fereastră obiect precum alerta() în interiorul firului muncitor. Tu la fel nu pot schimba direct DOM de la un fir de lucru.

Cu toate acestea, voi poate sa utilizați mai multe API-uri care se află sub fereastră, de exemplu Promisiune și aduce, în firul dvs. de lucrător (vedeți lista completă).

Puteți, de asemenea, să aveți lucrări imbricate ale muncitorilor: fire create de muncitori dintr-un alt fir de lucru. Un lucrător creat de altul este numit a subworker.

Există, de asemenea mulți tipuri de muncitori. Cele două principale sunt dedicate și împărtășite.

Lucrătorii dedicați aparțin aceluiași context de navigare că firul lor principal îi aparține. Cu toate acestea, lucrătorii sociali sunt prezent într-un context de navigare diferit (de exemplu, într-o iframe) din scenariul principal. În ambele cazuri, scenariul principal și lucrătorii trebuie să fie în același domeniu.

Exemplul din acest tutorial va fi despre lucrător dedicat, care este cel mai comun tip.

Metode API

Vedeți diagrama de mai jos pentru a o prezentare generală rapidă a tuturor metodelor principale care constituie API-ul Web Workers.

Muncitor() constructor creează un fir de lucrător dedicat și returnează obiectul de referință. Apoi, folosim acest obiect pentru a comunica cu acel muncitor specific.

postMessage () metoda este utilizată atât în ​​scripturile principale, cât și în cele ale lucrătorilor trimiteți-le reciproc. Datele trimise sunt apoi primite pe cealaltă parte de către onmessage organizatorul evenimentului.

termina () metodă termina un thread lucrător din scriptul principal. Terminarea este imediat: orice execuție de script curent și script-uri în așteptare vor fi anulate. închide() metoda face același lucru, dar este numită de firul lucrătorului care se închide.

Cod exemplu

Acum, să vedem un exemplu de cod. index.html pagina deține scenariul principal în interiorul a

Începem cu crearea firului lucrătorului din scenariul principal.

 w = lucrător nou ("worker.js"); 

 w = lucrător nou ("worker.js"); w.onmessage = (e) => console.log ("A primit de la muncitor: $ e.data");  

 document.querySelector ('buton'). onclick = () => w.postMessage ('john');  

 console.info ("worker created"); onmessage = (e) => postMessage ('Hi $ e.data');