Say you have a web application that makes various AJAX requests for data. The server does a good job of supporting HTTP caching by setting the Expires and Cache-Control headers in the response so that the browser can cache these. Cool.

Sometimes there’s a need to ignore the cached response and go back to the server. A simple use case would be to support a “Refresh” button in a table. A real refresh won’t happen just making an XHR request to the table’s URL, since the browser will faithfully (correctly) return the cached content. How can the cache be invalidated via JavaScript?

As you can imagine, each browser does it differently. The HTTP RFC specifies that the Cache-Control header on the request can be used to invalidate/bypass caches, including proxy caches. Oddly, Firefox doesn’t implement this, but has a custom API. IE relies on a side-effect of setting one of the conditional-GET headers, which isn’t too bad, I guess.

Safari/Chrome (W3C Standard)

xhr.setRequestHeader('Cache-Control', 'no-cache');

Cache Revalidation/Reload in HTTP

IE (8 & 9, not sure about 10)

xhr.setRequestHeader('If-None-Match', '_A_DUMMY_ETAG');

Thanks to stackoverflow.com for this one.

Firefox/Gecko

xhr.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;

MDN Link

After changing over my Mac to use an SSD (Flash) boot drive, I applied some of the optimizations described here and other places.

One folder I’ve been trying to move off the SSD and back onto the “regular” HD is my temp directory. OSX now uses magic folders in /private/var/folders, which change names for security.

It’d be great to tell OSX to use a different folder, since temp directories are written to so often and the files are transient. Does anyone know the mystery OS setting? If I figure it out, I’ll post the answer.

Update:

It looks like the consensus is I am wrong about temp directories being on a platter HD. See the responses to my question on macintouch.com.

If you need a “quick and dirty” way to count DOM elements, you can use document.querySelectorAll() to get a quick count of any number of elements. For example:

> document.querySelectorAll('table, tr, td, div').length

> document.querySelectorAll('img').length  

The first outputs the number of tables, table rows, table cells, and divs in the document. The second is the number of images.

I used these to compare how ExtJS 3.3 and ExtJS 4.1 rendered the same content. The basic grid sample for ExtJS 4.0.7 needs about 540 elements (tables, divs, spans and images). The same example for ExtJS 3.4 needs 607 elements. That’s a decent reduction.

I’m starting to play with running JavaScript on the server using Rhino (built into Java 1.6). I think being able to run the same code in both the UI (web browser or iOS UIWebView) and the server in Java could be a real benefit.

To make this work, it’s important that the programming model that these scripts run in doesn’t assume to much about the environment. So allowing the scripts to access Java objects directly isn’t ideal - it makes the scripts pretty non-portable.

For example, if you have a Java object that has bean properties which are String or Boolean, you’d want the object in JavaScript to have string or boolean primitives. That’s not how Rhino is configured by default. It exposes the full java.lang.String and java.lang.Boolean object to script, which is not good for portability.

Read more …

I’ve put it off too long - it’s time to start blogging. My challenge is to post regularly and say useful things. Hopefully both.