6 min read

(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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here