Blocking versus Non blocking scripts

Exclusive offer: get 50% off this eBook here
Learning Modernizr

Learning Modernizr — Save 50%

Create forward-compatible websites using feature detection features of Modernizr with this book and ebook.

$14.99    $7.50
by Adam Watson | February 2013 | Open Source Web Development

In this article by Adam Watson, the author of Learning Modernizr, we will look into the basics of blocking versus non blocking scripts. We take help of several topics to cover this section.

In this article we will cover:

  • The async attribute

  • Blocking to allow shimming

  • Adding navigation

  • The section frames

(For more resources related to this topic, see here.)

Blocking versus non blocking

The reason we've put this library into the head of the HTML page and not the footer is because we actually want Modernizr to be a blocking script; this way it will test for, and if applicable create or shim, any elements before the DOM is rendered. We also want to be able to tell what features are available to us before the page is rendered. The script will load, Modernizr will test the availability of the new semantic elements, and if necessary, shim in the ones that fail the tests, and the rest of the page load will be on its merry way.

Now when I say that we want the script to be "blocking", what I mean by that is the browser will wait to render or download any more of the page content until the script has finished loading. In essence, everything will move in a serial process and future processes will be "blocked" from occurring until after this takes place. This is also referred to as single threaded. More commonly as you may already be aware of, JavaScripts are called upon in the footer of the page, typically before the last body tag or by way of self-construction through use of an anonymous or immediate function, which only builds itself once the DOM is already parsed.

The async attribute

Even more recently, included page scripts can have the async attribute added to their tag elements, which will tell the browser to download other scripts in parallel. I like to think of serial versus parallel script downloading in terms of a phone conversation, each script being a single phone call. For each call made, a conversation is held, and once complete, the next phone call is made until there aren't any numbers left to be dialled. Parallel or asynchronous would be like having all of the callers on a conference call at one time. The browser, as the person making all these calls at once, has the superpower to hold all these conversations at the same time. I like to think of blocking scripts as phone calls, which contain pieces of information in their conversations that the person or browser would need to know before communicating or dialling up with the other scripts on this metaphoric conference call.

Blocking to allow shimming

For our needs, however, we want Modernizr to block that, so that all feature tests and shimming can be done before DOM render. The piece of information the browser needs before calling out the other scripts and parts of the page is what features exist, and whether or not semantic HTML5 elements need to be simulated. Doing otherwise could mean tragedy for something being targeted that doesn't exist because our shim wasn't there to serve its purpose by doing so. It would be similar to a roofer trying to attach shingles to a roof without any nails. Think of shimming as the nails for the CSS to attach certain selectors to their respective DOM nodes. Browsers such as IE typically ignore elements they don't recognize by default so the shims make the styles hold to the replicated semantic elements, and blocking the page ensures that happens in a timely manner.

Shimming, which is also referred to as a "shiv", is when JavaScript recreates an HTML5 element that doesn't exist natively in the browser. The elements are thus "shimmed" in for use in styling. The browser will often ignore elements that don't exist natively otherwise.

Say for example, the browser that was used to render the page did not support the new HTML5 section element tag. If the page wasn't shimmed to accommodate this before the render tree was constructed, you would run the risk of the CSS not working on those section elements. Looking at the reference chart on http://caniuse.com , this is somewhat likely for anyone using IE 8 or earlier:

Now that we've adequately covered how to load Modernizr in the page header, we can move back on to the HTML.

Adding the navigation

Now that we have verified all of the JavaScript that is connected, we can start adding in more visual HTML elements. I'm going to add in five sections to the page and a fixed navigation header to scroll to each of them. Once that is all in place and working, we'll disable the default HTML actions in the navigation and control everything with JavaScript. By doing this, there will be a nice graceful fallback for the two people on the planet that have JavaScript disabled. Just kidding, maybe it's only one person. All joking aside, a no JavaScript fallback will be in place in the event that it is disabled on the page.

If everything checks out as it should, you'll see the following printed in the JavaScript console in developer tools:

While we're at it let's remove the h1 tag as well. Since we now know for a fact that Modernizr is great, we don't need to "hello world" it. Once the h1 tag is removed, it's time for a bit of navigation. The HTML used is as follows:

<!-- Placing everything in the <header> html5 tag. --> <header> <div id="navbar"> <div id="nav"> <!-- Wrap the navigation in the new html5 nav element --> <nav> <href="#frame-1">Section One</a> <href="#frame-2">Section Two</a> <href="#frame-3">Section Three</a> <href="#frame-4">Section Four</a> <href="#frame-5">Section Four</a> </nav> </div> </div> </header>

This is a fairly straightforward navigation at the moment. The entire fragment is placed inside the HTML5 header element of the page. A div tag with the id field of navbar will be used for targeting.

I prefer to use HTML5 purely for semantic markup of the page as much as possible and to use div tags to target with styles. You could just as easily add CSS selectors to the new elements and they would be picked up as if they were any other inline or block element.

The section frames

After the nav element we'll add the page section frames. Each frame will be a div element, and each div element will have an id field matching the href attribute of the element from the navigation. For example, the first frame will have the id field of frame-1 which matches the href attribute of the first anchor tag in the navigation. Everything will also be wrapped in a div tag with the id field of main. Each panel or section will have the class name of frame, which allows us to apply common styles across sections as shown in the following code snippet:

<div id="main"> <div id="frame-1" ></div> <div id="frame-2" ></div> <div id="frame-3" ></div> <div id="frame-4" ></div> <div id="frame-5" ></div> </div>

Summary

In this article we saw the basics of blocking versus non blocking scripts. We saw how the async attribute allows the browser to download other scripts in parallel. We blocked scripts using shimming, and also added navigation to the scripts. Lastly, we saw the use of section frames in scripts.

Resources for Article :


Further resources on this subject:


Learning Modernizr Create forward-compatible websites using feature detection features of Modernizr with this book and ebook.
Published: December 2012
eBook Price: $14.99
Book Price: $24.99
See more
Select your format and quantity:

About the Author :


Adam Watson

Adam Watson began life as a guitar maker but quickly transitioned into tech after landing a firmware-testing gig at Hewlett Packard. After getting a taste of the tech life, he began designing and coding websites in early 2000. Now, he works for BUZZMEDIA, a leading pop-culture company developing a mobile face for the company network of more than 40 music and pop-culture websites. He has also helped in writing the official Facebook plugin for WordPress, re-factoring portions of it a week before its official launch.

BUZZMEDIA is the leader in pop-culture and has millennial audience reach. It's the world's fastest-growing digital media company, with more than 100 million monthly unique visitors.

Over 35 BUZZMEDIA brands including SPIN, Celebuzz, Stereogum, Buzznet, The Superficial, Idolator, Just Jared, Just Jared Jr., PureVolume, The Hype Machine, AbsolutePunk, What Would Tyler Durden Do?, SocialiteLife, Go Fug Yourself, Pink is the New Blog, Gorilla vs. Bear, RCRD LBL, Videogum, TheFrisky, Egotastic!, Concrete Loop, Brooklyn Vegan, Crunktastical, Punknews.org, and others are category-leading, authentic, influential voices.

Books From Packt


Responsive   Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

HTML5 Video How-To
HTML5 Video How-To

HTML5 Boilerplate Web   Development
HTML5 Boilerplate Web Development

HTML5 Multimedia   Development Cookbook
HTML5 Multimedia Development Cookbook

HTML5 Mobile   Development Cookbook
HTML5 Mobile Development Cookbook

Dreamweaver   CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

HTML5   Games Development by Example: Beginner’s Guide
HTML5 Games Development by Example: Beginner’s Guide

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software