Een JavaScript-API voor de introductie van webwerkers

Webmedewerkers is een JavaScript-API waarmee u kunt voer scripts uit in een aparte thread van de hoofdthread. Het kan van pas komen als je geen hinder ondervindt bij het uitvoeren van de hoofdscripts, vanwege achtergrond-achtige scripts.

De Web Workers API is ondersteund in bijna alle browsers, Raadpleeg voor meer informatie de CanIUse-documenten. Voordat we aan de code beginnen, kunnen we een aantal scenario's bekijken waarin u deze API wellicht wilt gebruiken, zodat u een idee krijgt van wat ik heb bedoeld met achtergrond-achtige scripts.

Use cases

Laten we zeggen dat er een script is haalt een bestand op en verwerkt het. Als een bestand is aanzienlijk groot het zal lang duren om verwerkt te worden! Welke andere scripts kan blokkeren die later werden aangeroepen om te worden uitgevoerd.

Echter, als het bestandsverwerking wordt verplaatst naar een achtergrondthread, bekend als de werkwoordsdraad, andere evenementen worden niet geblokkeerd totdat de vorige is afgelopen.

Het script uitgevoerd in een achtergrondwerkwoordthread staat bekend als de werksterscript of alleen de arbeider.

Stel je bijvoorbeeld voor dat er een is grote vorm, gerangschikt in tabbladen. Het is zo gescript dat de bedieningselementen op één tabblad worden bijgewerkt beïnvloedt sommige van de bedieningselementen in andere.

Als de update van de andere tabbladen de gebruiker enige tijd kost kan het huidige tabblad niet continu gebruiken zonder dat de gebeurtenissen in de wacht worden gezet. Dit kan de gebruikersinterface bevriezen, tot ontzetting van de gebruiker.

Aangezien een gebruiker de andere tabbladen niet zal zien tijdens het invullen van een huidige, kan dat werk de besturingselementen van de andere tabbladen in een achtergrondthread bij. Op deze manier kan de gebruiker het huidige tabblad dat hij aan het invullen is blijven gebruiken, zonder dat een van de scripts wordt geblokkeerd door het updateproces van besturingselementen op andere tabbladen.

Evenzo, als u een scenario vindt met een script kan een gebruiker blokkeren van het gebruik van de gebruikersinterface totdat de uitvoering is voltooid, kunt u overwegen deze naar een werkthread over te brengen, zodat deze op de achtergrond kan worden uitgevoerd.

Scopes en soorten werknemers

De Web Workers API is waarschijnlijk een van de eenvoudigste API's om mee te werken. Het heeft vrij eenvoudige methoden om werkwoorden maken en communiceren met hen vanuit het hoofdscript.

Het algemene bereik van een werkthread bevindt zich in een andere context dan de hoofdthread. U geen toegang tot de methoden en eigenschappen van venster voorwerp zoals alert () in een werkthread. U ook kan de DOM niet rechtstreeks wijzigen van een werkthread.

Jij echter kan gebruik veel API's die onder vallen venster, bijvoorbeeld Belofte en halen, in je werkthread (zie de volledige lijst).

Je kunt ook hebben nested worker-threads: worker-threads gemaakt van een andere werkthread. Een werknemer die door een andere is gemaakt, wordt a genoemd subworker.

Er zijn ook veel types van werknemers. De twee belangrijkste zijn toegewijde en gedeelde werknemers.

Toegewijde werknemers behoren tot dezelfde browsercontext waarvan de hoofdthread behoort. Gedeelde werknemers zijn dat echter wel aanwezig in een andere browse-context (bijvoorbeeld in een iframe) uit het hoofdscript. In beide gevallen, het hoofdscript en de werknemers moeten zich in hetzelfde domein bevinden.

Het voorbeeld in deze tutorial zal zijn over toegewijde werknemer, dat is het meest voorkomende type.

API-methoden

Zie het onderstaande diagram voor a snel overzicht van alle belangrijke methoden die de Web Workers API vormen.

De Worker () bouwer creëert een specifieke werkthread en retourneert het referentieobject. Vervolgens gebruiken we dit object om met die specifieke werknemer te communiceren.

De postMessage () methode wordt zowel in het hoofd- als in het werkerscript gebruikt stuur gegevens naar elkaar. De verzonden gegevens worden vervolgens aan de andere kant ontvangen door de OnMessage gebeurtenishandler.

De beëindigen() methode beëindigt een werkthread uit het hoofdscript. Deze beëindiging is onmiddellijk: elke huidige scriptuitvoering en wachtende scripts worden geannuleerd. De dichtbij() methode doet hetzelfde, maar het is gebeld door het werkwoord dat zichzelf sluit.

Voorbeeldcode

Laten we nu een voorbeeldcode bekijken. De index.html pagina bevat de hoofdscript in een

We beginnen met de maken van de werkthread uit het hoofdscript.

  w = nieuwe werknemer ('worker.js'); 
 De Worker () bouwer neemt de URL van het werkersbestand als zijn argument.
 Vervolgens voegen we een gebeurtenishandler toe voor de OnMessage gebeurtenis van de zojuist gemaakte worker instance naar gegevens ontvangen. De gegevens eigendom van de e gebeurtenis bevat de ontvangen gegevens.
  w = nieuwe werknemer ('worker.js'); w.onmessage = (e) => console.log ('Received from worker: $ e.data');  
 Nu gebruiken we postMessage () naar stuur wat gegevens naar de werkthread met een klik op de knop. De postMessage () methode kan twee argumenten aannemen. De eerste kan van elk type zijn (string, array ...). Het zijn de gegevens worden verzonden naar de werkthread (of naar het hoofdscript, wanneer de methode aanwezig is in de werkthread).
 De tweede, optionele parameter is een array van objecten die kan worden gebruikt door de threads van de werknemer (maar niet door het hoofdscript of andersom). Dit soort objecten worden genoemd verhandelbaar voorwerpen.
  document.querySelector ('knop'). onclick = () => w.postMessage ('john');  
 Ik stuur alleen een tekenreekswaarde naar de werkthread.
 In de werkthread, moeten we een toevoegen OnMessage event handler dat zal de gegevens ontvangen verzonden naar het door het hoofdscript bij het klikken op de knop. In de handler, wij de ontvangen string samenvoegen met een andere en stuur het resultaat terug naar het hoofdscript.
  console.info ('worker created'); onmessage = (e) => postMessage ('Hi $ e.data');  
 In tegenstelling tot het hoofdscript waar we de w referentieobject naar refereer naar de specifieke werkthread waarop het script dan de OnMessage en postMessage methoden, dat is waar geen behoefte aan een referentieobject in de werkthread om naar de rode draad te wijzen.
 De code werkt als volgt. Wanneer de browser wordt geladen index.html, de console zal de "worker created" bericht zodra de worker () constructor wordt uitgevoerd in de rode draad, een nieuwe werknemer creëren.
 Wanneer u op de knop op de pagina klikt, krijgt u de "Ontvangen van werknemer: Hallo John" bericht in de console, dat is de reeks die was samengevoegd in de werkthread met de gegevens die erop gestuurd werden, en toen was teruggestuurd naar het hoofdscript.