Web Workers in Action - Performance Boost for Web Applications (2023)

Level up your Angular skills with my advanced 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:

💡 Short Frontend Snacks (Tips) every week here:

🕒 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

[DecodedFrontend]

Level up your Angular skills with my advanced courses 🚀

[mylifefeabric]

Thanks for sharing :) Small point - It would be useful to emphasize that the Webworker runs outside of the angular context, so there's no access to your angular context, apart from passing things through as parameters.

[gilmoretj]

Hi Dmytro, Excellent introductory video on the topic of Web Workers. I think it would have been worth stressing they are not a feature of Angular but a Web API (maybe show the MDN page).
To complete the discussion it would also be worth showing how you might write a unit test/exercise a web worker.
Thanks.

[msxujzd]

Thank you, very comprehensible especially for use, fro pros and corns of using

[bancamilleri]

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.

[tolgask]

thats a rare case but very useful when you need it.

[eyswwxe]

Looks like spawned worker doesn't have that "x6 slow" limitation, main thread has.

[gonzalocorchon]

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!

[repenning]

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.

[SrinivasRaoGunja]

Thank you so much for this incredible explanation of web workers! 🌟 Your clear and straightforward approach made a complex topic so much easier to grasp. I really appreciate the effort you put into making it accessible and engaging. Keep up the fantastic work!

[MehediHKakon]

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?

[alekseymikosha]

Thanks for good explanation, now it’s clear

[sefatanam]

your free contents literally better than paid courses 🎉

[gapa]

Комментарий для продвижения канала, спасибо за то, что делаете. Отличный контент!!

[nandolambrusco]

Thank you, absolutly fantastic video🙏

[gdbrroo]

Decoced Frontend, you are bang-on as always. Can we expect a tutorial on Service Worker as well?

[EterTebe]

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

[amdbest]

this video was super useful, thanks buddy

[denisgithinji]

Where is the super like button. Great in-depth content as always

[codearabawy]

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?