7 Things to Know About Web Workers-HTML Tutorial-php.cn

introduce

Web Workers allow you to run JavaScript code in the background without blocking the web user interface. Web Workers can improve the overall performance of web pages and also enhance user experience. Web Workers come in two flavors - dedicated Web Workers and shared Web Workers. This article discusses seven key aspects of web workers that you need to know to help you decide to use them in your application.

1.Web Workers allow you to run JavaScript code in the background

Typically, the JavaScript code you write in a web page executes on the same thread as the user interface. That's why the web page's user interface freezes when you click a button that triggers a lengthy process. You can't work on the user interface until the processing is complete. Web workers allow you to execute JavaScript in the background so that the user interface remains responsive even if some scripts are executing at the same time. The background thread that executes the script is often called a worker thread or worker. You can spawn as many workers as you want. You can also pass data to a script that is executing in a worker thread and return the value to the main thread when completed. However, Web Workers have some limitations as follows:

Web Workers cannot access DOM elements from web pages.
Web Workers cannot access global variables and JavaScript functions from the web page.
Web Workers cannot call the alert() or confirm() functions.
Objects such as window, document and parent cannot be accessed in Web Workers.

However, you can use functions such as setTimeout() and setInterval(). You can also use the XMLHttpRequest object to make Ajax requests to the server.

2. There are two types of Web Workers

There are two types of Web Workers: dedicated Web Workers and shared Web Workers. Dedicated Web Workers live and die along with the web pages that create them. This means that dedicated Web Workers created within a web page cannot be accessed across multiple web pages. Shared Web Workers, on the other hand, are shared across multiple web pages. The Worker class represents dedicated Web Workers, while the SharedWorker class represents shared Web Workers.

In many cases, dedicated Web Workers will meet your needs. This is because typically you need to execute specific scripts for a web page in a worker thread. However, sometimes, you need to execute a script in a worker thread that is common to multiple web pages. In this case, instead of creating many dedicated Web Workers, one for each page, you might as well use shared Web Workers. A shared web worker created by one web page can still be used by other web pages. It can only be destroyed if all connections to it are closed. Shared Web Workers are a bit more complicated than dedicated Web Workers.

3.Worker object represents dedicated Web Worker

Now that you understand the basics of Web Workers, let’s see how to use dedicated Web Workers. The examples discussed below assume that you have created a web application using your favorite development tools and also added the jQuery and Modernizr libraries in its Script folder. Add the HTML page to the web application and type the following code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="scripts/modernizr.js"></script>
    <script src="scripts/jquery-2.0.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.webworkers)
            {
                alert("This browser doesn&#39;t support Web Workers!");
                return;
            }
            $("#btnStart").click(function () {
                var worker = new Worker("scripts/lengthytask.js");
                worker.addEventListener("message", function (evt) {
                    alert(evt.data);
                },false);
                worker.postMessage(10000);
            });
        });

    </script>
</head>
<body>
    <form>
        <input type="button" id="btnStart" value="Start Processing" />
    </form>
</body>
</html>

Copy after login

The HTML page above contains a button (btnStart) that triggers some JavaScript processing. Please note that this page references the Modernizr and jQuery libraries. The