Question

I have a webpage with a lot of javscript functions. It was a requirement for the job to have a single html file and call all the sections inside the same page and replace the “old content” with the new one without leaving the page. (Please don’t tell me if it was a good idea or not.)

So, all of them are necesary for the site to work, but it is not necesary to load them at the beggining. Is there any form to load and call functions when clicked a button?

I will appreciate a lot your help.

Answer 1

I suggest that you put the javascript in two files.

In file 1 you put the bare minimum and in file 2 the rest. You can load file 2 when you want by doing something like this:

var script = document.createElement('script');
script.type = 'application/javascript';
script.src = 'name_of_script_2.js';
document.head.appendChild(script);

You should also look into minification and compression. For example Googles closure compiler. (start with just white-space-optimization and then try simple optimization. The advanced optimization requires special things to work) And make sure you gzip your files to make them as small as possible.