Develop Reference

Does Chrome violate the standards in caching?

We noticed Chrome caches files locally and doesn't even send a request to our server to check if there's a newer version of the javascript file.
Example of HTTP response headers for a js file that Google cached:
Accept-Ranges:bytes
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Content-Encoding:gzip
Content-Length:5479
Content-Type:application/javascript
Date:Tue, 12 Jan 2016 22:46:07 GMT
ETag:"7d68e1ceb647d11:0"
Last-Modified:Tue, 05 Jan 2016 12:44:25 GMT
Server:Microsoft-IIS/8.5
Vary:Accept-Encoding
x-robots-tag:noindex
Is it valid that Chrome cached the file? There's no Cache-control header or something that declares that the file can be cached locally, it only has ETag and Last-Modified.
BTW
Is there a way (maybe a header) to instruct Chrome to check if the cached file has changed without appending version to the file name? Setting no-cache is not an option since I do want it to be cached, but I want to use the ETag and Last-Modified headers as it should.

Unless specifically constrained by a cache-control (section 14.9)
directive, a caching system MAY always store a successful response
(see section 13.8) as a cache entry, MAY return it without validation
if it is fresh, and MAY return it after successful validation.
You can always use the must-revalidate directive.
When the must-revalidate directive is present in a response received
by a cache, that cache MUST NOT use the entry after it becomes stale
to respond to a subsequent request without first revalidating it with
the origin server.
Source

does javascript files get requested again from the server on page refresh?

I don't know how to ask this question but, i am developing a single page application(SPA) using nodejs on the server side and whenever the data gets updated the user gets informed, however if the user has refreshed wouldn't the json data and every script file just vanish an get requested from the server again?
How can i prevent the javascript files and specifically the file that has the json data from being requested again on page refresh?
is there a way to solve this problem?

JavaScript files are not special. Just like images, style sheets, and HTML files, they get re-requested as necessary by the browser.
And so the same techniques for minimizing re-retrieval of them apply. The browser can reuse its cached copy of the file if you configure your web server to set appropriate caching headers when responding with the file data (provided the browser still has a copy).
You can see an example of this on the Google Libraries site. If you request a specific version of a library file (say, jQuery 1.10.1) when your web console open to the network tab, you'll see that Google returns it with these headers (irrelevant ones omitted):
Age: 238894
Cache-Control: public, max-age=31536000
Date: Thu, 09 Jan 2014 20:47:08 GMT
Expires: Fri, 09 Jan 2015 20:47:08 GMT
Last-Modified: Tue, 09 Jul 2013 11:31:25 GMT
Note that the file is allowed to be cached, without revalidation, for a year. So if the user refreshes the page, the browser can reuse its cached copy (if it has one). (This is not what Google does if you use one of the wildcard "any version of jQuery 1.10" URLs, because of course the tip version changes...)
Some browsers may bypass their cache with a refresh (particularly a "force" refresh like Ctrl+F5). In that case, they may at least send an If-Modified-Since request.

If you want to prevent cache and reload javascript at every request, make suer you use the correct header:
Cache-Control:max-age=0
Your browser will undertand to refresh all resources at every request.
For a better understanding about cache, please give a look at this A/Q

