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
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
How to Toggle Two CSS ':Checked' Pseudo-Classes with One Click
Css: How to Target ::Slotted Siblings in Shadow Dom Root
Sass Mixin Error for Ie Specific Filters Like -Ms-Filter
Internet Explorer 11 and Supported Web Fonts
Twitter Bootstrap Remove Table Row Highlight with Row Stripes
How Often Is the Default Font Size in the Browser Not 16Px
Named CSS Grid Lines with SCSS
How to Change the CSS of Color of Select2 Tags
Macos Chrome Horizontal Scrollbar Not Disappearing
Webpack 4: Mini-Css-Extract-Plugin + File-Loader Not Loading Assets
CSS - Vertically Center an Image Within a Floated Div
Css/Js Bundle in Single File in MVC When Publish with Release Option
Rails Assets Not Precompiling, CSS Looks Different in Production