javascript - web workers - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 3 > >>

Bruger #13010 @ 28.07.12 19:28

Hej jeg har den her side hvor man kan teste hvor mange tegn browseren kan gemme i localStorage og sessionStorage :
http://scootergrisen.dk/htmlgrisen/eksempler/eksempel0008.html

Nu vil jeg gerne lave siden om så den bruge web workers som jeg forstår skulle være godt til sådan en opgave.

Testen lider nemlig under at processbaren ikke opdater sig før hele testen af slut i de fleste browsere og det lidt ærgeligt det er meningen man under testen skal kunne følge med på processbaren og se hvor langt man er nået.

Nå men nu er jeg så lige idag gået igang med at lære om web workres så kender det ikke endnu men jeg kan se at man ikke har adgang til window objecktet fra en webn worker og dermed heller ikke localStorge og sessionStoage...

Så hvordan skal jeg kunne lave min test med web workers ?

Jeg ville jo gerne putte localStorage.setItem('', e.data); i min web worer fil men det kan jeg jo så ikke.

Fik afvide noget af min kode var ueffektiv.
Så fik jeg afvide jeg kunne skrive data = new Array(10000000).toString(); i stedet.

Er der en endnu bedre måde at lave en lang streng på hvor der skal være et vist antal tegn i ?

Indlæg senest redigeret d. 29.07.2012 06:09 af Bruger #13010

24 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #11328 @ 30.07.12 14:44

1.323

@Scootergrisen, okay, jeg syntes bare at jeg havde gjort det ret klart med min pseudo-kode - og du skrev ikke hvad det var du ikke forstod, bare at du ikke forstod noget.

Anyways har jeg lavet en færdig implementering, som dog benytter console i stedet for DOM. Min implementation benytter den samme streng, da det er langt hurtigere end at generere end ny streng hver gang.

HTML kode

 <!DOCTYPE html>
 <html>
   <head>
     <title>Playground</title>
     <meta charset="utf-8" />
     <script type="text/javascript">
       // Globals
       var kDBKey = 'playground';
 
       // Create a long string
       function longString(astring, length, chunkSize, callback) {
         if(astring.length >= length) {
           callback(astring.substr(0, length));
         } else {
           astring += new Array(chunkSize).toString();
           setTimeout(longString, 13, astring, length, chunkSize, callback);
         }
       }
 
       function findStorageLimit(buffer) {
         var bufferSize = buffer.length;
         try {
           console.log('Storing buffer, size: ' + bufferSize + ' bytes');
           localStorage.setItem(kDBKey, buffer);
 
           return true;
         } catch(e) {
           console.log('Unable to store buffer');
 
           return false;
         }
       }
 
       function recursiveLimit(size, buffer, lower, upper, limit) {
         longString(buffer, size, 100000, function(aLongString) {
           var success = findStorageLimit(aLongString);
           if (success) {
             lower = size;
           } else {
             upper = size;
             limit = true;
           }
 
           if (upper === lower || ((upper-lower) === 1 && success)) {
             console.log("Max limit found: " + size.toString(10));
             return;
           }
 
           size = (limit) ? (lower + (upper-lower) / 2) : (size * 2);
           recursiveLimit(Math.floor(size), aLongString, lower, upper, limit);
         });
       }
 
       recursiveLimit(1, '', 0, 1024*1024*50, false);
     </script>
   </head>
   <body>
   </body>
 </html>

og kan fortælle at min Firefox kan klare 16777215 bytes ~ 16,78 MB og Chrome kun 2620179 bytes ~ 2,62 MB.

Bruger #11328 @ 30.07.12 17:31

1.323

@Søren, jeg benytter ikke en incrementive algoritme, så derfor burde min løsning ikke lide (i samme grad) af det problem du nævner.

Ja, strenge er immutable, men eftersom det er 'toString' delen og ikke selve allokeringen af arrayet der tager tid, er jeg nød til lave en streng ud af det hver gang, i stedet for bare at benytte et array, som man kunne pushe yderligere bytes til.