As for json data, you can save it in local storage (http://www.w3schools.com/html/html5_webstorage.asp)

Perhaps you can try Application Cache and Local storage.

Chrome Network Web Developer Tool tab says Dojo AJAX requests are taking around 44 years to complete

The Chrome Network Tab in the Web Developer Tools shows that a bunch of my AJAX requests are taking 16027.8 days to complete. This is... not how long they are taking.
I can replicate this on multiple machines, and in both development and production environments. This happens for all Dojo AJAX requests that are happening onload. It doesn't happen for other webapp or 3rd party requests (like signin AJAX or facebook).
What is going on? Is our server somehow screwing this up? Is it a bug in chrome dev tools (it almost certainly is, right?), and if so, is there anything that can be done about it? It makes the visual waterfall pretty useless, as you can imagine.
Edit: Upon new information, this seems to be a common problem with IBM Websphere Commerce sites. What about the server or code could be causing this? Look here for examples:
http://www.ikea.com/us/en/catalog/categories/departments/kitchen/#
http://www.lavieenrose.com/webapp/wcs/stores/servlet/LVER_10052_10001_-1
http://www.ferragamo.com/shop/en/usa
Edit 2: This issue is fixed in the newest version of Chrome.

This issue is not related to web framework or server. Issue affects Chrome browser version 31.0.1650.57.
Now issue is fixed and will be delivered with next stable channel update. Fix diff
If you need fix urgently, you can update to dev channel version. Instructions
See this issue for more details.

Very odd. Able to recreate on Chrome 31.0.1650.57 on OSX Mavericks as well. Tested w/ ikea link, noticed Chrome reported 16028.7 days, 41ms latency for resource /us/en/iows/tealium.
Charles proxy shows these headers:
HTTP/1.1 304 Not Modified
Content-Type: application/json
Last-Modified: Mon, 18 Nov 2013 18:34:51 GMT
Cache-Control: public, max-age=7200
Date: Sat, 23 Nov 2013 00:32:26 GMT
Connection: keep-alive
Vary: Accept-Encoding
The proxy app (Charles) reports no such odd time - it shows 40ms.
The lavieenrose.com link caused Chrome to report time of 16028.7 days as well... that seems to be in common.
Charles shows:
HTTP/1.1 200 OK
Date: Sat, 23 Nov 2013 00:46:37 GMT
Server: IBM_HTTP_Server
Last-Modified: Tue, 19 Jun 2012 13:05:34 GMT
ETag: "5c487f-1a15-4c2d2f01a0380"
Accept-Ranges: bytes
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 1738
Content-Type: application/x-javascript
My conclusion is this isn't a server response or headers issue. I think this is a Chromium or WebKit dev tools issue.
Here's HEAD of the dev tools JS object that represents the http request which rendered by the Network tab:
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/front_end/NetworkRequest.js
I'm wondering about the math in set endTime():
set endTime(x)
{
if (this.timing && this.timing.requestTime) {
// Check against accurate responseReceivedTime.
this._endTime = Math.max(x, this.responseReceivedTime);
} else {
// Prefer endTime since it might be from the network stack.
this._endTime = x;
if (this._responseReceivedTime > x)
this._responseReceivedTime = x;
}
},
No answers just yet, but perhaps someone with more insight into what WebKit/Chromium DevTools may see this...

Forcing AJAX request to revalidate cache with server, without reloading completely

I have a web application that lets the browser cache AJAX requests result for a long time. I have found out how to make a request that bypasses the cache entirely, when probable modifications are detected. But I would want to let the user trigger a data refresh.
In this scenario, I'd like the browser to check with the server if the cache is stalled but use it if it is not (that is, if the server responds with a 304 code). The goal is to spare the loading time because the data is huge.
The server includes the following headers in all responses:
Cache-Control: private, max-age=604800
Last-Modified: ... # actual last modification date
I managed to burst the cached object entirely in Chrome (not tested other browsers yet) by using the following HTTP headers in the request:
Cache-Control: max-age=0
If-Last-Modified: Tue, 01 Jan 1970 01:00:00 +0100
The If-Last-Modified line is the one that really has an effect. Chrome seems to ignore the Cache-Control header in the request.
I have also found that using Cache-Control: must-revalidate in the server response forces the browser to validate its cache with the server for each request.
But is there any way to revalidate for just one precise request, decided on the client-side?
Note that I'm not specially attached to doing this with HTTP headers, so any other method that I would not be aware of is welcome!

you can add a url parameter which value base on time to clean cache for just one precise request.
$.ajax({
url:"/questions?nocache="+Date.now(),
"success":function(data){
console.log(data);
}
});

Heatmap - How to add server-side code from within the browser

We use a heatmap at work (it is secure so I can't post it here and I certainly cannot give the url). Now the heatmap is a sigle image, but it is clickable on different segments - There are different icons on the map and each of them pops up a different window(So it is not just a single click event for the whole image)...
Now this map is generated by a program called Whatsup Gold, and it is definitely not Flash...
The map constantly monitors line connection activity - When an internet line goes down, the
green icon turns red. The map is refreshed every few minutes...
What I want to know: Is there a way, either using a browser plugin, or Javascript, or any other method to notify me that the status of the map has changed(any change on the map) without having to open the browser window everytime?
Here is the part of the markup of the map...(the whole map)
<a href="mappickhost.asp?map=WhatsUpTL.wup">
<img border="0" src="WUG1.jpg" ismap="">
</a>
Update:
Request and Response headers(As retrieved from Firebugs Network tab)
Request:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.5
Authorization: Basic dGxpbms6dGxpbms=
Cache-Control: max-age=0
Connection: keep-alive
Host: ***************
Response
Cache-Control no-cache
Content-Type image/jpeg
Date Fri, 17 May 2013 07:06:30 GMT
Expires Mon, 17 Jul 1980 20:00:00 GMT
Pragma no-cache
Server WhatsUp_Gold/8.0

I have added a screenshot of firebug console in firefox (press F12 to open it). I executed a xmlhttprequest (line at the bottom) and you can see (the black line) that it connected to stackoverflow. Firebug shows xhr connections in the console by default but you can select what you want to see by clicking the little arrow button to the right of the word "Console" in the tab that activates the console.
Even having the console open with StackOverflow shows that the site connects every so often to update question status and comments.
If nothing shows up there than it might show in the Net tab. It has to make a connection to somewhere to see if network is still up. If it connects to a service than xhr is likely if it just tries to download a textfile sometmes or sets the src of an image than it'll show up only in the net tab every time it checks.

We use a heatmap at work (it is secure so I can't post it here and I certainly cannot give the url). Now the heatmap is a sigle image, but it is clickable on different segments
Surely it's not just the image that's causing interaction. Plain images can't do that. If it's not Flash, then it could be JavaScript powering it. There must be some library and it could have an API. I suggest you start reading the documentation (if any).
The map constantly monitors line connection activity
This is done in a lot of ways, and the most common is polling AJAX or Web Sockets. To check this out, you can take a look at the Network Tab of the browser's debugger. If there's a supported API, you can check it out first and save the hassle of debugging the implementation.
If no API exists, inspect the requests and find a way to replicate it. Once you can replicate it or use the API, you can create your plugin or create a custom app for it.