Caching of CSS and JS resources in XPages when "use runtime optimized javascript and css resources"
Asked Answered
S

2

5

In XPages "use runtime optimized javascript and css resources" is a really cool feature because it joins all js files in just a file and all css files in just a css file.

However I noticed that the joined files are not cached (they always return status 200) and when you don't use "use runtime optimized javascript and css resources" they do (and return status 304).

Is good to reduce http requests but is bad always to retrieve from server the js and css files when they could be cached via ETag or Last-Modified http headers. Anybody knows if I'm missing something or if there is way to cache the joined files when you use the feature "use runtime optimized javascript and css resources" (application properties > XPages tab > Performance section > use runtime optimized javascript and css resources).

Swec answered 3/1, 2014 at 21:26 Comment(2)
I just checked this on a 9.0.1 server and it looks like your statement isn't entirely true: the minified (CSS & JavaScript) resources are cached: by default the server adds an Expires header that's 10 days in the future. This will cause the browser to (during that time period) not perform a request for those resources at all and serve them from cache immediately.Veg
Agree. The resources are cached.Dint
E
1

Pressing Enter in URL bar will respect the Expires header and get the file from cache. But if you click reload or press F5 then the file will be reloaded. This is the behavior at least in Chrome and Firefox.

The cache works correctly when navigating from page to page.

Eccrine answered 4/1, 2014 at 13:18 Comment(1)
Thank you for your answer. You got it, I was hitting f5 instead enter and the behaviour is what you say when I check previously "use runtime optimized javascript and css resources". What confused me is: when I uncheck "use runtime optimized javascript and css resources" and hit f5, the files (js and css) are cached and return 304 status. Finally I learned the difference beetwen (200 bfcache) and 304 and that's the http headers expires and If-Modified-Since . See my comment to @Per 's answer.Swec
D
7

The runtime optimized resources are cached.

Here's an example: enter image description here

If you are looking at the network activity and the response codes using Chrome Developer Tools, then make sure that it has not been set to "Disable cache (while DevTools is open)": enter image description here

Dint answered 4/1, 2014 at 14:43 Comment(1)
Thank you for your answer. I was hitting f5 as @Panu mentioned. Also I wasn't aware of the difference between the status (200 cache)(also called bfcache) and (304). https://mcmap.net/q/117549/-what-is-the-difference-between-http-status-code-200-cache-vs-status-code-304 (Ben's answer). Http header expires is cool and we can set it from Domino Designer in application > properties > Basic tab > Custom Browser Cache Expiration.Swec
E
1

Pressing Enter in URL bar will respect the Expires header and get the file from cache. But if you click reload or press F5 then the file will be reloaded. This is the behavior at least in Chrome and Firefox.

The cache works correctly when navigating from page to page.

Eccrine answered 4/1, 2014 at 13:18 Comment(1)
Thank you for your answer. You got it, I was hitting f5 instead enter and the behaviour is what you say when I check previously "use runtime optimized javascript and css resources". What confused me is: when I uncheck "use runtime optimized javascript and css resources" and hit f5, the files (js and css) are cached and return 304 status. Finally I learned the difference beetwen (200 bfcache) and 304 and that's the http headers expires and If-Modified-Since . See my comment to @Per 's answer.Swec

© 2022 - 2024 — McMap. All rights reserved.