Intro to Web Workers

Подписаться 102 тыс.

Просмотров 27 тыс.

50% 1

Web Workers are a way that JavaScript has to start running tasks on a new thread. This helps to offload some heavy processing for your web pages.
There are really only two things you need for web workers.
1. worker.postMessage( data )
2. worker.addEventListener('message', func)
If you need to shut down a worker you can call the self.close( ) method from within the worker or the worker.terminate( ) method from the initiating script.
HTML Code GIST: gist.github.co...
Worker script Code GIST: gist.github.co...
AJAX Playlist: • What is AJAX and Why S...
Promises Playlist: • JavaScript ES6 Promise...

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 37

@mustaphabello4167 3 года назад

Kudos Steve, you really have explained it in a much simpler way that most text books didn’t.

@sanjitselvan5348 Год назад

I have found some of the simplest explanations to complex topics on your channel. Thank you!

@rizud5122 4 года назад

Amazing way to explain things in such a simple manner so that you not only understand the concept, but the concept actually sticks. I was making my notes doing the recall method and I could literally hear you in my head while making notes. Great video. Thanks so much. God Bless!!

@Mr1Horhe 4 года назад

You know it`s about to be a great intro when there is thunderstorm on the background

@annayoon8770 Год назад

Really appreciate this video!

@lorandhorvath4466 2 года назад

Just found your channel, amazing stuff you have here! Thank you!!! 😊

@love4photos 3 года назад

Thank yooou! Very well explained at a nice pace and your voice is so relaxing!

@shashanktrivedi6656 3 года назад

it is super awesome , you clarified really well just ads are weird ,breaking the momentum. Thanks Steve.

@SteveGriffith-Prof3ssorSt3v3 3 года назад

Adds are how I get paid for the hundreds of tutorials I make. I leave it to RU-vid to choose and insert them.

@RameenFallschirmjager 3 года назад

Very concise and right to the point.

@darwinmanalo5436 6 лет назад

Awesome!!! Service workers pls. thanks

@FordExplorer-rm6ew 4 года назад

Thunder and rain is a good thing

@Colstonewall 6 лет назад

Awesome Steve! Can I make a simple request? Possibly a video or two on Scope, and Closures, Context, etc? Such as how context or scope behave inside for loops. And maybe even pass by value, pass by reference in JS?

@SteveGriffith-Prof3ssorSt3v3 6 лет назад

I actually already have videos on all those topics. There is a video on scope plus one on let, const, and var - which determines how the scope is set. There are a couple videos on closures. The scope ones explain how variables would work inside if statements, functions, or loops. And there is a pass by reference video too. Just search by keyword on the channel home page. :)

@jambexuk 4 года назад

Great explanation. Thanks!

@mussacharles7629 4 года назад

Direct to the point, Thanks :)

@NikoRiveiro 4 года назад

Niice!! thanks!

@jacktiebie3859 2 года назад

Hey, I saw this question online. Web Workers define an API for: A Publishing frequently updated works for syndication. B Running scripts in the background, C Bi-directional, full-duplex communications over a single TCP socket. D Distributing load across multiple web servers. They said the answer was A why is that? I thought the answer was B.

@SteveGriffith-Prof3ssorSt3v3 2 года назад

I would say B too

@alexvass 2 года назад

Does the logic for the web worker need to reside in a separate js file? If a really long task is delegated to the web worker, and you want a different task from the same webworker do you just call it again or call another file?

@SteveGriffith-Prof3ssorSt3v3 2 года назад

web workers are separate JS files that you load. The code for them resides in the other file. They have their own thread, execution context and event loop. If they need to run multiple functions then all those functions will get added to the stack in the other execution context.

@alexvass 2 года назад

@@SteveGriffith-Prof3ssorSt3v3 If I call a web worker, it starts off in a new thread, and then call a second one (same file) before the first finished, is that ok? so having 2 parallel webworkers from the same js file doing different tasks?

@SteveGriffith-Prof3ssorSt3v3 2 года назад

@@alexvass they are really both that common. There are not a lot of things that you would use them for. I'm fairly certain that all the workers from the same origin will be sharing a single thread though

@alexvass 2 года назад

@@SteveGriffith-Prof3ssorSt3v3 in my case, I have a set of videos, that I need to process and each one can take a few minutes and the user can select many at a time. So all the webworkers created to process a video will be on a separate thread but sharing that same thread?..

@SteveGriffith-Prof3ssorSt3v3 2 года назад

@@alexvass yes. So still processing the videos one at a time.

@saurabha.srivastava794 4 года назад

see the ratio of like to dislike : Legendry (100:1) :)

@oiver55 3 года назад

Great tutorial. But how can I return an object from the web-worker? I am using Lunr.js(search function library) to generate an index of words from my indexedDB in the webworker. Everything works just fine but when it comes to postMessaging the index which is an "object" I get an error. Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': function (token) { return token.update(porterStemmer); } could not be cloned. When I Json.stringify my index and then parse it, postMessage works, but the output of the parse is not the exact same as the index object and thus causes problems in my project. Is parsing the only way to postMessage objects?

@SteveGriffith-Prof3ssorSt3v3 3 года назад

The messages that get sent between Workers have to be something that can be represented as JSON. They can't be more complex things like an HTML Element, a function, etc

@oiver55 3 года назад

@@SteveGriffith-Prof3ssorSt3v3 Hmm okay, I understand. Thanks!

@SteveGriffith-Prof3ssorSt3v3 3 года назад

developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm - what can be passed is structured cloneable.

@raj080288 4 года назад

so if i wanted to get a numeric user input value, can i get this using the web worker?

@SteveGriffith-Prof3ssorSt3v3 4 года назад

Workers do not have access to the DOM. They run on their own thread. The script attached to the page will have to use postMessage( ) to pass the value to the worker.

@raj080288 4 года назад

@@SteveGriffith-Prof3ssorSt3v3 okay so If I collect and store the input value from the DOM in a variable and then pass that value through the postMessage() that would work? Great tutorial by the way 👍🏼

@SteveGriffith-Prof3ssorSt3v3 4 года назад

@@raj080288 yes