Loading Your JavaScript Files
Loading JavaScript files can be time intensive, depending on the size of the file. Remember, HTML loads from the top down. Web developers can use a couple of tools to help speed up the process on mobile devices.
It’s good to note that JavaScript always loads synchronously, which means that nothing can load while the JavaScript loads. This is why it might be important—depending on your application—to place the JavaScript files at the bottom of the HTML document. However, we will discuss an alternative that loads JavaScript files asynchronously, using a service called head.js.
head.js
head.js (http://headjs.com/) is a JavaScript library that enables you to load the head section asynchronously along with the rest of the HTML. This speeds page load times for your script and CSS files.
To add it your page, follow these steps:
1. Head over to the headjs.com page and click the Download link. You can copy and paste the URL to the latest version of headjs (https://raw.github.com/headjs/headjs/v0.96/dist/head.min.js).
2. Add the following snippet below the handlebarsJS script tag in the head section of the index.html:
<script type=”text/javascript” language=”Javascript”
src=”https://raw.github.com/headjs/headjs/v0.96/dist/head.min.js”></script>
3. Remember all those script tags that you added earlier? You’re now going to remove them and write one script to take care of them loading:
<script type=”text/javascript” language=”Javascript”>
head.js(“assets/js/global.js”, “assets/js/database.js”, “assets/js/geo.js”,
“assets/js/helper.js”, “assets/js/util.js”, “assets/js/social.js”);
</script>
It’s that simple! Now all your JavaScript files will load faster when the page loads. Although you may not see a big improvement in Corks, you might see a big improvement with other JavaScript-heavy applications.
Manifest cache
Manifest Cache provides you with an easy way to provide browser storage for static files loaded on a mobile device. Basic setup is easy. However, you must write code to check if the files have been updated. It’s important to note that you don’t use head.js and Manifest Cache together; they provide different caching solutions that can’ t be combined.
1. Add the following code to the HTML tag of the document:
<html manifest=”manifest.appcache”>
If you are working with multiple pages, you must include this on every page to use the cache.
2. Create a new file called manifest.appcache and place it in the root directory of your project. The file needs to have the same name as the one in the html tag.
3. Finally, in that file, add the following code:
CACHE MANIFEST
index.html
assets/js/*
This enables the application to cache every file in the assets/js directory, which includes all your JavaScript files. You can expand this to cache more items; just follow the examples in Chapter 2.
An important part of the .appcache file is that it must be served with the correct MIME file type. This can be accomplished in many ways; however, the most common approach is to set the type via the .htaccess file (if you are using Apache as your Web Server). Simply create a new file in the root directory of your web app called .htaccess and then add the following code:
AddType text/cache-manifest .appcache
Once this is completed, you will be able to use the Manifest Cache feature. An important note is that when the user first views your website and you have enabled this feature, all files will download for offline use. This may decrease the performance of your website because more bandwidth is required; however, once the files are downloaded the application will start responding at a much faster rate since the files are cached.
The file is cached at the bit level, which means that if one file is changed, then the whole manifest will be reloaded and re-cached, so be careful how frequently you update your app cache.
Decrease your JavaScript footprint
When building mobile applications, the goal is to create small JavaScript files so the browser can quickly read them and compile them to run in the browser. One method of decreasing the size of your JavaScript footprint is to use a process called minifying.
This process removes all the “white space” (such as new lines and spaces between variables) and turns a long JavaScript into a single string. This can easily be read by the browser and decreases the overall size of the file. In addition to removing the white space, some services that offer a tool can rewrite your variables to a single letter, which decreases file size.
You can use the tools listed here to minify your JavaScript:
• http://www.minifyjs.com/javascript-compressor/
It’s important to note that you can minify your CSS and HTML files to decrease the overall footprint of your files. The downside to minifying everything is that the files become hard to edit and update. You always want to have a minified version of your JS and a full version.
You can always use tools like JS Beautifier (http://jsbeautifier.org/) to reverse the minification by expanding your JavaScript to make it easier to read.