Caching all scripts in web app

Question

I have a very large web app with over 100 scripts in total. Currently when you visit a page in the app it will load the scripts it needs for that app.

The problem is, is that some pages have a lot of complex scripts which can mean the page takes several seconds to load.

One way to get around this that I'm using is to use JQuery's $.getscript to load scripts when a user clicks a button to view the next section on that page (where content is dynamically added and removed from the DOM).

This works OK and has sped up my pages quite a lot.

I was reading a few other posts which reminded me of the fact that the browser caches scripts.

My question is would it be a lot better to load every single script in my app the moment after the user logs in? Obviously this would mean that first page after login takes a while to load where I would present them with a "Loading" spinner or something.

Would this speed up my app a lot if I leverage browser caching abilities?

---

This is how I load scripts now.

In my view I have a "JS" array which each controller pushes the needed scripts for that page onto:

class Activity extends Controller {

    function __construct()
    {
        parent::__construct();
        $this->view->js = array(
            'Activity2/js/activity.js',
            'Activity2/js/customer.js',
            'Activity2/js/selling.js',
            'Activity2/js/buying.js',
...

That array is then looped through and output in the footer:

<?PHP
if(isset($this->js)) {
  foreach($this->js as $js) {
    echo '<script type="text/javascript" src="' . WROOT . Vs . $js . '"></script>';
  }
}
?>

Answer 1

I think that downloading 100 x 1k files is slower than downloading a "1 x 100kb" file. What about a php script that generate a single js instead of having 100 script tags in your page?

Think at that poor browser that have to check if 100 or more files are cached or not ;)

This answer is specific for your question where you wrote about 100 js files and the way you are loading. You should also have a look at AMD and require.js technologies.

D.