HTML and CSS Reference
In-Depth Information
Figure 10-1 shows only one worker thread, but you can spawn as many threads as you want.
Remember, though, that each additional thread has overhead and may eventually degrade application
performance. In many web applications, just one worker thread is sufficient for background processing
Types of Web Workers
HTML5 web workers come in two flavors: dedicated and shared. Dedicated web workers are attached to
the web page that creates them. They come into existence and die with the associated web page. Their
scope is the web page in which they're created. In other words, dedicated web workers can be used only by
a single web page. A dedicated web worker is represented by the Worker object.
Shared web workers are created by a web page, but once created they can be shared by multiple web
pages within the same web application (that is, having the same origin). Creating a web worker requires
resources. If you find yourself executing the same script in many pages of your web application, you may
want to use shared web workers instead of creating a new thread in every web page. However, compared to
dedicated web workers, they're more complex to code and are best used only in cases where you need to
share a thread across multiple application pages. A shared web worker is represented by the SharedWorker
What Web Workers Can Access and What They Can't
Although web workers solve the problem of a blocked UI by running JavaScript processing in a separate
thread, they also require careful design of the JavaScript code. As mentioned in the previous sections, web
workers are worker threads and can't have any UI-level access. That means you can't access any DOM
elements in the JavaScript code that you intend to run using web workers. This implies the following:
• Web workers can't access HTML elements from the web page.
• Web workers don't have access to global variables and JavaScript functions from the
web page.
• Web workers can't use functions such as alert() and confirm() that require user
• Objects such as window , document , and parent can't be accessed in the web-worker
• You can't use the jQuery library in web-worker code.
You may wonder why web workers can't access the HTML DOM. The main reason behind this
restriction is that it isn't thread-safe to do so. Suppose, for example, that two web workers are running in
the background. If both are allowed to access the HTML DOM, it's possible that one web worker may
accidently overwrite the changes made by the other web worker. In the absence of any synchronization
between multiple threads, such an execution is bound to produce unwanted results. That's why HTML5
web workers don't allow individual worker threads to access the DOM elements. When you pass data from
the web page to the web worker, a copy of the data is sent to the worker thread. Each worker thread
maintains its own data that is local to that worker thread.
A side effect of the “no DOM access” rule is that you can't use the jQuery library in web workers. The
jQuery library is tied to the HTML DOM, and allowing it would violate the previous rule. This can be a little
painful because even methods such as $.ajax() can't be used in web workers. Luckily, you can use the
XMLHttpRequest object to make Ajax requests.
Search WWH ::

Custom Search