Nu var det her bare en hurtig løsning, da jeg ikke ville bruge for lang tid på det, men jeg kan forestille mig at ArrayBuffer og alle de nye TypedArrays ville være bedre egnet til denne opgave, men det må Scootergrisen selv ligge og rode med (Det er vel faktisk en meget god introduktion til netop disse).

EDIT: Havde ikke set din opdatering Søren.

@Scootergrisen: Grunden til det ligger i den kode du har tilføjet, men har ikke tid til at tjekke det lige nu så grundigt. Tror det ligger i din "valg" variabel - og at du (i Firefox) rent faktisk ikke putter noget i databasen.

EDIT 2:: @Søren: Det er rigtigt at det ikke er en "ren" binær-søgning, men det skyldes at det implementation du benytter nu starter ved at allokere halvdelen af "max", og derved hvis Scootergrisen har behov for at tjekke for op til 50MB, starter den med at allokere 25MB (som er en tidskrævende process, og det ville gå hurtigere hvis man startede nedefra og arbejdede sig op.)

Indlæg senest redigeret d. 30.07.2012 17:45 af Bruger #11328

Bruger #11328 @ 29.07.12 12:01

1.323

WebWorkers er ikke svaret på dit problem, når det er det "load", som din kode giver browseren via kaldende til localStorage og sessionStorage. WebWorkers er løsningen på komplicerede og tidskrævende beregninger, som klienten skal udregne. Disse udregninger ville før i tiden enten skulle "bryddes op" i stykker, for ikke at sløve browseren, eller simpelthen forårsage ét ordentligt lag hvor den fik hele beregningen udført. Med WebWorkers kan du nu udfører disse beregninger "parallelt" med din hjemmeside - Lidt ligesom multithreading i andre sprog.

Jeg kan se at du benytter dig af "divide-and-conquer" metoden, som ganske rigtigt er den mest korrekte algoritme at benytte til denne type "trial-and-error" problem. Men som jeg har sagt før i en anden tråd belaster du din "main-thread" (Altså den tråd hvor din JavaScript bliver kørt og grafikken opdateret i forhold til din HTML), for meget. Du er nød til at "lette" byrden ved at lave kaldet til din rekursive test funktion med et timeout (med setInterval el. setTimeout funktionerne). Fx:

JScript kode

 var timerHandle;
 
 function calculationFunc(arg1, arg2) {
   // Din divide-and-conquer algoritme ...
 
   if (!sucess) {
     // Laver et timeout på næste funktionskald, med de opdaterede parametre "upper" og "lower"
     timerHandle = setInterval(calculationFunc, 20, arg1, arg2);
   } else {
     timerHandle = clearInterval(timerHandle);
   }
 }
 
 calculationFunc("Argument 1", "Argument 2")

Koden er lidt pseudo-agtig, da jeg ikke har indskrevet selve algoritmen, men håber du forstår. Hvis ikke så bare skriv igen.

PS: Jeg ved ikke om Array.toString metoden er den hurtigste at lave en lang streng på, men hvis det er så husk at:

JScript kode

 new Array(1000).toString().length === 999

Indlæg senest redigeret d. 29.07.2012 12:03 af Bruger #11328

Bruger #13010 @ 29.07.12 19:27

440

Jeg kan godt nok ikke få noget af det her til at virke.

Kom gerne med forslag.

Og jeg aner bare ikke hvordan jeg skal få det setinterval ind selvom jeg har faktisk haft det før.

Det er de her 2 filer jeg prøver at lave til at bruge web worker :
http://scootergrisen.dk/htmlgrisen/eksempler/eksempel0030.html
http://scootergrisen.dk/htmlgrisen/eksempler/findgrense.js

Indlæg senest redigeret d. 29.07.2012 19:28 af Bruger #13010

Bruger #11328 @ 29.07.12 21:28

1.323

Jeg skulle mene at du i hvert fald kan prøve at få det til at virke efter at have læst mit indlæg? Som sagt: Dette problem hverken kan eller skal løses med WebWorkers!

Jeg skrev også hvordan du skulle benytte timeout funktionerne i forrige indlæg, altså et rekursivt indirekte kald vha. setTimeout.

