BrowserCaching » History » Version 8
dj jones, 2014-09-01 15:46
1 | 1 | dj jones | h1. BrowserCaching |
---|---|---|---|
2 | 1 | dj jones | |
3 | 5 | dj jones | {{toc}} |
4 | 5 | dj jones | |
5 | 2 | dj jones | h2. General Background: as to why caching in browser is a good thing |
6 | 1 | dj jones | |
7 | 1 | dj jones | It is good practise on any website to let the browser cache objects that are static - ie don't contain user content, and are the same for hours, days or weeks. |
8 | 1 | dj jones | |
9 | 1 | dj jones | (This in general means files like: .css, .js and image files) |
10 | 1 | dj jones | |
11 | 1 | dj jones | But some content does change very fast, so must not be cached by the browser. |
12 | 1 | dj jones | |
13 | 1 | dj jones | *If the browser is told 'don't cache this object':* |
14 | 4 | dj jones | then it knows not to. This is what Websites (and Redmine) do on the pages that may change: eg an issue page: it will put into the HTTP header that message. |
15 | 1 | dj jones | |
16 | 1 | dj jones | *But in the absence of that - if the browser is not sure about a page component* |
17 | 4 | dj jones | that it already has recently downloaded, it will send a 304 request to the server: saying 'can you tell me, is this file still not stale'. And with a 304 the server does not need to send the whole object again: just a short 'yes, that is still fresh' answer. |
18 | 1 | dj jones | |
19 | 4 | dj jones | In Redmine's default set-up: it generates a lot of 304 connects on every page: you can see these in a tool like Firebug. One for every css and .js file etc. Many. |
20 | 1 | dj jones | |
21 | 4 | dj jones | These are bad for the user experience: because the browser has to wait for these responses, before it can carry on and build the page. |
22 | 1 | dj jones | |
23 | 1 | dj jones | *So we need to tell the browser that these objects will not be stale for a long time* |
24 | 1 | dj jones | |
25 | 1 | dj jones | There are easy ways to configure Apache and nginx to do this: by telling them to set the 'Expiry' date in the HTTP Header well into the future: so that the browser knows: OK, this objects is not stale, because we are still before the expiry date'. |
26 | 1 | dj jones | |
27 | 4 | dj jones | Thus when a new user visits Redmine, their browser on the first page will GET the .css and .js files etc, but on pages after that: does not need to get them again. |
28 | 1 | dj jones | |
29 | 1 | dj jones | The users experience faster web page builds! |
30 | 1 | dj jones | |
31 | 1 | dj jones | h2. The Problem with Redmine |
32 | 6 | dj jones | |
33 | 8 | dj jones | Unfortunately, RedMine also uses .js file names, for things that DO contain user content: ie things that should NOT be cached in the browser. |
34 | 1 | dj jones | |
35 | 1 | dj jones | So this means; if in Apache/nginx you add a simple config, to cache anyting that is named *.js: then your Redmine will break! |
36 | 1 | dj jones | |
37 | 3 | dj jones | See the Issue #17770 - where this problem is reported, to see if the RedMine team can change RRedmine, to STOP using the .js in bad places. |
38 | 1 | dj jones | |
39 | 1 | dj jones | Tne places it breaks if you use a simple config are: (a) when editing a journal in an issue (b) when uploading a file to an issue |
40 | 1 | dj jones | |
41 | 7 | dj jones | h2. The work round for RedMine |
42 | 3 | dj jones | |
43 | 4 | dj jones | Is to use a more complex configuration: that also checks which directory the .js file is in, before setting the cache heading. |
44 | 1 | dj jones | |
45 | 1 | dj jones | Etienne suggested this nginx configuration (see Issues #13564): |
46 | 1 | dj jones | |
47 | 1 | dj jones | <pre> |
48 | 1 | dj jones | location ~* ^(?:(?:plugin_assets/|themes/).+/)(?:javascripts|stylesheets|images)/.+\.(?:css|js|jpe?g|gif|htc|ico|png|html)$ { |
49 | 4 | dj jones | expires 365d; |
50 | 4 | dj jones | } |
51 | 1 | dj jones | </pre> |
52 | 1 | dj jones | |
53 | 8 | dj jones | The simple case, that will break Redmine as above, because it does not care about which directory the js files are in:eg: |
54 | 1 | dj jones | <pre> |
55 | 1 | dj jones | location ~* \.(ico|css|js|gif|jp?g|png)(\?[0-9]+)?$ { |
56 | 1 | dj jones | expires 365d; |
57 | 1 | dj jones | } |
58 | 1 | dj jones | </pre> |
59 | 4 | dj jones | |
60 | 4 | dj jones | Note that in nginx: 'expires' is the config that sets the 'Expiry' HTTP header in the object. |
61 | 4 | dj jones | |
62 | 4 | dj jones | In the above, 365d means 365 days. |
63 | 4 | dj jones | |
64 | 4 | dj jones | See nginx page: http://nginx.org/en/docs/http/ngx_http_headers_module.html#expires |