HTML5 Boilerplate Using Javascript for a Specific Page

Question

Question

If you use a single javascript file to store all the scripts, where do you put scripts for only one page?

Background

This may be a matter of opinion or “best practice,” but I'm interested in the opinions of others:

I am using html5 Boilerplate in a project. They recommend that you place all javascript in one script.js file for speed and consistency. Seems reasonable.

However, I have a little geolocation script that apply to only one page and not to the other. Should I break the agreement and just put this script on the page below my calls to javascript libraries, what does it depend on? Just put the calls to the appropriate functions (located in the script.js file) under the links to the libraries they depend on?

Thanks!

Answer 1

Good people in the html5 template recommend putting all your javascript in script.js so that the browser only has to download one file (along with the others that h5bp uses) and enable caching of this file.

The idea is not to get into the “recommended” way, but to think about things related to your own applications.

• This geolocation file will only be used on this page, right? It will never be used anywhere else.
• The script.js file will be used on several pages.

Well, then it would be pointless to put the "whole script" that will be needed on only one page in the script.js file. You must make the file external and call it separately on the desired page. This will not allow you to inflate the script.js file for functionality that this user can never use.

However, if your "whole script" for the geolocation function is quite small, include it in script.js. If it does not add download speed for this file, then it makes sense to include it there.

The bottom line is: What is the best compromise for my application?

We know that this is true:

• Cached js files are good
• fewer files to upload well
• smaller files to upload are good
• important service

Once you think about these things from the point of view of your application, making decisions becomes a little easier. And remember, solutions that trade in milliseconds will not matter much to your perception by the user of how fast your page is.

Answer 2

The browser will only download .js files once (unless something prevents browser caching). Therefore, if you expect all of your users to go to one page that uses geolocation sometime during their session, you can also give them to them at an early stage. If you expect a tiny percentage of your users to end up on the geolocation page, you might want to smash them.

Answer 3

Separate it into a separate .js file so that it can be cached. Then link to external .js files from your page.

Answer 4

I think you should put it in a separate file. Including all scripts in a single file can lead to unexpected behavior and conflicts. I like to have one javascript script file that all pages containing plugins, helper functions, formatting functions, etc. will use. Then create one separate js file for everything that only suits each page.

If you still want to have only one js file in your browser, you can use one of these utilities, which combine several js files into one.