Share
En webbarbetare är ett JS-skript som körs i bakgrunden, separat från andra skript, vilket gör det möjligt för oss att presentera threading i våra webbapps. Även om det inte ingår i HTML5-specifikationen kan webarbetare användas med HTML5-appar. I den här snabba tipset tar vi en titt på hur man använder dem.
I landet HTML5 har vi några mycket intressanta API-er tillgängliga. Några av dem - som webbarbetare - är användbara för att öka prestanda, vilket är mycket viktigt för både appar och spel. Men hur fungerar webarbetare ... ja, jobba?
Varje instans av en webbarbetare skapar en annan tråd, där JavaScript körs. Du instanserar en som så:
Accentsconagua
var arbetare = ny arbetare ('filename.js'); Här är "filename.js" namnet på filen som innehåller ditt skript. Eftersom arbetstagare är enskilda miljöer, kan du inte använda kod inbäddad direkt i HTML; du måste använda en separat fil.
Arbetstagare har inte tillgång till sidan DOM eller det globala objektet, så hur kommunicerar de med webbplatsen? Det är enkelt. När du vill skicka några data från din sida till en Arbetare åberopar du skicka meddelande().
Detta tar en parameter: data som ska skickas, vilket kan vara antingen en sträng eller ett JSON-parserbart objekt (vilket innebär att du inte kan skicka funktioner eller cirkulära referenser, eller du får en DOM_EXCEPTION). På vissa webbläsare finns ett problem med objekt, så det är alltid bättre att analysera objektet manuellt JSON.parse () så du behöver inte oroa dig för ofullständiga implementeringar.
Detsamma gäller om du skickar data från en arbetare till sidan: bara anropa skicka meddelande() på själv, som hänvisar till arbetarens globala räckvidd. (Du gör det här inne i Arbetarens skript, förstås).
Då, för att ta emot de uppgifter du måste bifoga en onMessage händelsehanterare. Det finns två sätt att göra det, precis som med vanliga händelser för DOM-element. Du kan antingen direkt tilldela någon funktion till arbetarens onMessage egendom, eller du kan använda addeventlistener ().
// Första sätt: worker.onmessage = function (e) console.log (e.data); // Logga in data skickad // Andra sätt: worker.addEventListener ("meddelande", funktion (e) console.log (e.data); // Logga data överfördes); Det är ditt val vilken metod du ska använda. Hur som helst kommer funktionens parameter att vara en händelse objekt och de data du skickade med skicka meddelande() kommer att skickas via data egenskapen för denna händelse.
Okej, men vad händer om vi måste använda något externt bibliotek? Vi har inte tillgång till DOM eller globalt räckvidd, så vi kan inte bara injicera manuset.
Naturligtvis behöver vi inte - det finns en funktion för det. Det kallas importScripts () och det accepterar ett eller flera argument: Skriptnamn som ska laddas in inom Arbetstagarens räckvidd. Du bör vara medveten om att skript som skickats in i den här funktionen laddas i en slumpmässig ordning, men de kommer att utföras som specificerat och manuskriptet ska stoppas tills de laddas.
importScripts ( 'one-lib.js'); // Laddar ett skript importScripts ("first-lib.js", "second-lib.js", "third-lib.js"); // Laddar tre skript Du kan använda importScripts var som helst i din kod, vilket gör det enkelt att skapa JSONP-förfrågningar inom arbetarna, som vi kommer att göra i följande exempel.
Rätt, så nu vill du förmodligen se en Arbetare i aktion. I stället för att visa något ganska meningslöst, som att få primer eller Fibonacci-nummer, har jag bestämt mig för att göra något som du kanske kommer att använda efter några förändringar.
Exempelskriptet (jag har bara tagit med arbetarens kod, resten är lätt att göra) kommer att få de sista 100 tweetsna från @envatoactive (vi måste ställa räkningen till 121 istället för 100, eftersom Tweeter API skickar färre tweets än begärt - fråga mig inte varför jag inte vet).
Här är koden som skulle gå in i den faktiska Web Worker-skriptfilen:
// Helperfunktion för bearbetning av data var process = funktion (data) // Iterate genom data; Vi vet att det är en array, så det är säkert för (var i = 0, v; v = data [i]; i ++) // Och skicka tweets text till sidan self.postMessage (text: v.text); // Efter att arbetet är klart, låt sidan veta self.postMessage ("finished"); // Häfte händelse lyssnare för att hantera meddelanden self.addEventListener ("meddelande", funktion (händelse) // Kontrollera om kommandot skickat var "start" // Inte nödvändigt här, men kan vara användbart senare om (event.data == "start") // Svara på sidan som vi startade jobbet self.postMessage ("startat"); // Kärnan på manuset, få tweetsna // Återuppringningsparametern anger funktionen som ska utföras efter att begäran är klar // (Vi kallar funktionen process (), definierad ovan.) // Antal måste vara 121 eftersom Tweeter API skickar lägre mängd data än begärda importScripts ("http://twitter.com/statuses/user_timeline/envatoactive. json? callback = process & count = 121 ");); Det ska vara lätt att förstå hur allt fungerar från kommentarerna. Detta låter din app ladda alla tweets i bakgrunden med en separat tråd.
Försök nu att infoga följande motsvarande kod, vilken inte använd webarbetare, i huvudet på en tom sida istället, och notera fördröjningen. (Det är fortfarande litet, men tänk om du inte får 100 men 100 000 tweets):
Som du kan se erbjuder webbarbetare ett enkelt sätt att ta bort lagret från din GUI och flytta komplicerade beräkningar eller nätverk för att separera trådar.
Jag hoppas att du lärde dig något nytt från den här artikeln - kanske kommer du att använda arbetare i ditt nästa projekt? Om du har några frågor eller problem, vänligen kommentera nedan.
