HTML and CSS Reference
In-Depth Information
checking the
webworkers
property of the Modernizr object. If the browser doesn't support web workers, an
error message is displayed to the user.
The button's
click
event handler first displays an alert box to indicate the start of processing. The
do
-
while
condition is written in such a way that it simply loops for 10 seconds. The looping is achieved by
calculating the difference between the current date-time and the date-time when the looping operation
begins. The
do
-
while
loop is intended to mimic lengthy processing. In a real-world application, you have
actual business processing instead of the loop. Once the loop is exited, another alert box flags the end of
processing.
If you run this web page in the browser and click the button, you obviously get to see the start and end
alert boxes; but more important, you observe that while the loop is running, the web page's UI becomes
nonresponsive. During this time, your browser stops responding to keyboard inputs and mouse operations
such as clicking and scrolling. These operations may be queued and played when the
do
-
while
loop is
finished, but as long as the loop is running, the UI doesn't respond. The reason for this bottleneck is that
the UI and the JavaScript are running on the same thread. So, at any given time, either the script can run or
the UI can function.
The UI bottleneck can be avoided if you run the JavaScript code in a thread of its own. Consider Figure
10-1.
Figure 10-1.
Single-threaded and multithreaded execution in web pages
Look at the single-threaded execution model shown in the figure. In this case, the same thread runs
the JavaScript code and also handles user interactions. Now look at the multithreaded execution model.
Here the UI is handled by a dedicated thread (UI thread), and the JavaScript is executed in a thread of its
own. The thread running the JavaScript is often called a
worker thread
because its primary job is
processing. Typically, a worker thread doesn't have access to the UI-level elements. It can, however, receive
input from the UI thread and may return the result of the processing back to the UI thread. In the
multithreaded model, the UI thread is also referred as a
foreground thread
and the worker thread as a
background thread
. In HTML5 terms, a worker thread is called a
web worker
and is represented by the
Worker
object.
