4

Skimming? Just read what's bold.

Howdy friends! I'm building a web application that needs to do some serious XML crunching.

I currently have a function that uses jQuery to parse and manipulate massive XML documents. This locks up the brower's UI for up to sixty seconds, which is obviously, quite lame.

I've been looking into Web Workers, because I'd like to run this operation in a Web Worker thread to alleviate the browser's UI.

I was hoping I could use the Web Worker's self.importScripts() to import the jQuery library, to parse and manipulate XML from within the Web Worker thread.
   Cannot do: the Web Worker throws errors, like window is not defined, because the jQuery library makes references to window and friends, which aren't thread safe, and therefore aren't present in the Web Worker's global namespace.

I've done a lot of Googling, but have had trouble finding any recent information on this subject. I've found some hacky work-arounds and jQuery plugins, but they are all several years old, and I've been hoping I've been missing a newer solution for this relatively new technology.
   Does a (semi-)official "Web Worker jQuery" exist?

I've found XMLforScript, an alternative to jQuery that should run within a Web Worker -- but I'm specifically looking for a jQuery solution, because I don't want to rewrite my code.

I was tempted to try to create a series of fake elements to ease jQuery's errors within the Web Worker, before calling importScripts(), like so:

window={
    document:{
        createElement:function(){
            return {
                setAttribute:function(){} } } } };
    /* ... much more fake DOM */
    importScripts('jquery.js');

But, I realize I'd have to go really deep into creating a gigantic artificial DOM to satisfy jQuery, and figure it's probably a road to failure and time-wasting, because jQuery probably relies on some of these objects for it's XML parsing (I don't know enough about how jQuery works to know).

Does anybody have any lovely solutions?

If not, I'll just make a fatty static loading indicator to warn the user that shenanigans take time, and that they have to trust and hope the web-app hasn't crashed or stopped working :D

Thanks for your ponderings.
  //Chase.

ChaseMoskal
  • 7,151
  • 5
  • 37
  • 50
  • you might want to look into jquery deferred, not sure what it is exactly but I think it might work for what you are doing – markasoftware Mar 15 '13 at 00:41
  • Possible duplicate of [How to access Jquery in Html 5 Web Worker](http://stackoverflow.com/questions/10491448/how-to-access-jquery-in-html-5-web-worker) – Delgan Jun 25 '16 at 13:38

2 Answers2

0

You should be able to use the ideas from this method, which uses a Blob to give the web worker access to the originating dom.

Update

The worker does indeed have access to the DOM, as this toy example should demonstrate.

the above statement is a blatant lie (thanks OP). See Update II

Update II

as the OP correctly has pointed out in the comments below, the example given is cheating. If you are able to liberate yourself from JQuery, I have an example using the quite capable xml for <script> library to do some SAX processing on an xml document. I have posted the example to github. When executed, the result is written to the console, so have one open.

I have uploaded the code here for demo purposes.

Also, a good in-depth discussion of web workers and inaccessibility of the DOM is provided in this SO question

Community
  • 1
  • 1
Steen
  • 6,573
  • 3
  • 39
  • 56
  • It looks to me like the worker in the given example *does not have DOM access.* The article quotes, `One downside… web workers don’t have access to the DOM`, and the demonstration features a web worker passing serialized data to the main thread -- which does have DOM access, and performs DOM manipulation (updating the counter) on the web worker's behalf. *In this example,* the web worker would not have access to jQuery, or any of its handy functions. – ChaseMoskal Oct 25 '13 at 21:00
  • @ChaseMoskal: I've updated my answer with a link to a jsfiddle demo demonstrating access to the DOM – Steen Oct 26 '13 at 12:42
  • 1
    I feel you are misunderstanding this, though I do sincerely appreciate your contribution attempt. In your Fiddle'd example, the Web Worker, which is the code contained within the ` – ChaseMoskal Oct 26 '13 at 16:29
  • To be honest, under further examination -- I find the examples given in [*the article you linked*](http://www.html5gamedev.de/2013/07/19/a-start-on-multi-threading-using-web-workers/) is really terrible code. I've made a fork of your jsFiddle, which explains the issue with the article's technique, and also highlights how the web worker does not have any DOM access (no document object, no window object, and not even a console object!). See my forked and explanatory [**jsFiddle**](http://jsfiddle.net/ChaseMoskal/Uuwu9/). – ChaseMoskal Oct 26 '13 at 16:55
  • A made yet [**Another Fork of the jsFiddle**](http://jsfiddle.net/ChaseMoskal/FKKh3/) in question. It adds only one attribute to the web worker's script tag, which prevents it from being executed in the main thread -- add `type="javascript/webworker"` (any type value you want that isn't real), and the browser will not execute it. The main script who creates the javascript ignores this custom type, as it specifies the type to be "text/javascript" anyways. This does fix the primary issue I have with the article's method, however, this does not change the fact that web workers have no DOM access. – ChaseMoskal Oct 26 '13 at 17:01
  • @ChaseMoskal I see that you are (unfortunately for you) completely right. I found this SO question http://stackoverflow.com/questions/4838883/html-web-worker-and-jquery-ajax-call, which dig a bit deeper into the issue, but with the same negative result. If you insist on using the JQuery xml processing librar, it looks like you're out of luck. But the ability to import javascript files that work directly on data without the DOM access could let you import a separate XML processing library. I will post an example of a web worker doing just that in a little while. – Steen Oct 26 '13 at 19:54
  • Good work. XML for Script sure isn't jQuery, but it's *something* :) -- Thanks for the follow up. – ChaseMoskal Oct 26 '13 at 23:48
  • I'm the owner of html5gamedev.de Thanks for your feedback. You're of course correct, it seems I somehow forgot adding the "correct" type to the script tag. I fixed the fiddle and this article. Of course the traditional way of setting up a web worker is using an external file, which I also mentioned at the beginning of this article. – Chris Oct 27 '13 at 17:03
0

Just to add a possible alternate, you may want to look at Hive, or specifically the subproject Pollen.js, which provides many of the capabilities of jQuery to workers (though obviously nothing that directly manipulates the DOM).

barhorn
  • 1