Home arrow HTML arrow HTML 5 and Javascript Web Workers
HTML

HTML 5 and Javascript Web Workers


HTML and JavaScript let you do some amazing things, and continue to add new abilities all the time. One of these is a new breed of JavaScript objects called web workers. While they have certain limitations, they let you execute multiple JavaScript processes in parallel. This article series will show you how to use them in your web applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
February 22, 2011
TABLE OF CONTENTS:
  1. · HTML 5 and Javascript Web Workers
  2. · Building a simple web worker

print this article
SEARCH DEVARTICLES

HTML 5 and Javascript Web Workers
(Page 1 of 2 )

If you’ve been in touch with the “bleeding edge” of modern web design, you’ll probably know that HTML5 includes a lot of brand new features that allow you to create more semantic web pages, without the use of generic divs. The inclusion of new tags, such as <header>, <nav> and <footer> (which are ignored by Internet Explorer), along with HTML 5's native support for audio and video, have provided designers with a broad range of tools that will make it easy to build richer, eye-catching web sites in (hopefully) the near future.

While highlighting the abilities of the specification is all well and good, it’s like telling only half of the story. In addition to these new abilities, HTML5 features some shiny new JavaScript objects that permit you to achieve things that were only pipe dreams in the past. Would you like a more specific example of this? Well, “localStorage” is a powerful object that will let you store up to 5 MB of data in the client, which is neatly persisted between requests. Best of all, the object is currently supported by most modern browsers, including (surprisingly) Internet Explorer 8+.

But there’s even more exciting news in the JavaScript field: now, it’s possible to execute multiple JavaScript processes in parallel, thanks to the implementation of web workers, a brand new breed of objects. Specifically, web workers are objects that live and breath separately from the browser UI thread, which are capable of doing some common things, like calling local functions and variables and even performing Ajax requests.

Due to their isolated existence, though, they can’t manipulate the structure of a web page or gain access to the variables defined in it. Despite these frustrating constraints, web workers can interact seamlessly with the main page through a simple messaging API, and their respective processes can even be programmatically stopped by the page in question. That sounds quite interesting, right?

So, assuming that the topic has caught your attention, in this article series I’ll be taking a close look at HTML5 web workers, so that you can learn how to use them and put them to “work” for you in a truly painless way. 

Getting started: building a basic HTML5 document

To demonstrate the core functionality of web workers, I must first create a basic HTML5 document. As you’ll see in a moment, I’ll use a specific section of this document to display the messages interchanged between a “main” JavaScript snippet and a simple web worker.
 
Having said that, here’s how this sample HTML5 document looks:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example using a single Web Worker</title>
<style>
body {
    padding: 0;
    margin: 0;
    background: #0c1e74;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-weight: normal;
    font-size: 2.1em;
    color: #0c1e74;
}
h2 {
   font-weight: normal;
   font-size: 1.8em;
   color: #0c1e74;
}
p {
    margin: 0 0 15px 0;
}
#wrapper {
    width: 920px;
    margin: 0 auto;
    background: #fff;
}
header, section, footer {
    display: block;
    padding: 15px;
}
.worker_message {
    color: #00f;
}
</style>
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Using JavaScript Web Workers</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </header>
    <section>
        <h2>Worker message section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </section>
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p> 
    </footer>
</div>
</body>
</html>
 
If you’re familiar with some of the new elements included with HTML5, I’m sure that you’ll find the structure of the above web page very easy to follow. As you can see, the page has been broken up into three different sections: a “header,” a main “section” and a “footer.” This is a classic structure that can be seen on most websites today.

Now, if you test this web page on your browser (forget Internet Explorer, at least for a moment), you should get an output similar to the one depicted by the following image:  

That's not too bad, considering that this is only an example. In addition, you may have noticed that I assigned the title “Worker message section” to the page’s main section. Why did I decide to do this? This is the area of the page where the messages transmitted between the main script and the web worker will be echoed. Got that? Great.

Having defined the previous HTML5 document, it’s time to make it work. So, in the next segment I’ll be creating a simple JavaScript snippet, which will interact with a single web worker, via the aforementioned message API.

Ready to see an HTML5 web worker in action? Then jump forward and keep reading.      


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials