Approach 4: Loading Javascript without blocking

The idea behind this approach is to load all (or almost all) script files without blocking rendering of the page. That puts the rendered page sooner in front of the visitor.

There are a couple of ways to achieve this, each trading off more work for a better visitor experience:

• Moving all<script> tags to the end of the page

• Separating user interface code and render code

• Introducing page loading indicator

• Loading code in parallel with the page

Let's go through each of them.

Moving all <script> tags to the end of the page

On a basic level, loading JavaScript code without blocking page rendering is really easy to accomplish"simply take your script tags out of the head of the page, and move them to the end of the body. That way, the page will have rendered before the script tags have a chance to block anything.

Page ScriptAtEnd.aspx in folder LoadJavaScriptWithoutBlocking in the downloaded code bundle has an example for this. Similar to the...