What's the best (fast) way to load javascript in different pages?

Question

What's the best way to load fast javascript in different pages ? Should my custom javascripts go separate for each page or all custom javascripts should be present only in 1 common custom.js file and include this file in footer ?

require_once($header);
include_once($page2.php);
require_once($footer); 
<script src="js/custom-page2.js"></script>//separate for each page

require_once($header);
include_once($page1.php);
require_once($footer); 
<script src="js/custom-page1.js"></script>//separate for each page

OR

//in footer.php include all js in 1 file
<script src="js/all-custom.js"></script>

You can find it **[here](http://stackoverflow.com/a/555730/2065039)** — Guruprasad J Rao, Sep 10 '15 at 13:35
Bear in mind the speed of the page load. If you have lots of functions which are unnecessary keep the files short & specific to the page. — Ukuser32, Sep 10 '15 at 13:36

score 0 · Answer 1 · answered Sep 10 '15 at 13:42

If all pages share the same scripts using one script will be better.

If they use different scripts you can cut out what each page DOESN'T need and save on HTTP requests.

Or a mixture of the two.

So...it depends?

Basic rule: If you don't need it, don't load it.

score 0 · Answer 2 · answered Sep 10 '15 at 13:48

I advise you to create your html page by including in this order :

HTML wrap all
Head (with style in one page for example)
Body with:
- Javascript modules
- Main HTML DOM
- Javascript DOM modifiers and launchers

Same like this :

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <script type="text/javascript" src="modules.js"></script>
    <div class="body"></div>
    <script type="text/javascript" src="functions.js"></script>
</body>
</html>

score 0 · Answer 3 · answered Sep 10 '15 at 13:59

it's good idea to put all js in header (browser will not render page until all header files are loaded, at least in theory).
browser (proxy etc) will cache your js, so it's not going to be fetched from your site on every request. browser will only check if file has changed.
in most cases browser will keep single connection for all requests, however it still has to ask for every single js file if it hasn't changed. i keep js logic in small seperate files during development, but then i merge them for production.

What's the best (fast) way to load javascript in different pages?

3 Answers3