![]() Web Workers are an attempt to bring multi-threaded behavior to JavaScript. With a program like Java, traffic could continue on other lanes. If any of the drivers ahead of you happen to stop moving for any reason, then, you have a traffic jam. In some extreme cases, the tab will freeze altogether. On the browser, this manifests as a frozen, unresponsive page. If some piece of code takes too long to finish our program would appear to have stopped working. It is therefore desirable that every piece of code finish as quickly as possible. ![]() Thus, every line of code “blocks” the execution of everything else that comes after it. This behavior implies that once some piece of code starts running, every code that comes after must wait for that code to finish execution. In technical terms, we say that JavaScript is single-threaded. Once a piece of code ends, then the next one in line starts running, and so on. During runtime, JavaScript code is executed sequentially and in a turn-by-turn manner. To understand Web Workers and the problem they’re meant to solve, it is necessary to get a grasp of how JavaScript code is executed at runtime. If you need more insights into this topic, I’ve included a number of links in the “ Further Resources” section to help you get up to speed.įirst, let’s get started with Web Workers. You should also have a working knowledge of React so that you can successfully start a new React project using Create React App.To be able to follow along, you should have at least some familiarity with JavaScript and the document API.In writing this article, I made the following assumptions: But in this article, we’ll learn how we can leverage the Web Worker API to deliver a better experience. Sometimes that can be hard to achieve given the single-threaded nature of JavaScript. Whether it’s only displaying a person’s name or crunching numbers, web app users demand that your app responds to their command every single time. Users demand instantaneous responses, no matter what your app may be doing. Response time is a big deal when it comes to web applications. Finally, we’ll end the article by transferring everything to a React application. In this tutorial, we’re going to learn how to use the Web Worker API to manage time-consuming and UI-blocking tasks in a JavaScript app by building a sample web app that leverages Web Workers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |