Quick Tips: Javascript Web Workers Flytt Hard Work til Bakgrunns
Del
Del
6
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
En web arbeidstaker er en JS skript som kjører i bakgrunnen, atskilt fra andre scripts, tillater oss å introdusere threading i våre web apps. Selv ikke en del av HTML5-spesifikasjonen, kan web-arbeidere brukes med HTML5 apps. I denne hurtig Tip, vil vi ta en titt på hvordan du bruker dem.
Introduksjon til Web Workers
I landet HTML5 har vi noen svært interessante APIer tilgjengelig. Noen av dem - som Web Workers - er nyttig for å øke ytelsen, noe som er svært viktig for både apps og spill. Men gjør hvordan web arbeidere ... vel, arbeide?
Hver forekomst av en web arbeidstaker skaper en annen tråd, hvor Javascript kjører. Du instantiate en som så:
Var arbeidstaker = new Worker ('filename.js');
Her 'filename.js' er navnet på filen som inneholder skriptet. Fordi Arbeidere er individuelle miljøer, kan du ikke bruke kode innebygd direkte i HTML; du må bruke en egen fil
Kommunikasjon. Sende og motta data
Workers ikke har tilgang til siden DOM eller det globale objekt, så hvordan de kommuniserer med siden? Det er enkelt. Når du ønsker å sende noen data fra din side til en Worker, påberope deg Postmessage ()
Dette tar en parameter:. Data å sende, som enten kan være en streng eller en JSON analyseres objekt (som betyr at du kan ikke passere funksjoner eller sirkelreferanser, eller du vil få en DOM_EXCEPTION). På noen nettlesere er det et problem med gjenstander, så det er alltid bedre å analysere objekt med JSON.parse (manuelt), slik at du ikke trenger å bekymre deg for ufullstendige implementasjoner.
Det samme gjelder hvis du skal sende data fra en Worker til side: bare påberope Postmessage () på selv, som refererer til Worker globale omfang. (Du gjør dette inne i arbeider manuset, selvfølgelig).
Så, for å motta data du må legge ved en onmessage hendelseshåndterer. Det er to måter å gjøre det, akkurat som med regelmessige arrangementer for DOM-elementer; du kan enten direkte tildele noen funksjon til arbeider onmessage eiendom, eller du kan bruke addEventListener ()
//Første måte: worker.onmessage = function (e) {console.log (e.data);. //Logg dataene sendes} //Andre måten: worker.addEventListener ('melding', funksjon (e) {console.log (e.data); //Logg dataene sendes});
Det er ditt valg som metode å bruke. Uansett vil funksjonens parameter være en hendelse objekt, og data som er sendt med Postmessage () vil bli sendt via data eiendom av denne hendelsen.
Eksterne Scripts og biblioteker
Ok, men hva hvis vi må bruke noen eksterne bibliotek? Vi har ikke tilgang til DOM eller det globale omfang, så vi kan ikke bare injisere manuset
Selvfølgelig trenger vi ikke å -. Det er en funksjon for det. Det kalles importScripts () og det aksepterer ett eller flere argumenter: script navn for å laste inne omfanget av Worker. Du bør være klar over at skript gått inn i denne funksjonen er lagt i en tilfeldig rekkefølge, men de vil bli utført som spesifisert og skriptkjøring vil bli stanset inntil de er lastet
importScripts ('one-lib.js.'); //Masse ett scriptimportScripts ('første-lib.js', 'nest lib.js', 'tredje-lib.js'); //Laster tre scripts
Du kan bruke importScripts hvor som helst i koden, noe som gjør det enkelt å lage JSONP forespørsler inne arbeiderne, som vi vil gjøre i det følgende eksemplet
Eksempel:. Arbeidere i handling
Høyre, så nå har du sannsynligvis vil se en Worker i aksjon. I stedet for å vise noe ganske ubrukelig, som å få primtall eller Fibonacci-tallene, har jeg bestemt meg for å gjøre noe som du kanskje vil bruke etter noen få endringer.
Eksempelet script (jeg har tatt med arbeiderkode, resten er lett å gjøre) vil få den siste 100 tweets fraenvatoactive (vi må sette telle til 121 i stedet for 100, som Tweeter API sender færre tweets enn ønskelig - ikke spør meg hvorfor, jeg gjør ikke vet)
Her er koden som ville gå inne i selve Web Worker skriptfilen.
//Helper funksjon for behandling av datavar prosessen = function (data) {//Reagere gjennom data; vi vet at det er en matrise, så det er trygt for (var i = 0 v,; v = data [i]; i ++) {//Og passere Tweet tekst til siden self.postMessage ({text: v.text}); } //Etter jobb er gjort, la side vet self.postMessage ("ferdig");} //Fest hendelse lytteren til å håndtere messagesself.addEventListener ('melding', funksjon (hendelse) {//Sjekk om kommandoen sendte var " starte '//Ikke nødvendig her, men kan være nyttig senere hvis (event.data == "start") {//Svar til siden som vi startet arbeidet self.postMessage ("startet"); //Kjerne av script, får Tweets //Den tilbakeringingsparameteren angir funksjonen for å utføre etter at kravet er gjort //(Vi kaller prosessen () -funksjonen, definert over). //Count må være 121 fordi diskant API sender lavere mengde data enn angitt importScripts("http://twitter.com/statuses/user_timeline/envatoactive.json?callback=process&count=121"); }});
Det skal være enkelt å forstå hvordan dette fungerer fra kommentarene. Dette lar appen belastning alle tweets i bakgrunnen, ved hjelp av en egen tråd.
Nå kan du prøve å sette inn følgende tilsvarende kode, som gjør ikke anbefale bruk web-arbeidere, inn i hodet på en tom side i stedet, og legg merke forsinkelsen. (Det er fortsatt små, men tenk om du skulle få ikke 100, men 100 000 tweets): Som du kan se, web arbeidstakere tilby deg en enkel måte å fjerne etterslepet fra GUI og flytte kompliserte beregninger eller nettverk til separate tråder Jeg håper du har lært noe nytt fra denne artikkelen. - Kanskje du vil bruke Workers in ditt neste prosjekt? Hvis du har spørsmål eller problemer kan du kommentere nedenfor. Anmeldelser
< script type = "text /javascript" > Var prosess = function (data) {//Reagere gjennom data; vi vet at det er en matrise, så det er trygt for (var i = 0 v,; v = data [i]; i ++) {//And logge Tweet tekst til konsollen console.log (v.text); }} ≪ /script > < script src="http://twitter.com/statuses/user_timeline/envatoactive.json?callback=process&count=121"></script>
Conclusion