Тёмный

JavaScript Web Workers Explained 

DevSage
Подписаться 19 тыс.
Просмотров 96 тыс.
50% 1

A Web Worker is a script that runs in a background threads, separate from the main thread. Web workers enable the browser to execute multiple threads of JavaScript in parallel with each other. The worker thread can perform tasks without interfering with the user interface. Once created, a worker can send messages to the JavaScript code that created it by posting messages to an event handler specified by that code (and vice versa).
📚Materials/References:
MDN Web Docs: developer.mozi...
🌎 Find Me Here:
Twitter: / realdevsage
Ebooks: payhip.com/dev...
Discord: / discord
Merch: cottonbureau.c...

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

 

27 сен 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 101   
@DevSage
@DevSage 2 года назад
💙 Twitter: twitter.com/realDevSage 📙 Ebooks: payhip.com/devsage 💥 Discord: discord.gg/BP8wPv6raA 👕 Merch: cottonbureau.com/people/devsage
@be2wa
@be2wa 2 года назад
Your way of explaining is probably the best I've seen on RU-vid. Your video on a certain concept pretty much leaves me with no questions to ask about it.
@DevSage
@DevSage 2 года назад
This comment made me smile. Yeah I try to set my videos apart by making them as simple as possible, ironically. Some other teachers I've seen on RU-vid are REALLY smart and knowledgeable about programming topics but are lousy communicators so the overall message gets lost and the tutorial becomes of little value.
@vijay_explorer
@vijay_explorer 2 года назад
I love your approach of explaining in a short consice and a simple manner. Thank you now I have an understanding of web workers. ❤️
@DevSage
@DevSage 2 года назад
You're very welcome!
@anouarnouri2111
@anouarnouri2111 2 года назад
I've never heard about web workers before, this is interesting, thank you so much.
@DevSage
@DevSage 2 года назад
You're welcome!
@MahmoudKhudairi
@MahmoudKhudairi 2 года назад
Thank you man, it was an intro of basics , but it was useful, it introduced me to the main concept of Web Worker API
@DevSage
@DevSage 2 года назад
No problem
@yinonelbaz5309
@yinonelbaz5309 2 года назад
Feels lucky I discovered your channel
@paulbocostudio
@paulbocostudio 2 года назад
Best explanation I've heard yet. I'm ready to code some workers now. 👍
@divijakatakam2803
@divijakatakam2803 2 года назад
this is so helpful especially for a beginner
@abhishekpratap05
@abhishekpratap05 2 года назад
What if you need web workers to do multiple tasks and in different js files, how will they distinguish between msgs they pass among themselves. Like there is no indication apart from where it's called an instance of worker can have different name, but inside worker.js file how will they distinguish between multiple functions (performing different tasks)
@Crevulus
@Crevulus 2 года назад
Great explainer video. Loved the way you demonstrated. For your next videos can I request some things I often confuse with "web workers"? Service workers Web sockets Web components
@harshgupta5799
@harshgupta5799 2 года назад
Nice example demo. Works perfectly.
@ashishagarwal3514
@ashishagarwal3514 2 года назад
Wow this is a great tutorial. I have seen like 20 videos of you in last 2-3 hours, your explanations are super easy to understand. Can you please also make a video on use cases distinguishing web worker vs service worker and web scokets? I am confused which one to be used for what type of use cases?
@phxm7853
@phxm7853 2 года назад
Simple, Short and Clean 👍👍👍
@DevSage
@DevSage 2 года назад
Thanks!
@H2daB
@H2daB 2 года назад
Thank you for explaining this. It was very helpful!
@DevSage
@DevSage 2 года назад
Glad it was helpful!
@saikarthik658
@saikarthik658 2 года назад
Very lucidly explained!! Thank you....
@DevSage
@DevSage 2 года назад
You're welcome!
@0xlkda
@0xlkda 2 года назад
great, I wonder if i can inject worker as code from server to hide my logic from public but still using client computation power
@pixelloopy
@pixelloopy 2 года назад
Brilliantly explained, thank you!
@DevSage
@DevSage 2 года назад
Glad it was helpful!
@itzazeez6662
@itzazeez6662 2 года назад
Short and to the point. Great explanation thanks man. new subscriber notification up.
@mohammadreza404
@mohammadreza404 2 года назад
That was sooooooooo clear and straight . Thank you very much
@DevSage
@DevSage 2 года назад
You're welcome!
@xmaxfuture
@xmaxfuture 2 года назад
you just earned yourself a subscriber. well done!
@ashimov1970
@ashimov1970 2 года назад
super awesome explanation, man 👍👏
@antonismavrakis5199
@antonismavrakis5199 2 года назад
Good work man, it really helped
@DevSage
@DevSage 2 года назад
Glad it helped
@王冠信-o1c
@王冠信-o1c 2 года назад
clear and informative with an example. Thank you so much.
@hanifkhan2821
@hanifkhan2821 2 года назад
Simple and Perfect Keep it up!!
@darz_k.
@darz_k. 2 года назад
Yep - great stuff - subscribed.
@martinemanuel8239
@martinemanuel8239 2 года назад
Amazing explanation man !!
@DevSage
@DevSage 2 года назад
Appreciate it!
@ignjat4123
@ignjat4123 2 года назад
Great video. Thanks a lot, man
@DevSage
@DevSage 2 года назад
You're welcome
@quangpham-qs5oo
@quangpham-qs5oo 2 года назад
thank you so much for your sharing.
@DevSage
@DevSage 2 года назад
You're welcome!
@abat_dauletbaev
@abat_dauletbaev 2 года назад
Great explanation!
@DevSage
@DevSage 2 года назад
Thanks!
@alexanderm6187
@alexanderm6187 2 года назад
What the perfect explanation! Thank you for that! :) So technically said workers are calculated on a "virtual" threads of JS-engine, not on real CPU threads/cores?
@DevSage
@DevSage 2 года назад
Glad it helped! According to the Mozilla docs, workers are spawned using "real OS-level threads" developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#about_thread_safety
@alexanderm6187
@alexanderm6187 2 года назад
@@DevSage that's nice to know it! Thank you for the reply :)
@СтаниславОкулов-о2ч
Thank you for your work!
@DevSage
@DevSage 2 года назад
My pleasure!
@jerecrack12gamer7
@jerecrack12gamer7 2 года назад
i couldnt finish reading it but the first 2 sentences were inspirin LMAO
@rajastylez
@rajastylez 2 года назад
Solid example
@vatsalyasinghi438
@vatsalyasinghi438 2 года назад
Is it possible to pass the function and the params to the worker file and return the result ? So it can be versatile..
@ashy3r
@ashy3r 2 года назад
great video thanks! :)
@33lightheart
@33lightheart 2 года назад
Great video thanks! that helped me to understand web workers for the first time. Could you please also make a video about promise, I still don't know if there is any background work going on with promises, or is await promise also being performed on the main thread, blocking it until the promise is finished?
@DevSage
@DevSage 2 года назад
I do have videos on Promises and also await/async. Yes when you await a Promise you're effectively blocking the main thread of execution until that promise resolves (or rejects)
@yadneshkhode3091
@yadneshkhode3091 2 года назад
Awesome man 👍
@DevSage
@DevSage 2 года назад
Thanks
@yurapekach7550
@yurapekach7550 2 года назад
Thank you)
@rajansidhu5912
@rajansidhu5912 2 года назад
Thank you :)
@CrazyCodingChannel
@CrazyCodingChannel 2 года назад
Very helpful, thnx
@DevSage
@DevSage 2 года назад
No problem!
@aaf2011
@aaf2011 2 года назад
Hi patrick, so web workers seems to be look like (async/await or promises) concept. eventually we defer specific task/s since it takes long time of response while in the same time we complete the other tasks so that we don't waste time in waiting. It is obvious that the main goal of these techniques is to control the outcome and performance of the application but I would like to see more details on the web workers and async/await concepts in real life example. Sync = Action A .. wait for the results of (A) Async = Action A .... wait for the results of (A) and keep doing other actions of (B), (C) and(D) This is how I understood Sync/Async/Web Workers .... Am I right ?
@DevSage
@DevSage 2 года назад
Yes, the underlying idea is all the same. Synchronous work is "blocking" while asynchronous work is "non-blocking"
@pmsoxllc9501
@pmsoxllc9501 2 года назад
Thanks!
@DevSage
@DevSage 2 года назад
I really appreciate that Omar!
@Calebwaldner
@Calebwaldner 2 года назад
Great video
@DevSage
@DevSage 2 года назад
Thanks Caleb
@pupfriend
@pupfriend 2 года назад
Awesome!!
@DevSage
@DevSage 2 года назад
Thanks!
@easonhuang4031
@easonhuang4031 2 года назад
how to use it in ReactJS project?
@furkannarin2844
@furkannarin2844 2 года назад
Hey man thanks for the tutorial. I am getting an error for Worker constructor when I use it like this. It is not defined for me. Also, if I use the new syntax where you put in url in the constructor like this: ``` new Worker(new URL('path'), import.meta.url) ``` I dont get any errors like this but in this case, when I specify the onmessage function in the worker script, self and onmessage are both undefined again. Any ideas?
@DevSage
@DevSage 2 года назад
The first parameter of the Worker constructor should be a string
@furkannarin2844
@furkannarin2844 2 года назад
@@DevSage it is a string :/
@rxdrik1ng966
@rxdrik1ng966 2 года назад
Nice
@stoncjoesperanto8632
@stoncjoesperanto8632 2 года назад
Not readable on smartphones :'-(
@tharidhuheshan
@tharidhuheshan 2 года назад
Classic
@dealerkiller1
@dealerkiller1 2 года назад
Great video! I would like to know why don’t you save the worker listener inside the onClick function
@DevSage
@DevSage 2 года назад
Because I didn't find it necessary
@VuNguyen-ni4ex
@VuNguyen-ni4ex 2 года назад
Please do a video explain about service worker :) Great video by the way
@DevSage
@DevSage 2 года назад
I will put it on my radar
@gradientMesh
@gradientMesh 2 года назад
Yes, please!
@ny9113
@ny9113 2 года назад
Great explanation !
@DevSage
@DevSage 2 года назад
Thank you!
@capnmorgs6195
@capnmorgs6195 2 года назад
A lot of these videos have been super helpful! Good length, good explanations. Thanks dude! Keep it up!
@DevSage
@DevSage 2 года назад
Glad you like them!
@depralexcrimson
@depralexcrimson 2 года назад
So very well explained, thanks.
@DevSage
@DevSage 2 года назад
No problem
@mirceahanghiuc4447
@mirceahanghiuc4447 2 года назад
Super cool
@DevSage
@DevSage 2 года назад
Thanks Mircea!
@gradientMesh
@gradientMesh 2 года назад
Very clearly explained! Thank you for sharing.
@DevSage
@DevSage 2 года назад
You're welcome!
@sadeqmousawi140
@sadeqmousawi140 2 года назад
Nice job boy , Thank you so much 🌹
@divijakatakam2803
@divijakatakam2803 2 года назад
this is so helpful especially for a beginner
@toanho7462
@toanho7462 2 года назад
nice explain
@gameplayerita5694
@gameplayerita5694 2 года назад
but what happen if I tell the worker to do some heavy stuff before it has finished previous heavy stuff?
@osvaldocarrillo1361
@osvaldocarrillo1361 2 года назад
Thank you. Very well explained 👍
@oz4549
@oz4549 2 года назад
You Sir are a true hero. Thanks for this!
@ChickenMaster7
@ChickenMaster7 2 года назад
can I use it in react?
@forzahorizon8560
@forzahorizon8560 2 года назад
Thank you!
@fripickbot4043
@fripickbot4043 2 года назад
Great. And please stop repeating that javaScript is "single threaded" JavaScript is not single threaded. This is only confusing new comers.
@DevSage
@DevSage 2 года назад
So are you saying that the developers at Mozilla are incorrect? developer.mozilla.org/en-US/docs/Web/JavaScript
Далее
Javascript Let & Const Explained Simply
10:42
Просмотров 4,4 тыс.
JavaScript this Keyword Explained Simply
11:42
Просмотров 14 тыс.
PROOF JavaScript is a Multi-Threaded language
8:21
Просмотров 280 тыс.
Intro To Service Workers & Caching
35:26
Просмотров 235 тыс.
JavaScript Cookies vs Local Storage vs Session Storage
14:28
Introduction to Service Workers
12:54
Просмотров 134 тыс.