Scenario 1. 

----------

If my home page (index.html) has a link to an external CSS file and a script tag with an external reference to a JavaScript file, as follows:

<link rel="stylesheet" href="css/style.css">

<script src="js/script.js"></script>

If my index.html has an anchor tag which references a child page, ie:

<a href="contacts.html">Contacts</a>

However contacts.html also contains the above CSS and JS references - Q. is this an inefficient way of loading a child page, or does the browser cache these references once only so when the child page gets called the CSS and JS files do not get pulled over the network a second time ?

Is it better to:

Scenario 2. 

----------

Have a <div tag in the content area of index.html and using say jQuery, load the child page using .load, ie:

<div id="content"></div>

...

$('#content').load("contacts.html", function () { });

Only this time contacts.html does NOT contain references to the external CSS & JS files.

Isn't this a more efficient and lightweight model ?

I'd truly welcome comment etc..

Many thanks..