CODEWITHSUNDEEP
javascriptperformanceyiiloadingclient-side
Nathan H
Nathan H

Reputation: 49371

Load multiple javascripts as needed vs loading one big file once

Is it better to write one big javascript file with the behavior for all the pages of the site at once? Or to only load the javascript specific to that page?

I understand that one big file is better for caching. However I am thinking that the browser will probably run all kind of unnecessary code (jQuery on "ready" stuff and attaching events) to pages that don't require them.

I also understand that fewer HTTP requests is better. So we have 3 scenarios that I see:

  1. One big file across the entire site
  2. Load modules as needed
  3. One combined file specific to each page, generated on the fly as a combination of needed modules.

What's best?

I have the Yii Framework, if it helps.

Upvotes: 2

Views: 2074

Answers (4)

Albin Sunnanbo
Albin Sunnanbo

Reputation: 47048

Well, we have two competing forces. A) Load too much data initially. B) Load data too many times.

Finding the balance here is a delicate art and requires both the understanding of usage patterns to get some educated guesses and then testing and measuring until acceptable response times are reached.

Instead of asking what is the "best", you should ask yourself what is acceptable on your site. Is loading the front page in less than one second on a typical broadband connection OK? Is ten seconds on a slow connection OK? Then measure and tweak until you get speeds acceptable.

Somethings to consider about usage patterns might be if you want to prioritize front page loading speeds or loading speeds of sub pages? If you chunk all your javascript into one big file you have a penalty on the first page load, but other pages will load faster. And the other way around.

If you have many different pages and the user is not expected to visit more than a few you should consider keeping one js file for each page. But don't create many scripts for each page, keep the number of files as few as possible.

The difference between one and many js files are mostly on first load. Once cached one or many files won't make a big difference. The bad thing with multiple files are when you have latency for each file when loading over a network.

A final reminder. Make sure you minify your files, add gzipping if possible and make sure your cache headers let the browser cache the js files and other resources properly.

Upvotes: 0

Brett Gregson
Brett Gregson

Reputation: 5913

When it comes to the Yii framework, it definitely seems they want you to load js files only when you need them (on the page that requires the js file), eg:

 Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_HEAD);
 Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_READY);

This method also only loads jQuery when required. But I don't agree entirely, not specifically from a efficiency point of view, but also from a ease of use point of view. If you are using a lot of javascript, I recommend forcing Yii to load jQuery straight away using:

Yii::app()->clientScript->registerCoreScript('jquery');

I then have one js file containing common function (functions I use in more that one place on the site) which I load straight away as well. I then use inline javascript for small snippets of javascript that are page specific

Upvotes: 0

alemangui
alemangui

Reputation: 3655

From the options you specified I would make one big Javascript file. It may take slightly longer at the beginning but it will make the application usage snappier. Of course, it depends on every particular case.

I also recommend you to use Head.JS loader, it is very simple. Basically, they state that loading multiple files in parallel at the first load is actually faster than loading a single big one (using head.js at least). This is beacause they are being loaded in a non-blocking parallel manner. Especially with older generation browsers which download scripts one after the other (like the following graph taken from head.js website):

enter image description here

Edit: Forgot to mention, there is an additional caveat of loading a single file - some devices have a limit on caching, for example, in iPhone 4 the limit is 25kb (pretty low).

Upvotes: 0

j0nes
j0nes

Reputation: 8099

You are right with your thoughts - a big file is generelly preferred, but this can lead to unwanted Javascript parts to be executed. Your goal must be to separate the generally needed Javascript files with the parts that are only needed for one page. You can then decide for every case if you want to include it in your big file or if you want to continue to load it separately. Try to identify the main pages that most of your users visit - the files needed there should go in the main file.

As a sidenote, you can have a look at Require.js for building module relations in Javascript and on-demand loading.

Upvotes: 2

Related Questions