Detecting if a browser's cache is full - javascript

We've identified that full browser caches are the cause of a problem on our extranet. It only affects a small number of our users, but we'd like to alert them to the problem and give them some guidance on how to fix the problem for themselves.
We'd like to use a similar system to the one which GMail uses. When it detects that your browser's cache is full is not behaving as it should, it shows a warning message telling users that their cache is full and that it may cause problems with GMail, along with a link to a Gmail Help page on clearing your browser's cache.
Does anyone know if there any resources out there, or examples of how to use JavaScript to detect that the browser's cache is full behaving badly?
Thanks.
Clarification: What we're actually trying to detect, I suppose, is not whether or not the cache is full, but rather whether a script, which we have configured server-side to be stored in the cache, is being re-requested from the server - in such a way that the browser is behaving strangely, or as if its cache is not behaving as it should.
Further Clarification: Thank you all for the updates on caching. Our scripts are being sent with the correct headers, and we're only seeing this problem in IE6 and IE7 - Mozilla and WebKit browsers seem to be unaffected - but I'm still not sure on how exactly we'd go about using JavaScript and/or XmlHttpRequest to check to see whether or not an object was retrieved from the cache, thus letting us check whether the cache is behaving badly.

The browser's cache will not cause problems if it is full... with a few minor notes.
If the browser cache is full, the browser simply has to download fresh content vs. pulling it from its local cache. (e.g. is slower)
If the browser cache contains invalid data (e.g. an old copy of a JavaScript file) then yes, you may encounter issues. (not because the cache is full, but because you didn't serve up a fresh file for the user (Google for: expires headers and how to alter the URL path to your files when you make script changes to ensure you "break" the cache))
In Internet Explorer, when you push a download file (e.g. an Excel spreadsheet) to the user it must go into the cache to work (an IE bug) - I'm not sure if the file is bigger than the users' total cache, if that causes issues with the file being stored, and therefore loaded (Stackers pls feel free to confirm if this one way or another)
Update:
Based on your clarification, you need to ensure that any script you send to the client is appropriately cached... which means:
Change the URL to your scripts when you want a new version to be downloaded (e.g.)
http://example.com/scripts/latestThing.js?ver=3425
where the "ver" is pulled from your versioning system to ensure you always force the browser to download a fresh copy any time you change your script.
Once you are sure that the URL changes, you can send cache headers that tell the browser to cache the files for a very long time (e.g. your JS Library files (e.g. jQuery) likely don't change every hour, day, week or even month)

This will probably not work as is. But its just an idea:
var img = new Image();
(new Image).src = "imageWithFarFutures.png";
window.onload = function(){
document.getElementById("someIframe").src = "imageWithFarFutures.png";
// NOW if the server DOES get a FRESH request for "imageWithFarFutures.png"
// wouldn't it mean that the browser has kicked it out of its cache?
};

Consider sending a header to have your application never cache your content and to have it expire immediately.

Related

Why doesn't Chrome re-validate in-memory cache when doing a "normal reload?"

First, I found some resources online here and here saying about the same thing:
For a normal/soft reload, the browser will re-validate the cache, checking to see if the files are modified.
I tested it on Chrome. I have a webpage index.html which loads a few javascript files in the end of body. When hitting the refresh button (soft/normal), from the network panel I saw index.html was 304 Not Modified, which was good. However, all the javascript files were loaded from memory cache with status code 200. No revalidation!
Then I tried modifying one of the javascript files. Did the soft reload. And guess what? That file was still loaded from memory cache!
Why does Chrome do this? Doesn't that defeat the purpose of the refresh button?
Here is more information about Chrome's memory cache.
This is a relatively new behaviour which was introduced in 2017 by Chrome browser.
The well-known behaviour of browsers is to revalidate cached resource when the user refreshes the page (either by using CTRL+R combination or dedicated refresh button) by sending If-Modified-Since or If-None-Match header. It works for all resources obtained by GET request: stylesheets, scripts, htmls etc. This leads to tons of HTTP requests that in the majority of cases end with 304 Not Modifiedresponses.
The most popular websites are the ones with constantly changing content, so their users tend to refresh them habitually to get the latest news, tweets, videos and posts. It's not hard to imagine how many unnecessary requests were made every second and as it is said that the best request is the one never made, Facebook decided to address this problem and asked Chrome and Firefox to find a solution together.
Chrome came up with the described solution.
Instead of invalidating each subresource, it only checks if the HTML document changed. If it didn't, it means that it's very likely that everything else also wasn't modified, so it's returned from browser's cache. This works best when each resource has content addressed URL; for example, URL contains a hash of the content of the file. Users can always overcome this behaviour by performing a hard refresh.
Firefox's solution gives more control to developers, and it's on a good way to be implemented by all browser vendors. That is the new Cache-control directive: immutable.
You can find more information about it here: https://developer.mozilla.org/pl/docs/Web/HTTP/Headers/Cache-Control#Revalidation_and_reloading
Resources:
Facebook's article about the motivation behind proposed change, numbers, comparisons: https://code.fb.com/web/this-browser-tweak-saved-60-of-requests-to-facebook/?utm_source=codedot_rss_feed
Chromium team introducing new behaviour: https://blog.chromium.org/2017/01/reload-reloaded-faster-and-leaner-page_26.html
Browser caches are a little more complex than simple 200 and 304s than they once were and pay attention to server side directives in headers to tell them how to handle caching for each specific site.
We can adjust the browser caching profiles using various headers (such as Cache-Control) by specifically setting the time before expires you can tell a browser to use the local copy instead of requesting a new fresh copy, these can be quite aggressive in the cases of content you really don't want changed (i.e a companies logo). By doing something like Cache-Control: public, max-age=31536000
Additionally you can also set the Expires header which will allow you to almost do the same as Cache-Control but with a little less control. It just sets the amount of time to pass before the browser considers a asset stale and re-requests. Although with a re-request we could still get a cached result if the not modified response code is sent back from the server.
A lot of web servers have settings enabled to allow more aggressive caching of certain asset files (js, images, css) but less aggressive caching of content files.

Changes in Javascript not being reflected while debugging Web page

I am working on a web page development using netbeans IDE and use Firefox for debugging/testing. Whenever i do changes to Javascript, these changes are not getting reflected on the web page,the source code reveals the obsolete code.
Everytime i make changes, i ensure to restart my nginx server before opening browser, PHP seems to work fine this way, but Javascript is not in sync with my changes to the code.
Pls provide me a solution to encounter this problem.
The problem is that your browser is caching your files, you can clean browser caching or set the browser to stop caching files.
Another way to avoid browser caching is append something (timestamp or id) with a '?' at the end of your HTML file reference.
<script src='script.js?0001'><script>
Any time you want the browser request your file again, just change this value.
For avoiding the caching of files, its better to handle it programatticlly by adding proper headers like Cache-Control and max-age. However, these headers are different for different browser like IE ,firefox etc.
Best way is to trick browser by adding the randow query parameter so that browser will belive this is different request.
<script src='myScript.js?dummyParam=12001>
Here,12001 should be generated different after every change by using timestamp or someother random value.

Reading cache using JavaScript

This is Two questions:
1/ How can I read the cache stored by the browser if there's no permission restrictions?
2/ If the user browse into a website, is there a posibility of storing the page source code [HTML] in cache? (big website like youtube ..etc)
Thanks.
There is no way to read the cache manually - it all happens behind the scenes, if there is cache.
Yes, you can store the website's source code to the browser cache, but only the client-side part - HTML/CSS/JS/images/fonts/etc. It's called HTML5 Application Cache and it consists in a simple manifest file, which instructs the browser to download certain files locally and next time load them instead of downloading again. This cache you can programmatically update. Keep in mind, though, that most browsers have a limit (usually 5MB) of how much data you can store.
Hope that helps.

source code changes do NOT reflect immediately upon uploading them on my web host

This is not a programming question per se. I am using a free web host called getfreehosting. I am using their online file manager to transfer files. From time to time, the changes I make on source code do NOT reflect immediately after I upload them. I.e. when I run my application on Chrome, then go to view page source, I realize the JavaScript running is still the old version! In most cases this doesn't happen but when it does it is extremely frustrating. I've tried clearing the browser's cache. I even tried editing the file directly on their servers. Sometimes it solves the problem but other times it doesn't.
Is this a common issue encountered when transferring files to a web host? Or perhaps this is one of the downsides of using a free web host?
Thanks.
You can try clearing your browser's cache, or the ol' CTRL+F5 refresh trick. Otherwise, the hosting provider may be using a caching layer to help ease resource usage.
It is the responsibility of the server to indicate to the browser what the cacheable lifetime of the script files are when they are served to the browser (1 hr, 1 day, 1 month, etc...). This is a server side setting.
Caching is very important for both server-side efficiency and client-side performance so you don't want to defeat it completely.
You can either shorten the server-side setting for the cache lifetime or you can use a version number in your script files (like jQuery does) so that when you revise your script files, you give them a new filename like "myscript-v12.js" and update the corresponding HTML files to refer to the new filename. Then, as soon as the browser gets the new HTML file, it is guarenteed to get the new JS file because the new filename could never have been in the browser cache.
If this is just an issue for you personally while developing and revising your site, then just clear your browser cache after you upload new files and then when your browser loads that page, it won't have any version in the cache and will be forced to get the new version from the server.
There is a CACHE system in modern browsers.
Try clear cache before you browse your web site.

Versioning Javascript Files to Prevent Unnecessary Cache Clearing

I version all of my client side JS files like "/js/myfile.js?v=3903948" so that my clients don't need to clear their browser cache to ensure they get the updated files. But every time I push an update, without fail, at least one person runs into a problem where they are running the old version and get some kind of error. I used to think that this was just them having already been on the page during the release and just needing to reload the browser, but this happened to me today when I was definitely not previously on the page. I browsed to the live site and was running the old code. I needed to do a browser refresh on that page to get the new file.
What can cause this?
PS I was using Chrome on Win7, but I have seen clients report this before on all different browsers.
If your main web page can also be cached, then the old version of that page can be requesting the old version of the JS file. JS file versioning works best if the page that actually refers to the JS file cannot be cached or has very short caching time.
I agree with jfriend00 about the webpage itself being cashed and thus requesting the old javascript version.
To prevent this, you can have the javascript file loaded by an ajax (Post) request, either requesting the server what is the accurate(latest) version number to download, or requesting the javascript itself and inserting it, e.g. in the head of the page.
Edit: see for example here
I make a quick AJAX request to the server for the version it expects them to have, then force them to refresh the page if the client's script is old.
Seems that proxy or some load balancer is serving old content instead of new. Also check IIS/webserver settings how are these files cached/expired.
You can check what is going on on the wire with tools like Fiddler.

Categories