Bruger #2695 @ 29.07.12 23:55

1.963

Hmmm...jeg vil nu mene, at webworkers fint kan løse problemet. Netop fordi det er en separat tråd, så kan main tråden få fred til at opdatere siden og håndtere user events, mens webworkeren tæsker løs på localstorage.

Din webworker skal udføre søgningen, og når et resultat foreligger, skal det sendes til main tråden med postMessage. Main tråden skal oprette webworkeren og lytte efter beskeder fra den....noget i denne stil:

JScript kode

 //worker.js
 function howManyCharsCanBeSaved() {
     //Implement your search here and return the result
     return 42;
 }
 
 var num = howManyCharsCanBeSaved();
 self.postMessage(num);

Main tråden skal gøre noget i denne stil:

JScript kode

 var worker = new Worker('worker.js');
 worker.onMessage = function(num) {
     console.log("You can save " + num + " chars.");
 };

Bruger #13010 @ 30.07.12 00:04

440

Robert > Jeg kan ikke bruger storage i web worker filen.
Istedet gør jeg det at jeg i web worker filen lave den meget lange streng som skal gemmes i storage da det nok tager noget tid og lave den og det får web worker storage så lov til at gøre.

Men jeg er bare kørt fast i koden.

Bruger #11328 @ 30.07.12 00:07

1.323

Men Robert, WebWorkers har ikke adgang til hverken window, localStorage eller sessionStorage (og heller ikke DOM), så hvordan skulle det være til nogen egentlig nytte i denne situation? Det virker fuldkomment overdrevet at køre en WebWorker for et simpelt logisk udtryk? (større end, mindre end, lig)

EDIT: @Scootergrisen, nej det giver ingen mening, for det tager næsten ingen tid, og selve "overførslen" af strengen vil formentlig tage længere tid end bare at lave den ved klienten!

Kode

console.time('arraytostring');(new Array(1000001).toString());console.timeEnd('arraytostring'); -> 'arraytostring: 36ms'
console.time('arraytostring');(new Array(100001).toString());console.timeEnd('arraytostring'); -> 'arraytostring: 4ms'

Indlæg senest redigeret d. 30.07.2012 00:10 af Bruger #11328

Bruger #2695 @ 30.07.12 00:15

1.963

Ok...det vidste jeg ikke :-(

Så kan du nok ikke bruge webworker. Du kan oprette den store streng i en webworker og så sende den til main tråden, men det vil nok ikke virke, som man forventer, for jeg er næsten overbevist om at de ikke kommer til at dele strengen. Istedet vil en kopi blive oprettet og det tager ligeså lang tid...medmindre kopien bliver lavet i worker tråden.

Måske værd at forsøge...altså noget i stil med:

JScript kode

 for (var i = 1; i < 1000; i *= 2) {
     self.postMessage(new Array(i).toString());
 }

JScript kode

 var strings = [];
 var worker = new Worker('worker.js');
 
 worker.onMessage = function(str) {
     strings.push(str);    
 };
 
 setInterval(function() {
     if (strings.length > 0) {
         var str = strings.shift();
         //Check if you can save 'str'
     }
 }, 10);

Så tjekker du max én streng hvert 10. millisekund...har min tvivl på at det er en bedre løsning, men det er værd at forsøge.

Indlæg senest redigeret d. 30.07.2012 00:16 af Bruger #2695

Bruger #11328 @ 30.07.12 00:21

1.323

Hvad med:

JScript kode

 function longString(string, length, chunkSize, callback) {
   if(string.length >= length) {
     callback(string);
   } else {
     string += new Array(chunkSize).toString();
     setTimeout(longString, 13, string, length, chunkSize, callback);
   }
 }
 
 longString('', 10000000, 100001, function(aLongString) {
   console.log("Got aLongString");
 });

Jeg vil sige at det er "i JavaScriptens ånd"

Du kan selv eksperimentere med chunkSize, interval-tempo osv.

Indlæg senest redigeret d. 30.07.2012 00:24 af Bruger #11328

<< < 1 2 3 > >>

web workers

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler