As far as I can tell, web workers need to be written in a separate JavaScript file, and called like this: 

    new Worker(&#39;longrunning.js&#39;)

I&#39;m using the closure compiler to combine and minify all my JavaScript source code, and I&#39;d rather not have to have my workers in separate files for distribution. Is there some way to do this?

    new Worker(function() {
        //Long-running work here
    });

Given that first-class functions are so crucial to JavaScript, why does the standard way to do background work have to load a whole other JavaScript file from the web server?

Web workers without a separate Javascript file?

I&#39;ve started tinkering with Node.js HTTP server and really like to write server side Javascript but something is keeping me from starting to use Node.js for my web application.

I understand the whole async I/O concept but I&#39;m somewhat concerned about the edge cases where procedural code is very CPU intensive such as image manipulation or sorting large data sets.

As I understand it, the server will be very fast for simple web page requests such as viewing a listing of users or viewing a blog post. However, if I want to write very CPU intensive code (in the admin back end for example) that generates graphics or resizes thousands of images, the request will be very slow (a few seconds). Since this code is not async, every requests coming to the server during those few seconds will be blocked until my slow request is done. 

One suggestion was to use Web Workers for CPU intensive tasks. However, I&#39;m afraid web workers will make it hard to write clean code since it works by including a separate JS file. What if the CPU intensive code is located in an object&#39;s method? It kind of sucks to write a JS file for every method that is CPU intensive.

Another suggestion was to spawn a child process, but that makes the code even less maintainable.

Any suggestions to overcome this (perceived) obstacle? How do you write clean object oriented code with Node.js while making sure CPU heavy tasks are executed async? 

Node.js and CPU intensive requests

I am looking for real-world scenarious for using [Web Workers API][1].


  [1]: http://www.w3.org/TR/workers/

What are the use-cases for Web Workers?

What can service workers do that web workers cannot? Or vice versa?

It seems that web workers are a subset of the functionality of service workers. Is this correct?

What can service workers do that web workers cannot?

I am working on a project that uses a web worker.

In my head section I have this code:

    var worker = new Worker(&quot;worker.js&quot;);
    // More code

This works fine in Safari, but Chrome reports the following error:

`Uncaught SecurityError: Failed to create a worker: script at &#39;(path)/worker.js&#39; cannot be accessed from origin &#39;null&#39;. `

Why does this work perfectly in Safari but not Chrome? How do I fix this?

Thank you.

Chrome can&#39;t load web worker

I stumbled over node.js sometime ago and like it a lot. But soon I found out that it lacked badly the ability to perform CPU-intensive tasks. So, I started googling and got these answers to solve the problem: Fibers, Webworkers and Threads (thread-a-gogo). Now which one to use is a confusion and one of them definitely needs to be used - afterall what&#39;s the purpose of having a server which is just good at IO and nothing else? Suggestions needed!

**UPDATE:**

I was thinking of a way off-late; just needing suggestions over it. Now, what I thought of was this: Let&#39;s have some threads (using thread_a_gogo or maybe webworkers). Now, when we need more of them, we can create more. But there will be some limit over the creation process. (not implied by the system but probably because of overhead). Now, when we exceed the limit, we can fork a new node, and start creating threads over it. This way, it can go on till we reach some limit (after all, processes too have a big overhead). When this limit is reached, we start queuing tasks. Whenever a thread becomes free, it will be assigned a new task. This way, it can go on smoothly.

So, that was what I thought of. Is this idea good? I am a bit new to all this process and threads stuff, so don&#39;t have any expertise in it. Please share your opinions.

Thanks. :)

Which would be better for concurrent tasks on node.js? Fibers? Web-workers? or Threads?

I have an application that extends JavaScript via JavaScriptCore, in a webkit-gtk browser. Right now I have several classes that I add to the global context like so:

    void create_js(gpointer context, char* className, JSClassDefinition clasDefinition) {
        JSClassRef classDef = JSClassCreate(&amp;clasDefinition);
        JSObjectRef classObj = JSObjectMake(context, classDef, context);
        JSObjectRef globalObj = JSContextGetGlobalObject(context);
        JSStringRef str = JSStringCreateWithUTF8CString(className);
        JSObjectSetProperty(context, globalObj, str, classObj, kJSPropertyAttributeNone, NULL);
        JSStringRelease(str);
    }

Now, I&#39;d like to also add those classes to the WebWorker&#39;s context, so I can call them from workers instantiated in JS.

I&#39;ve tried getting the `Worker` object like so:

    JSStringRef workerStr = JSStringCreateWithUTF8CString(&quot;Worker&quot;);
    JSObjectRef worker = JSObjectGetProperty(context, globalObj, workerStr, NULL);
    JSObjectSetProperty(context, worker, str, classObj, kJSPropertyAttributeNone, NULL);
    JSStringRelease(workerStr);

