HTML and CSS Reference
In-Depth Information
encapsulate them. A
single-threaded application
runs all the code (including user interface and business
processing) in a single thread. A
multithreaded application
runs application code in multiple threads.
A multithreaded application offers the following benefits:
• It can signiicantly improve the application's user responsiveness. This beneit is
useful when you're developing web applications. Rather than your JavaScript code
blocking user interactions, by using multithreading you can keep the user interface
responsive as the script runs in the background.
• It can improve the overall performance of your application. However, this beneit
depends on several other factors such as number of CPUs and whether the code is
running locally or remotely. Although a detailed discussion of how multithreading
affects application performance is beyond the scope of this topic, sufice to say that
multithreading can improve the performance of an application that runs on a
machine with multiple processors rather than a single processor. This is so because
a multiprocessor machine can run different threads on different processors
simultaneously, resulting in improved performance.
Now that you have a basic idea of single-threaded and multithreaded applications, let's apply these
concepts to a web page. Consider the markup shown in Listing 10-1.
Listing 10-1.
Web Page Running the UI and JavaScript in a Single Thread
<head>
…
<script type="text/javascript">
$(document).ready(function () {
if (!Modernizr.webworkers) {
alert("This browser doesn't support HTML5 Web Workers!");
return;
}
$("#button1").click(function () {
alert("Processing started!");
var date = new Date();
var currentDate = null;
do {
currentDate = new Date();
}
while (currentDate - date < 10000);
alert("Processing done!");
});
});
</script>
</head>
<body>
…
<input id="button1" type="button" value="Click" />
…
</body>
This markup consists of a button and a block of JavaScript that is executed when the button is clicked.
The
ready()
function uses Modernizr to check whether the browser supports web workers. This is done by
