Loading JavaScript on demand to reduce page load time

Think of a rich Internet application that makes heavy use of JavaScript to interact with the user. Such a page typically consists of more than one JavaScript files, such as a file for calendar control, another file for special effects, yet another plugin for your cool accordion, and so on.

This results in the increase of the page load time as browsers cannot download all of these files simultaneously. The best solution for this is to load only absolutely necessary files at the time of loading the page and load the other files when required.

This recipe will explain how JavaScript files can be loaded on demand.

Getting ready

Create a directory named Recipe9 in the chapter2 folder.

How to do it...

1. Create a file index.html in the chapter2 folder. Write the HTML to create a page that will have a paragraph element and four buttons. The first button will be used to load another JavaScript file and rest of the buttons will manipulate the paragraph...