PDA

View Full Version : [OPEN] [#584] Feature request - support data URIs for your icons (and maybe tools?)



anup
Oct 09, 2014, 10:19 AM
Hi,

Just wondering if it may be possible to support rendering the icons as data URIs rather than separate requests to the web resource or file (depending how you load the resources).

Main reason: reduce the number of HTTP requests.

Potential drawbacks:

1) It can increase the payload size by about 30% per image, but because I am suggesting this for your icons (and maybe tools) those icons are small so additional cost may be okay.

2) On mobile devices there is some evidence it can actually be slower than CSS sprites: http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

About the second drawback: I guess at the moment icons are not rendered as sprites anyway so hard to compare for Ext.NET itself. But it may be worth supporting this as a configuration option in the resource manager/web.config because as Ext.NET 3/Ext JS starts to support mobile devices better, this could be an issue (although it is a moving target and mobile browsers may get better in this area in coming months/years anyway!)

There may be other drawbacks I have not yet considered...

Thanks!

geoffrey.mcgill
Oct 09, 2014, 4:33 PM
Hi Anup,

That's an interesting suggestion to use Data URI's for the icons. That technique had never crossed my mind. It makes a lot of sense.

I'll do some research and get back to you.

geoffrey.mcgill
Oct 09, 2014, 5:00 PM
It appears I've run into a gotcha.

A Data URI is not cached by the browser, which makes sense.

The string of chars must be pushed to the browser with each request, and re-processed by the browser with each request.

By pointing to the WebResource location, the images are automatically cached (long expiry) by the browser and should not be requested again.

It would be interesting to run some tests to determine a performance benefit of using Data URI's. I could see a real advantage in certain situations, and probably a disadvantage in others.

I guess that's where having the option to configure your app for either technique would be ideal. The setting would probably have to be a global config; either fetch all icons as http requests, or all as Data URI's.

I will continue to investigate.

Thanks again for the suggestion.

anup
Oct 13, 2014, 5:33 PM
Yeah. I think in your usage pattern, if I understand right, you generate the request for these images as needed per request, so it may not be so easy to make as cacheable.

In my case I can put these data URIs in my own CSS which is aggressively cached far into the future. While there is potentially a cost for browser to re-render the image, that should be small because the images are quite small, so it is a similar cost to rendering an image fetched from an image cache too, at least when the size is small.

It may be that the way you provide icon resources means you can't really use data URIs efficiently unless you generated a rather bloated CSS file with them in it, which also may not be ideal...!

Daniil
Nov 03, 2014, 6:24 PM
We've just discussed this at our meeting. Unfortunately, it cannot be implemented at the moment.

Though, we keep it in mind and, hopefully, we will implement something at some point.
https://github.com/extnet/Ext.NET/issues/584