But that adds it to the `WorkerConstructor` object, and when a `new Worker()` is called, the classes are not available.

How to Add a new native class to WebWorker&#39;s context in JavaScriptCore?

How can I use create a Web worker from a string (which is supplied via a POST request)?

One way I can think of, but I&#39;m not sure how to implement it, is by creating a data-URI from the server response, and passing that to the Worker constructor, but I&#39;ve heard that some browsers don&#39;t allow this, because of the same origin policy.

[MDN states the uncertainty about the origin policy around data URI&#39;s][1]:

&gt; Note: The URI passed as parameter of the Worker constructor must obey the same-origin  policy. There is currently disagreement among browsers vendors on whether data URIs are of the same-origin or not; Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) and later do allow data URIs as a valid script for workers. Other browsers may disagree.

Here&#39;s also a post [discussing it on the whatwg][2].


  [1]: https://developer.mozilla.org/En/Using_web_workers
  [2]: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-March/030878.html

How to create a Web Worker from a string

First I just created myself a regular expression that will match all unique external library paths in a list of all header files in a project. [I asked a question regarding making that regexp][2] a week ago.

I started meddling around to see how it would behave when asynchronous and when turned into a web worker. For convenience and reliability I created this universal file that runs in all three modes:

    /** Will call result() callback with every match it founds. Asynchronous unless called 
     *  with interval = -1.
     *  Javadoc style comment for Arnold Rimmer and other Java programmers:
     *  
     * @param regex regular expression to match in string
     * @param string guess what
     * @param result callback function that accepts one parameter, string match
     * @param done callback on finish, has no parameters
     * @param interval delay (not actual interval) between finding matches. If -1, 
     *        function  will be blocking
     * @property working false if loop isn&#39;t running, otherwise contains timeout ID
     *           for use with clearTimeout
     * @property done copy of done parameter
     * @throws heavy boulders
    **/
    function processRegex(regex, string, result, done, interval) {
      var m;
      //Please tell me interpreter optimizes this
      interval = typeof interval!=&#39;number&#39;?1:interval;
      //And this
      processRegex.done = done;
      while ((m = regex.exec(string))) {
        Array.prototype.splice.call(m,0,1);
        var path = m.join(&quot;&quot;);
        //It&#39;s good to keep in mind that result() slows down the process
        result(path);
        if (interval&gt;=0) {
          processRegex.working = setTimeout(processRegex, 
                                  interval, regex, string, 
                                  result, done, interval);
          // Comment these out for maximum speed
          processRegex.progress = regex.lastIndex/string.length;
          console.log(&quot;Progress: &quot;+Math.round(processRegex.progress*100)+&quot;%&quot;);
          return;
        }
      }
      
      processRegex.working = false;
      processRegex.done = null;
      if (typeof done==&quot;function&quot;)
        done();
    }
    processRegex.working = false; 

