1. #11
    Sencha User nlotz's Avatar
    Join Date
    Dec 2007
    Location
    Hamburg, Germany
    Posts
    88
    Vote Rating
    0
    nlotz is on a distinguished road

      0  

    Default


    Did you check the ETags?

    Note that with Apache the ETag is calculated from the number of the inode, the filesize and the last-modified time of the resource. This can lead to the same resource being fetched multiple times when it is served by multiple webservers (load balancing). That is because the same resource will have different inode-numbers on different filesystems. You can fix that by telling Apache to calculate the ETag from the size and last-modified time of the resource, only:
    Code:
    FileETag MTime Size
    Reference: Apache 2.2 - FileETag
    Last edited by nlotz; 23 Sep 2009 at 6:06 AM. Reason: added link

  2. #12
    Ext User
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    0
    rblon is on a distinguished road

      0  

    Default


    yes I think Lighttpd is similar, but that is not an issue here as I am using only 1 webserver.

    It all goes fine when I do a normal reload (F5), but when I do a shift-reload (Ctrl+F5) then I see multiple requests for the same file (mainly s.gif). It seems if FireFox adds new requests to the queue even if a request for the same file is already outstanding.

    Perhaps it is not a huge problem, as it will only affects new users to the website (or users who haven't visited for a while).

    Still wondering if other people see the same with FireFox, or that is a web server configuration problem after all.

  3. #13
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    557
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    AFAIK, shift-reload reloads the page without using the cache at all. If the cache is entirely bypassed, then you're going to see the same resource downloaded multiple times. I suggest using regular reload. If you are seeing issues where some resources in the page are stale, either configure expire headers to expire immediately (explicit expires header), or change "browser.cache.check_doc_frequency" to "1" in about:cache.

    If you want to simulate a new site experience, just use the "Clear Recent History" menu option to clear all cookies and the entire cache.

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It really should not load the same resource multiple times.

    Bypassing the cache should reload all resources sure, but if a page references http://foo.com/s.gif twenty times, the browser will only make one HTTP request for it. To do otherwise is pathological behaviour and should be reported to the browser manufacturer.

  5. #15
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    557
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    Good point. So, if it is the case that firefox loads the same image multiple times, then that's a bug. Still, shift-reload as far as I know bypasses the cache.

  6. #16
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Why is your client sending the following headers:
    Code:
    Pragma no-cache
    Cache-Control no-cache
    ps. Did you by any chance enable the 'Disable Cache' option in the Firefox Web Developer plugin?

  7. #17
    Ext User
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    0
    rblon is on a distinguished road

      0  

    Default


    So my Firefox behaves as Joeri explains, with Ctrl+F5 cache is completely bypassed and there are multiple request for 1 file. I agree with Animal that behaviour should be considered a bug. Did one of you test if you see the same in Firefox?

    Condor, no I didn't disable cache, I think those request headers are related to Ctrl+F5. If I do a normal F5, I don't have those headers.

    I think I have most of it is clear now. Thanks for all your help. However, a related problem is how to get rid of the validation requests? The "two-trees" example has 20 requests, most of them for data that hardly anytime changes. So it could have a far-in-the-future expires date, while updates are controlled with folder/filename versioning. The template I'm working on has currently around 60 initial requests. To validate each file is a waste of http connections.

    I have tried to use pre-check and post-check in the Cache-Control header, but no success. If I have the following response header, validation still takes place on reload:

    Cache-Control max-age=2592000, post-check=2592000, pre-check=2592000
    Content-Type image/gif
    Accept-Ranges bytes
    Etag "1314839837"
    Last-Modified Mon, 06 Jul 2009 23:09:20 GMT
    Content-Length 43
    Date Wed, 23 Sep 2009 20:36:09 GMT
    Server lighttpd/1.4.23

    Perhaps the following lighttpd bug is the reason it is not possible.

    Btw, sorry if it now becomes a bit off-topic (ExtJS). On the other hand ExtJS library is generating many http requests, which makes it relevant how to minimize these.

  8. #18
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    557
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    An explanation of browser caching as I understand it (please correct me if I'm wrong):

    Basic cache principles:
    - Last-Modified or Etag must be set to enable caching
    - Once cached, Expires or Cache-Control:max-age set your expiration date (the latter overrides the former)
    - Before the expiration date is reached, the browser will not request the file from the server
    - After the expiration date is reached, the browser will do conditional gets (validate requests)

    Some other tidbits:
    - Cache-Control: "no-store" / "no-cache" prevent caching by the browser, "private" says it can be cached by the browser, "public" says it can be cached by the browsers and proxies. Getting fancy with Cache-Control (using anything besides "no-cache" and "public") can get you into trouble because there are browser bugs and proxy bugs related to these headers.
    - "Cache-Control: no-cache" is the only correct way to prevent caching. Dynamic languages (e.g. PHP) implicitly send this header.
    - Pragma headers are deprecated and should not be used
    - If no expiration date is specified, the browser will assume one based on the browser caching settings. You don't want this, because you don't know in that case whether the browser will send requests to the server or not.

    So, as recommendations you get:
    - Always include Last-Modified and/or Etag
    - Always include Expires and/or Cache-Control: max-age headers
    - Either set expires in the past (Expires: -1) to ensure freshness of resources in the browser cache
    - Or adapt your deployment so new versions are deployed at different URL's, and set expires far into the future. In that case, browsers will not request updated versions until the expiration date is reached, so you must always change URL's to force fresh downloads.

  9. #19
    Ext User
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    0
    rblon is on a distinguished road

      0  

    Default


    What you're saying makes sense

    "- Before the expiration date is reached, the browser will not request the file from the server
    - After the expiration date is reached, the browser will do conditional gets (validate requests)"

    but it is not what I observe.

    If I use the following response headers (using "access 30 days")

    Expires Sat, 24 Oct 2009 09:03:41 GMT
    Cache-Control max-age=2592000
    Content-Type image/gif
    Accept-Ranges bytes
    Etag "1314839837"
    Last-Modified Mon, 06 Jul 2009 23:09:20 GMT
    Content-Length 43
    Date Thu, 24 Sep 2009 09:03:41 GMT
    Server lighttpd/1.4.23

    I still see a validation request on the next re-load (F5).

    Host dev.example.com
    User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3
    Accept image/png,image/*;q=0.8,*/*;q=0.5
    Accept-Language en-gb,en;q=0.5
    Accept-Encoding gzip,deflate
    Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
    Keep-Alive 300
    Connection keep-alive
    Referer http://dev.example.com/extjs/example...two-trees.html
    If-Modified-Since Mon, 06 Jul 2009 23:09:20 GMT
    If-None-Match "1314839837"
    Cache-Control max-age=0

    So my Firefox is doing validation request before the expires date (and is putting Cache-Control max-age=0 in the request headers).

    I have checked with "access 10 seconds" to see what happens after expires date. Then Firefox is putting in a validation request as well (so basically same as before expires date).

  10. #20
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Are you sure you don't have a disabled Firefox cache?

    This can be the case with 'private browsing' or if you specifically disabled it (e.g. with the Web Developer plugin).