Web Workers in Action - Performance Boost for Web Applications (2023)
HTML-код
- Опубликовано: 11 июл 2024
- Level up your Angular skills with my advanced courses 🚀
bit.ly/advanced-angular-courses
Performance is a crucial metric in every web application. In this video, you will learn how to improve that by using Web Workers and simply offloading the expensive calculations out of the main JS thread and make your application more responsive and faster.
I hope you will like the video and if so, please share it with your friends and colleagues. Enjoy!
Source code for this tutorial:
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
🕒 Time Codes:
00:00:00 - Intro;
00:00:52 - Mental Model of WebWorkers;
00:05:20 - Demo App Overview;
00:07:52 - WebWorkers in Action;
00:18:31 - Transfering Large Objects in WebWorkers;
00:20:57 - WebWorker limitations;
00:22:05 - Outro;
#angular #webdevelopment 
Наука
Level up your Angular skills with my advanced courses 🚀
bit.ly/advanced-angular-courses
thats a rare case but very useful when you need it.
Great to see new content from you :)
Дякуемо, Дмитро!
Thanks a lot, as usual everything arranged and explained
thank you! as always - rally good quality👍
Excellent, love the way you explane the concept
Thanks for the new content!
Thank you, absolutly fantastic video🙏
Thank you for the great video!
Amazing content as always! Thank you so much, this was super helpful for me 😄
Great as always
Дякую за контент
Awesome video on web workers. I used to be so confused about them and it was hard to find well explained resources along side practical examples.
Il will definitively recommand this video to my team.
дякую за контент!!!!
Thanks for good explanation, now it’s clear
Дякую за контент, це золото
Дякую пане Буданов 😄🙌🏻
Thanks for another useful video, Dmytro) Very interesting and informative as usual
Brilliant as usual. I'm not sure if I will have to leverage all of its potential in the near future but for sure this video is a masterpiece showing content that is not widely available in any other place. Thank you!
very well explained as always. peace!
thanks it was very informative.
this video was super useful, thanks buddy
Спасибо!
Where is the super like button. Great in-depth content as always
Комментарий для продвижения канала, спасибо за то, что делаете. Отличный контент!!
Useful video, and a gorgeous cat 🐈
your free contents literally better than paid courses 🎉
Looks like spawned worker doesn't have that "x6 slow" limitation, main thread has.
Greate video, thanks
Nice video!
Another masterpiece. Thank you for sharing. Could you please share some advice on how to learn things under the hood like you do, what kind of thought process should I have when I'm learning?
I'm a total noob with web workers but it was very clear, thanks man
Decoced Frontend, you are bang-on as always. Can we expect a tutorial on Service Worker as well?
Nice video. I think the image processing was so much quicker when using the worker is because Chrome's CPU throttling wasn't being applied to the worker.
Maybe yes or maybe because it is the real OS thread and can invoke more resources… Here I might be wrong because that is not the area where I am so confident :) What I wanted to say in the video is that while worker performed their work the main thread wasn't blocked and users could still interact with the application without glitches :)
Thank you for this amazing content you create
You are welcome 😊glad you like it
Incredible useful! This all is based on strategy pattern, I am a Java programmer an this is very alike annotations made by Martin Odersky in Java 7
the 192ms in the Webworker version was just for setup. The filter took ~500ms which is the 3110ms / 6(CPU throttling) In other words, CPU throttling did not apply to the Webworker and in the end the whole thing even took a little longer because of the message passing. In the end there was no speed up but still unloading the main thread which is still a good thing. To actually get speed up you could have segmented the image into patches and fed each one to its own Webworker. This would have actually reduced total processing time if you have a multi core CPU which you most certainly do.
Hello there, i have learned a lot woth your videos and Thanks a lot for that
I was hoping that you could make some videos on nx workspaces it would be a great series
Thanks
I really like how you explain it. So in Angular, let's say you're using mat-table from angular material. I know a lot of people had some performance issue with it. Is it a good idea to use web-worker for a long running API requests? If yes, would web-worker solves the perfomance issue with loading thousands of rows into that mat-table component?
Thanks for the amazing video, just need to ask that this webworker can be used for saving the object position on the canvas like on moving event scaling event like saving there x and y cordinatiiones while performing canvas event?
Thanks! Learnt something new today :)
Would it be possible to efficiently wrap a large JSON array into an ArrayBuffer to avoid data duplication?
For SSR provide a fallback mechanism to perform the computations that the worker would Perform.
Really great video! I want to ask question since we moved out the implementation to the worker, how does this same method work fast in webWorker? but not in the angular context? I understand the concept of using webWorker to take care of heavy-lifting and not blocking of main-thread and that's what it is doing but how it is increasing performance.
Thank you for great tutorial ....I just wonder if it is possible to chain the workers to apply multi tasks in a queue and once done pass refreshing main thread? How does the communication between main and several workers works?
I would love to see and example of this, maybe build into a service, where the usage of it just being subscribing to the service that handles webworker task including listening for messages. Also to help with some stricter typing. The times i have used webworkers, its just been with basic javascript. I would like to use interfaces to make it more type "safe".
Thanks for the knowledge but do you recommend executing expensive Http services from the worker
Ty 4 video. Hower, i have one question left. How does webworker performs it's calculation? Is it something similar to Web API or does it take a separate computer thread in that case and if so, is there a way of using webworker on single thread cpu?
How to use interfaces or any common types between component and webworker?
So in a shorthand analogy JS is a Boss that does not delegate tasks to staff as long as you employ some workers and start delegating :)
Thank you,
Now we have how to switch context from main thread to worker and back.
Can you please look into issue of browser being non-responsive when large data is loaded on the screen without using AJAX calls to get chunk of data? How do we optimize such scenario? For example, a select drop down having large options.
Thanks for your question. I think the Virtual Scrolling from Angular CDK will help you.
0:57 is that was blink like "naaa, I'm kidding"? :D
I have a stupid question not specifically related to this topic. What is the advantage of providing types to the property with this operator (!:) like in the video I saw all the properties declared like private worker !: Worker. We could have provided type by worker : Worker also. So what's the reason here?
Дякую за відео! Мав досвід генерування великих пдф файлів з допомою веб воркерів. Чудово вирішували таку проблему.
Памʼятаю що стикався з фактом що файл воркеру скачувався багато разів (як розумію на кожен інстанс воркера, проте не впевнений). Звідси 2 питання (не обовязково до автора, може хтось стикався):
1. Чи є ліміт на кількість воркерів для 1єї таби?
2. Якщо n інстансів воркера створюються з 1го файлу, чи дійсно це призводить до того що той самий файл фетчиться n раз? Чи можна цьому якось запобігти?
SSR has its own workers
A CAT on the couch!!!!!!!!!!!
спасибо за контент, было интересно
вопрос: есть ли на канале может видео про то какие полезные плагины для Ангуляра ты используешь в своей ide-шке?
Maybe try to speak a different language, at least while the war is not over.
@@eoz maybe u should delete video about Saint Petersburg from yr channel first, hypocrite)
I was thinking about sharing this video with teammates, but it so OP that I've decided to be first it team, who will use the worker 😈
Please make video on indexdb that is available on chrome or Firefox browser