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>';
}
}
?>