perf: Improve collection-repeat image performance on iOS

[ajoslin]

Problems:

• Setting an un-cached url to an img src gives a 50-200ms freeze on an iPhone 6.
• iOS UIWebView doesn't properly cache remote image urls. Even after setting once to a url, setting again to the same url will cause a noticeable freeze.

Solutions:

• Use a web worker to fetch image srcs, convert them to base 64, and give them back as a data-uri.
  • This works.. almost. Once an image has been set to a data-uri once, the WebView does properly cache the uri and reloads it instantly when it's set the next time.

The last solution needed is a way to cache the data uri into the webview beforehand. This will require some experimentation, but it's doable.

[wedgybo]

Just wanted to leave a link to something I looked at previously. It might be worth benchmarking against your web worker code to see how it compares. https://github.com/mallzee/cordova-collection-repeat-image-plugin

[felquis]

I tried to create something like this in the past, the main idea was to create a directive to use in wherever I want to use with src or ng-src like:

<img ng-src="my-awesome-pic.png" ion-utils-cache-base64>

And store the base64 in a variable in a some factory or something like that. Just sharing my thoughts on this.

[saniyusuf]

HI @ajoslin I have a component that does something similar that caches the data URI base64string of an image for Ionic apps. I have done that part and are about to integrate the web worker .

@felquis exactly what you are explaining is what I have worked on with some success.

https://github.com/saniyusuf/imagenie

[ajoslin]

Thanks all!

I also tried the ng-src route. It just wasn't a convincing enough improvement for us to make it part of the framework yet.

I'll look at everything you guys have linked. Thanks a lot. The Cordova plugin route is especially interesting...

[saniyusuf]

Any update on this?

[ajoslin]

We've been at ng-conf and only just returned. I'll be looking into it this week.

[saniyusuf]

HI Andrew,
I am really keen to be involved with the web worker. I have put my own
implementation on hold to see what we come up with.

On 9 March 2015 at 15:19, Andrew Joslin notifications@github.com wrote:

We've been at ng-conf and only just returned. I'll be looking into it this
week.

Reply to this email directly or view it on GitHub
#3194 (comment).

Kind Regards
[image: photo]
Sani Yusuf
Co-Founder / CTO, Slapic
http://github.com/saniyusuf
http://stackoverflow.com/users/1714088/sani-yusuf
http://about.me/saniyusuf
http://linkedin.com/in/saniyusuf https://twitter.com/saniyusuf
Get a signature like this:
http://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9
Click
here!
http://ws-stats.appspot.com/r?rdata=eyJydXJsIjogImh0dHA6Ly93d3cud2lzZXN0YW1wLmNvbS8/dXRtX3NvdXJjZT1leHRlbnNpb24mdXRtX21lZGl1bT1lbWFpbCZ1dG1fY2FtcGFpZ249cHJvbW9fNDUiLCAiZSI6ICJwcm9tb180NV9jbGljayJ9

[ajoslin]

Working on this today.

[saniyusuf]

Any idea how you intend to do the conversion in the worker since worker
does not have the document object

[ajoslin]

We don't need the document object. I already know how to convert the worker to base64 (I'll have code up later today).

The problem is caching the image before it hits the visible DOM.

[ryanricig]

Hey - also anxiously awaiting this one, we've got an infinite list of images (like Facebook timeline) of unknown heights (until the images load). Currently we've got an ng-repeat being used but we are seeing some memory issues. So we have switched to the new collection-repeat, but as you note, there is a choppy stop-n-go type nature to the scrolling. Excited to see what you guys come up with.

[felquis]

What if we use a plugin (like file-transfer) to literally download the image, and use it as a local image... I think it probably load faster than always reaching an external URL.