I created a test file, rather than pasting it here I uploaded it on very reliable web hosting: [Demo](http://u8.8u.cz/testing/workers/) - [Test data](http://u8.8u.cz/testing/workers/dependencies.txt).

What I find very surprising is that there is such a significant difference between web worker and browser execution of RegExp. The results I got:

 - Mozilla Firefox
   - &lt;code&gt;**[WORKER]:** Time elapsed:16.860s&lt;/code&gt;
   - &lt;code&gt;**[WORKER-SYNC]:** Time elapsed:16.739s&lt;/code&gt;
   - &lt;code&gt;**[TIMEOUT]:** Time elapsed:5.186s&lt;/code&gt;
   - &lt;code&gt;**[LOOP]:** Time elapsed:5.028s&lt;/code&gt;

You can also see that with my particular regular expression, the difference between a synchronous and an asynchronous loop is insignificant. I tried to use a match list instead of a lookahead expression and the results changed a lot. Here are the changes to the old function:

    function processRegexUnique(regex, string, result, done, interval) {
      var matchList = arguments[5]||[];
      ... same as before ...
      while ((m = regex.exec(string))) {
        ... same as before ...
        if (matchList.indexOf(path)==-1) {
          result(path);
          matchList.push(path);
        }
        if (interval&gt;=0) {
          processRegex.working = setTimeout(processRegex, interval, 
                                   regex, string, result, 
                                   done, interval, matchList);
          ... same as before ...
        }
      }
      ... same as before ...
    }

And the results:

 - Mozilla Firefox
   - &lt;code&gt;**[WORKER]:** Time elapsed:0.062s&lt;/code&gt;
   - &lt;code&gt;**[WORKER-SYNC]:** Time elapsed:0.023s&lt;/code&gt;
   - &lt;code&gt;**[TIMEOUT]:** Time elapsed:12.250s&lt;/code&gt; (note to self: it&#39;s getting weirder every minute)
   - &lt;code&gt;**[LOOP]:** Time elapsed:0.006s&lt;/code&gt;

Can anyone explain such a difference in speed?

  [2]: https://stackoverflow.com/q/32841562/607407

WebWorker calculates slow regexp matches significantly slower (3x) - firefox only

I&#39;ve been reading about web workers in HTML5, but I know JavaScript is single-threaded.  

My question is: 

How are web workers doing multi-threaded work then? or how are they simulating it if it&#39;s not truely multi-threaded?  Doesn&#39;t seem clear to me here.

Since JavaScript is single-threaded, how are web workers in HTML5 doing multi-threading?

How can angularJS use web workers to run processes in the background? Is there any pattern I should follow on doing this?

Currently, I am using a service that has the model in a separate web worker. This service implements methods like:

    ClientsFacade.calculateDebt(client1); //Just an example..

In the implementation, this method sends a message to the worker with the data. This allows me to abstract the fact that it is being performed in a separate thread and I could also provide an implementation that queries against a server or even one that does this action in the same thread.

Since I&#39;m new to javascript and I&#39;m just recycling knowledge I have from other platforms I wonder if this is something you would do or perhaps Angular which is what I am using, offers a sort of way of doing this. Also this introduces a change in my architecture since the worker must explicitly push changes to the controller, which then updates its values and then this is reflected in the view, am I over engineering this? It&#39;s a bit frustrating that web workers &quot;protect&quot; me so much from screwing up by not allowing me to share memory etc.



AngularJS and web workers

In a quest to have an interface capable of running arbitrary javascript code inside the browser, without having a security hole the size of a typical yo-mama joke, [Esailija](https://stackoverflow.com/users/995876/esailija) proposed using [Web Workers](http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html). They run in a semi-sandboxed environment (no DOM access and already inside the browser) and can be killed so the user can&#39;t put them in an infinite loop.

Here&#39;s the example he brought up: http://tuohiniemi.fi/~runeli/petka/workertest.html (open your console)

[jsfiddle](http://jsfiddle.net/BwgKn/4/) (Google chrome only)

Now, this seems like a good solution; however, is it a complete (or approaching complete) one? Is there anything obvious missing?

The entire thing (as it&#39;s hooked up to a bot) can be found on github: [worker](https://github.com/Zirak/SO-ChatBot/blob/master/source/codeWorker.js), [evaluator](https://github.com/Zirak/SO-ChatBot/blob/master/source/eval.js)

main:

    workercode = &quot;worker.js&quot;;
    
    function makeWorkerExecuteSomeCode( code, callback ) {
        var timeout;
        
        code = code + &quot;&quot;;
        var worker = new Worker( workercode );
    
        worker.addEventListener( &quot;message&quot;, function(event) {
            clearTimeout(timeout);
            callback( event.data );
        });
        
        worker.postMessage({
            code: code
        });
        
        timeout = window.setTimeout( function() {
            callback( &quot;Maximum execution time exceeded&quot; );
            worker.terminate();
        }, 1000 );
    }
    
    makeWorkerExecuteSomeCode( &#39;5 + 5&#39;, function(answer){
        console.log( answer );
    });
    
    makeWorkerExecuteSomeCode( &#39;while(true);&#39;, function(answer){
        console.log( answer );
    });
    
    var kertoma = &#39;function kertoma(n){return n === 1 ? 1 : n * kertoma(n-1)}; kertoma(15);&#39;;
    
    makeWorkerExecuteSomeCode( kertoma, function(answer){
        console.log( answer );
    });

worker:


    var global = this;
    
    /* Could possibly create some helper functions here so they are always available when executing code in chat?*/
    
    /* Most extra functions could be possibly unsafe */
    
        var wl = {
            &quot;self&quot;: 1,
            &quot;onmessage&quot;: 1,
            &quot;postMessage&quot;: 1,
            &quot;global&quot;: 1,
            &quot;wl&quot;: 1,
            &quot;eval&quot;: 1,
            &quot;Array&quot;: 1,
            &quot;Boolean&quot;: 1,
            &quot;Date&quot;: 1,
            &quot;Function&quot;: 1,
            &quot;Number&quot; : 1,
            &quot;Object&quot;: 1,
            &quot;RegExp&quot;: 1,
            &quot;String&quot;: 1,
            &quot;Error&quot;: 1,
            &quot;EvalError&quot;: 1,
            &quot;RangeError&quot;: 1,
            &quot;ReferenceError&quot;: 1,
            &quot;SyntaxError&quot;: 1,
            &quot;TypeError&quot;: 1,
            &quot;URIError&quot;: 1,
            &quot;decodeURI&quot;: 1,
            &quot;decodeURIComponent&quot;: 1,
            &quot;encodeURI&quot;: 1,
            &quot;encodeURIComponent&quot;: 1,
            &quot;isFinite&quot;: 1,
            &quot;isNaN&quot;: 1,
            &quot;parseFloat&quot;: 1,
            &quot;parseInt&quot;: 1,
            &quot;Infinity&quot;: 1,
            &quot;JSON&quot;: 1,
            &quot;Math&quot;: 1,
            &quot;NaN&quot;: 1,
            &quot;undefined&quot;: 1
        };
        
        Object.getOwnPropertyNames( global ).forEach( function( prop ) {
            if( !wl.hasOwnProperty( prop ) ) {
                Object.defineProperty( global, prop, {
                    get : function() {
                        throw new Error( &quot;Security Exception: cannot access &quot;+prop);
                        return 1;
                    }, 
                    configurable : false
                });    
            }
        });
        
        Object.getOwnPropertyNames( global.__proto__ ).forEach( function( prop ) {
            if( !wl.hasOwnProperty( prop ) ) {
                Object.defineProperty( global.__proto__, prop, {
                    get : function() {
                        throw new Error( &quot;Security Exception: cannot access &quot;+prop);
                        return 1;
                    }, 
                    configurable : false
                });    
            }
        });
    
    
    
    
    onmessage = function( event ) {
        &quot;use strict&quot;;
        var code = event.data.code;
        var result;
        try {
            result = eval( &#39;&quot;use strict&quot;;\n&#39;+code );
        }
        catch(e){
            result = e.toString();
        }
        postMessage( &quot;(&quot; + typeof result + &quot;)&quot; + &quot; &quot; + result );
    };


Making WebWorkers a safe environment

Is there a way to determine the number of available CPU cores in JavaScript, so that you could adjust the number of web workers depending on that?

Get number of CPU cores in JavaScript?

Can a WebWorker access the localStorage?

If not why not? Is it problematic from a security stand point?


Accessing localStorage from a webWorker

How should I structure a project that includes main thread (DOM) script, and workers? Eg:

# main.ts

```ts
// This file must have DOM types, but not worker types.

const worker = new Worker(&#39;worker.js&#39;);

worker.onmessage = (event) =&gt; {
  // Ideally, I should be able to reference types from the worker:
  const data = event.data as import(&#39;./worker&#39;).HelloMessage;
  console.log(data.hello);
};
```

# worker.ts

```ts
// This file must have worker types, but not DOM types.
// The global object must be one of the worker globals (how do I pick which?)

const helloMessage = {
  hello: &#39;world&#39;,
};

export type HelloMessage = typeof helloMessage;

postMessage(helloMessage);
```

Whenever I&#39;ve tried this in the past I feel like I&#39;ve been fighting TypeScript by either:

* Using one `tsconfig.json` that has both worker &amp; DOM types. But of course this isn&#39;t accurate type-wise.
* Using multiple `tsconfig.json`. But then the project boundary makes it hard to reference types between them.

Additionally, how do I declare the global in a worker? Previously I&#39;ve used `declare var self: DedicatedWorkerGlobalScope`, but is there a way to actually set the global (rather than just setting `self`)?

Structuring a TypeScript project with workers

After reading this blog post: http://www.sitepoint.com/javascript-shared-web-workers-html5/

I don&#39;t get it. What&#39;s the difference between a `Worker` and a `SharedWorker`?

What&#39;s the difference between Shared Worker and Worker in HTML5?

I&#39;m trying to pass an object to a web worker through the postMessage function.  
This object is a square that has a couple of functions to draw himself on a canvas and some other things.  The web worker must return an array of this objects.  
The problem is that when I call the postMessage function with this object, I get an this error:

    Uncaught Error: DATA_CLONE_ERR: DOM Exception 25
I get this both sending the object to the worker and the other way around.  
I think the error is because javascript must serialize the object, but can&#39;t do it because the object has functions built-in.

Does anyone ever had a similar problem? Do you know some workarround to this?  
Thanks in advance.

Passing objects to a web worker

I am using ES2015 Import / Export modules.

In my worker file, when I try to import functions like I normally do:

**worker.js**

    import { a, b, c } from &quot;./abc.js&quot;;

I get the error:
`SyntaxError: import declarations may only appear at top level of a module`

As I am exporting functions in my module &#39;abc.js&#39;, I am not sure how to use them using the old (&amp; apparently on its way out) syntax:

    self.importScripts( &quot;/app/abc.js&quot; );

So, my question is, how do we use the new import module syntax with workers?

Second question is, what does `importScripts` import into when it imports from a module in where is there is no global object parent being exported?

All Web Worker Solutions on Gang of Coders

Total of 18 Web Worker Solutions