Data-Uri's and Caching

Data-URI's and caching

Data URIs are nothing more than text in the form of Base64-encoded binary data, that's embedded within your HTML and CSS files. So yes, they will be downloaded as part of your HTML and CSS files every time they're requested, unless those files are themselves cached.

If you keep your data URIs to just your stylesheets and send proper cache headers, caching your data: images together with your CSS shouldn't pose issues.

How is it possible inline base64 data uri (image) is cached?

When I repeat your test Chrome makes two requests. The first one fetches the HTML page and is a normal request. The second fetches the image and is served from memory. That makes sense as the image was included in the first request embedded in the HTML itself.

In other words inlined images are not cached unless the page they live in is cached.

Will my browser cache favicons from data URL

No. Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded.

Source

REST and URI Caching

Remember as Tim Berners-Lee said, "cool URLs don't change". Once the server hands out a URI to the client, it is now the server's job to keep the URI working in the future by (for instance) sending a Moved-Permanently response in case the URI changed and someone requests the old one.

This is actually what encourages many to design opaque URIs, such as based on database ids or timestamps, rather than using some human-readable property of the resource in the URI. Anything that people understand, they will want to change.

Why IE is caching data from same URI call?

Well you can pass one new parameter in your URI like timestamp which will make each call a unique url call so IE 9 will not cache it.
or if you are using Asp.net MVC then you can make changes in your global.asax file to switch of caching at browser level like this.

protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
           // HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, tokenId");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }

---

Related Topics