Why can't WebWorkers have access to the DOM? [duplicate]

November 22, 2016, at 3:59 PM

This question already has an answer here:

  • Is there a way to create out of DOM elements in Web Worker? 8 answers

We all know we can spin up some web workers, give them some mundane tasks to do and get a response at some point, at which stage we normally parse the data and render it somehow to the user right.

Well... Can anyone please provide a relatively in-depth explanation as to why Web Workers do not have access to the DOM? Given a well thought out OO design approach, I just don't get why they shouldn't?


I know this is not possible and it won't have a practical answer, but I feel I needed a more in depth explanation. Feel free to close the question if you feel it's irrelevant to the community.

Answer 1

The other answers are correct; JS was originally designed to be single-threaded as a simplification, and adding multi-threading at this point has to be done very carefully. I wanted to elaborate a little more on thread safety in Web Workers.

When you send messages to workers using postMessage, one of three things happen,

  1. The browser serializes the message into a JSON string, and de-serializes on the other end (in the worker thread). This creates a copy of the object.
  2. The browser constructs a structured clone of the message, and passes it to the worker thread. This allows messaging using more complex data types than 1., but is essentially the same thing.
  3. The browser transfers ownership of the message (or parts of it). This applies only for certain data types. It is zero-copy, but once the main context transfers the message to the worker context, it becomes unavailable in the main context. This is, again, to avoid sharing memory.

When it comes to DOM nodes,

  1. is obviously not an option, since DOM nodes contain circular references,
  2. could work, but in a read-only mode, since any changes made by the worker to the clone of the node will not be reflected in the UI, and
  3. is unfortunately not an option since the DOM is a tree, and transferring ownership of a node would imply transferring ownership of the entire tree. This poses a problem if the UI thread needs to consult the DOM to paint the screen and it doesn't have ownership.
Answer 2

The entire world of Javascript in a browser was originally designed with a huge simplification - single threadedness (before there were webWorkers). This single assumption makes coding a browser a ton simpler because there can never be thread contention and can never be two threads of activity trying to modify the same objects or properties at the same time. This makes writing Javascript in the browser and implementing Javascript in the browser a ton simpler.

Then, along came a need for an ability to do some longer running "background" type things that wouldn't block the main thread. Well, the ONLY practical way to put that into an existing browser with hundreds of millions of pages of Javascript already out there on the web was to make sure that this "new" thread of Javascript could never mess up the existing main thread.

So, it was implemented in a way that the ONLY way it could communicate with the main thread or any of the objects that the main thread could modify (such as the entire DOM and nearly all host objects) was via messaging which, by its implementation is naturally synchronized and safe from thread contention.

Here's a related answer: Why doesn't JavaScript get its own thread in common browsers?

Answer 3

Web Workers do not have DOM access because DOM code is not thread-safe. By DOM code, I mean the code in the browser that handles your DOM calls.

Making thread-unsafe code safe is a huge project, and none of the major browsers are doing it.

Servo project is writing new browser from scratch, and I think they are writing their DOM code with thread-safety in mind.

Rent Charter Buses Company
How to get an element that is a children of a tag with a specified value in XML?

How to get an element that is a children of a tag with a specified value in XML?

I am doing a POST in jQuery and as a result I get a response in XML format like that one:.

IE8 site keeps going into Quirk mode with JS added into the page

IE8 site keeps going into Quirk mode with JS added into the page

We have a site that's running perfectly in all browsers except IE8. .

Horizontal autoscroll to loop - currently not possible

Horizontal autoscroll to loop - currently not possible

I am using fullPage. js JQuery plugin in my code so I can do horizontal scrolling on full screen divs as follows: - jsfiffle.

How send value of no-captcha (v2) to another page with jQuery?

How send value of no-captcha (v2) to another page with jQuery?

How send value of recaptcha to another page with jQuery?.