mlisook / plastic-image

A Polymer 3.0 element which adds extra plasticity to <iron-image> with support for srcset and lazy loading
MIT License
30 stars 6 forks source link

Implement offthread image rendering. #18

Open paales opened 7 years ago

paales commented 7 years ago

Since this library is already pretty awesome and I thought it could use more awesome features: Render Images Off Thread.

Decoding images for use with a canvas is pretty common, whether it’s to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

https://developers.google.com/web/updates/2016/03/createimagebitmap-in-chrome-50 https://github.com/GoogleChrome/offthread-image

Decoding an image Offthread will reduce scroll jank when loading the page because the main thread will have to do less.

Example how to implement in a custom element: https://github.com/GoogleChrome/offthread-image/issues/1 https://github.com/robdodson/offthread-image/commit/9e517a0fe6ae68d3bc857c7cc5165d57011ef446

I don't have any benchmarks so I can't say if this will actually improve performance, but it might be worth considering.

mlisook commented 7 years ago

Well, that is really cool.

I do want to maintain plastic-image as a superset of iron-image so there is a bit of complexity dovetailing with iron-image's 2 existing ways of displaying the image (img tag and background-image of the containing div) and adding a new way by inserting a canvas into the template. Also, iron-image has a fair amount of state tracking that plastic-image doesn't really have to deal with.

I certainly think it's worth an experimental build.

mlisook commented 7 years ago

@paales In case you missed it ... from the chomium project: Intent to Implement: image async attribute