Web Worker Limitations

Question

Please keep in mind that I have never used web workers before and I had trouble wrapping around them.

Here is an explanation of a simplified version of what I'm doing.

There are links to various files on my page - some are text, some are images, etc. Each file has an image with a common file icon.

I want the script to replace each common icon with a preview of the contents of the file.

the script will request a file from the server (thereby adding it to the cache as a preloader), then create a canvas and draw a preview on it (a thumbnail for images, text exposure for text files, a more specific icon for media files ...) and finally replace the generic icon source with the canvas using the data url.

I can do this quite easily. However, I would prefer to have it in the background so that it does not interfere with the interface when working.

Before diving into this, I need to know: can workers work with canvas, and if so, how would I create it? I don’t think document.createElement('canvas') will work because Workers cannot access the DOM, or I don’t understand when all the links found say that they "cannot access the DOM"?

Answer 1

You cannot access the DOM from web workers. You cannot upload images. You cannot create canvas elements and draw them from web workers. Currently, web workers are pretty much limited to making ajax calls and intensive computing. See this related question / answer about web workers and canvas objects: Web workers and a canvas and in this article about using webmasters to speed up image processing: http://blogs.msdn.com/b/eternalcoding/archive/ 2012/09/20 / using-web-workers-to-improve-performance-of-image-manipulation.aspx

Your easiest bet is to break your work into small pieces (without web workers) and make a piece at a time, make setTimeout() , and then process the next piece of work. This will allow the user interface to respond while continuing to work. If you need to calculate the processor consumption (for example, image analysis), this can be processed by the web worker, and the result can be sent via message back to the main stream, which will be placed in the DOM, but if not, then just do your job in small pieces to support the user interface.

Parts of tasks, such as downloading images, fetching data from servers, etc., can also be performed asynchronously, so in any case this will not interfere with the response of the interface.

Here's the general idea of ​​chunking:

 function doMyWork() { // state variables // initialize state var x, y, z; function doChunk() { // do a chunk of work // updating state variables to represent how much you've done or what remains if (more work to do) { // schedule the next chunk setTimeout(doChunk, 1); } } // start the whole process doChunk(); } 

Answer 2

Another (disappointing) limitation of web workers is that they cannot access geolocation in Chrome. Only my two cents.

Answer 3

Thus, as others have argued, you cannot access the DOM or do any kind of DOM manipulation from a web worker. However, you can transfer some of the more complete calculations to a web worker. Then, as soon as you receive a response from the web worker inside your main JS thread, you can extract the desired values ​​and use them in the DOM.

This may not be related to your question, but you mentioned the canvas, so I will share this with you.

If you need to improve the performance of drawing on canvas, I highly recommend having two canvas objects. One that appears in the user interface, the other is hidden. That way you can build everything on a hidden canvas, and then draw a hidden canvas on the canvas. It may not sound as if something had happened, but it will significantly increase productivity.

See this link for more information on improving canvas performance.

Answer 4

 <img arc="file_name.jpg"/> /////////////////////////// //<!-- or --> 

Worker, SharedWorker, DedicatedWorker do not have access to many other than the message event, I also found that "* .js" should be stored in the URL, and not in the local file.

Download ~? can happen, however, there is no specific markup code other than this simple text ~ philosophy?

mm, hahaha ... For a million dollars - Austin ~ Silas, try to cheer you up ^

As we want to continue, start again

0000 0001 0010 0011 0100 0101 0110 0111 1000 000