 All right, so I'm gonna talk about web workers or just workers as they're called now and These little guys live in your browser and they want to come out and help you Don't make them just stand around They are essentially just a background process. They get a spun up onto a separate thread and They can Perform calculations and that kind of stuff in the browser. They have no access to the real Dom but they do have access to a lot of other parts of JavaScript like But strongly typed arrays and the blob URLs and All the and X HR and all that kind of stuff Index DB If your browser that's it local storage that kind of stuff They have a really simple API Basically you can do it up with a URL to a worker script And basically that's any JavaScript. It doesn't really matter It doesn't actually have to do anything to be a valid worker. It just can't Try and do stuff to a DOM element And that's the valid URL and it has to follow the same origin policy, which is irrespective of if that Where that script is being hosted Inlets cores are not because When you knew it it doesn't care about cores when you import scripts into a worker It cares about cores and so that was something interesting I found out Even if your browsers are studying your servers responding with cores headers and your request and stuff like that the browser Doesn't it doesn't care And then it's got a simple you just post message most of the message can be pretty much anything except for it's not like not native DOM elements or things like canvas and then Most browsers you can do transfers and those can be Blobs or strongly typed arrays Those are the only things they'll transfer over and then you can Close the worker by terminating it you can listen for the message and listen for air and that's pretty much it But it's not quite so easy. There are Welcome to Back in the battle days of browser wars and stuff like that if you liked that incompatibility and always having to wonder as if and provide all kinds of checks for degrading gracefully and stuff like that do stuff with Workers and some of the other HTML 5 API's and A lot of this stuff is not all that well documented like you can find kind of this compatibility table, but You know think about that it has to be on the real same origin and some of the stuff that I found is not really well documented And you can see as you expect kind of Internet Explorer. It's got a lot of nodes there I don't have it on here, but Android Like the native Android browser not Android Chrome Which can be different depending on what kind of phone manufacturers you've got That would all be knows on that So before like Android 4.0 Or not using the not using Chrome on Android you didn't have any workers for either And then we've got good old IE here Okay, so a really cool way to just dynamically create workers from Stuff is to use the blob your eye so you Have some kind of some string of code You load it into a blob and then get the URL for that blog and then you Create your worker with that So it's something you just currently created dynamically or you load it from a different source Somewhere that's outside of the same origin policy, but then we're able to get that text and then put it in there So that's a great wonderful to use. It's so awesome Not happening on IE transferable objects So I saw that was up the optional argument from the post message You should be able to put in blobs or type to raise and have them work IE 10 and 11 claim that they have the second argument But that second argument is not actually transferable objects, but message ports and So And what's really interesting is that so there's an open issue on this and IA's response was basically We can reduce it reproduce the issue issue and find it interesting But we were unable to fix it in IE 11 because it doesn't have a high impact on live production websites Anyway, we're already talking about something. It's kind of not exactly bleeding edge not quite like WebGL or something like that but it's at least kind of on the edge and then No one's using it. It doesn't have an impact on IE because or on websites because people can't use it And I is like well because people aren't using it. We don't care so their response to the W3C Commit subcommittee people that they had submitted test to was we find it interesting that you claim our test fail IE 12 could it be better it actually it does do all those things that We'll use blob your eyes and transferables and it's got about a 33% better Rate on transferring objects back and forth and stuff but if you're forced to use IE you're probably not going to even be as high as IE 10 and So it could be years before those people that are forced to use IE are up to IE 12 All right, so I did test on passing message data back and forth And looking at how efficient it was the different data types and So basically like your primitives like your floats and your strings and your rays Those transfer pretty quickly. This is a little set cutoff, but This is 50 milliseconds to transfer to do a round trip transfer a thousand times all the way up to I believe that's 400 up there at the top and I Don't have IE 10 in here because its numbers were so huge like it just everything was like Above 500. It was ridiculous and it made the graph essentially unused unreadable Anyway, would you get a nested object? So that's gonna be really slow depending on what all you have in there Especially if they're heavily nested and have other big objects in them and stuff like that and then an array buffer and that and eight array are pretty similar, but then when you get into The n32 and the 64 float and stuff like that. Those can be actually be really slow compared to the other stuff And then there at the average Those last year at the average for all the data types for the different browsers and then the large data types so like a Your array buffer your blob and stuff like that and then that the primitives what was really interesting to see hello the blob is now you have to You can transfer blobs past blobs back and forth in IE and the other browsers that problem You can't read directly from a blob like you can't just like Once it's a blob then it's a blob and you have to use a file reader to read from it so There's got some cost there on the worker side to read this stuff But it could be a really efficient way because this blog here that I was transferring was actually a big float 64 ray that Was even slower than the n32 array And it was transferring very very quickly And the reason for that is pretty much it's essentially already a pointer to memory So it's just passing a pointer back and forth Let's see And then if you want to look at kind of overall efficiency of the different browsers Chrome and Safari on my map Were a really good Firefox has a weird thing with array buffer it like It was slow even when using transferable objects it barely made a difference there So I was surprised about that Okay, and then That took and looked at the different browsers and So float was always one But anyway, this this first part of them is is how It was the time it took or how many operations per second you could do for with passing floats And then you can see the ratio of other things. So like I said on firefox There were a buffer is like 12 times Less efficient than some of your primitives or a block Or like twice the three times less efficient than passing a blog And you see that same kind of pattern on Internet Explorer as well So over these, you know Like Safari looks like it takes a big difference, but it's just because it's a If you if we go back to here you see that it's pretty fast Those are just a large difference in between a float and such that they pass floats extremely fast It took like 20 milliseconds to do a thousand operations, right? And so that I also looked at the memory use and So Internet Explorer and Firefox you can essentially you can new up a thousand five thousand Workers it won't crash the browser, but you'll you'll see the memory used for that browser go way up your family pick on all kinds of stuff And it takes about an extra thousand K or 250 K per worker for those browsers Look at chrome and safari they actually They are using this already pre allocated heat memory space which the browser can when it needs to Ask for an allocate some more, but if you're You can easily outrun that memory and then the browser will crash But at the same time Probably don't need to be newing up a thousand Workers or something that I think So I don't have it in there, but the limit I came to on a chrome and safari using Just relatively simple stuff was About 500 to 250 workers, but Again, you don't really need that because your maximum performance when the number of workers equals the number of processing cores you can Do different tests and you see that once you get above the number of cores you have on your machine or your phone or whatever Each new worker you do actually makes things around longer. So you don't you don't need to do you know a hundred 2000 workers, that's just not useful Okay, so they're great when you've got parallel I test a task And you can split them up between the workers Especially if they're computational intensive They're great for reading and writing binary data. There's a lot of good things to use workers for Now One thing I found that I Saw a lot of different examples and library thing was that they would Send the worker something to do and then Terminate it and they create a new worker send it one task terminated kind of thing and I Had a really really hard time actually Measuring the exact getting like a good instrumentation on this Because every time I would open up developer tools and try and run these different tests to see just what exactly the difference was between reusing the worker and destroying and creating new ones it just Observing it made the measurements go completely haywire and frequently ended up and crashing my browser. So I Don't have a good hard data on that but just from any total stuff that I've seen I think it's more efficient to reuse the workers if you can So What are they not so good at? One thing that I tried to do earlier Was to use them kind of as a XHR proxy. So I would like Send it a bunch of URLs that I wanted to get data from and Then it goes and gets the data and then sends it back to the main thread when it's collected all the data we need And you could have this you know prefetching tiles or vector sets or something like that There's some use for that. It turns out that when you send a URL and then ask the worker to get the resource It doesn't get to use the same browser cache and doesn't get to participate in that the same way that when you request on the main thread so and Even if it does you're still Rather than using the cache data in the memory using the cache data in memory over on the worker and then still having to Post that message back to the main thread. So it's not as efficient of a process as you would think it might be And XHR is already asynchronous. So if you're able to do it do XHR just doing the main thread Unless you have a really good reason to not do it that way Saw some different examples of people trying to like recreate the DOM Because you don't have the DOM over in the browser over in the worker and It just it's a whole lot of work for something that doesn't make a lot of sense to me If you really need to do that, maybe you should try to do some cross document messaging Have a hidden window Where you build up a DOM and then send a DOM element structure and then send it back the main element in the main window or something like that so and then the main thing that People have been working on solving or that there's libraries to solve for you and is this message ordering and queuing so You send the worker a message if it's something like a Calculating a Fubonacci sequence or something which is a really really frequent example. You see well No big deal because that's just gonna run and then when it finishes it's gonna send you the message back So you've got a serial thing. It's synchronous Even though your message is you're passing and getting back or asynchronous, you know that the stuff you get isn't going to be an order However, if you do anything that's asynchronous and you don't know exactly what order it is You can ask the worker to calculate something and get back You know one thing immediately and another thing takes you a while And you don't know what those messages are unless you follow some kind of convention So there's some stuff that's helping that And I've listed them here, okay, so there's Worker.js, which just basically adds a Callback thing and you need to pass it you pass every message an ID and the An idea of every message and the worker needs to respond with that same ID And I implemented a similar system and the worker support that we have in the artJS job script library And Calvin Metcalf did a Cataline which was called Communist and That's that's a cool stuff and then this other thing And then they're again Cataline operative and parallel they can help you kind of marshal up the workers and manage them And then if you want to have a like browser file or require JS. There's some things to that If you want to see it, I've got some examples from Calvin and Someone made a password cracker, which is that was kind of cool Not about to jail JS is using workers and different stuff and people have made things we can make animated gifts by But it pastes all the other What do you guys So we've got we're using it Kind of directly like built into the platform is some spatial indexing Which we're replacing our tree with our bush Because we liked it so much better and that's also what they're using in a as a leaflet and Then also just providing a framework for people to do Worker tasks and stuff. So it's a good a way to using kind of AMD style stuff already using the required. Yes, that that as the Ezra jokes with API libraries are using to be able to Require stuff in for a worker and have it be created from that and then I have it import scripts and Set up Call by processing callbacks and stuff like that, which is I mean it's really similar ideas to the stuff that They're doing some of these libraries Just a little bit different approach, but similar idea That's it for me You Right I saw I saw your example of that as well Like Right no, I I agree with that and What I was saying is that just if if all you're doing is having your worker request data Then pass it back, you know without doing additional work on it and other things like that. It's not very efficient. It actually I Didn't test and it was like And fire faucet, especially it was like an order of magnitude slower And I was doing like the large Jason feature Geo Jason feature datasets were had 50 to 100,000 points And like for firefox and Safari specifically it was Orders of attitudes lower to be doing that and the worker than the main thread if all you're doing was getting the data Doing essentially the browser is doing Jason Paras on it But yeah, if you're doing additional work, you're right that makes a lot of sense and that's something that I built into the man Which I didn't talk about here because it's not really that's that open source, but Question Great