www.webdeveloper.com
Results 1 to 4 of 4

Thread: A fundamental question on how modern browsers cache resources.

  1. #1
    Join Date
    Jun 2012
    Posts
    12

    A fundamental question on how modern browsers cache resources.

    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..

  2. #2
    Join Date
    Mar 2011
    Posts
    1,141
    Generally speaking, a browser will tend to cache all resources required to render a page. So, if a resource required on subsequent pages exists in the cache, the browser will use that cached copy no matter how the webpage is constructed. It all boils down to HTTP requests for these common resources, and caching is designed to reduce unnecessary HTTP requests. Your two scenarios use the same resources to render the same content and so there would not be any significant difference in speed or efficiency.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2012
    Posts
    12
    Great thanks !

  4. #4
    Join Date
    Aug 2006
    Posts
    1,910
    Unless you're including it everywhere anyway and forgot to mention it, the second version needs to include the jquery library, and thus has a performance hit from that.

    Dave

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles