Fragments 2019

Uploading images to user reviews came up as yet another task. But once I delved into the challenges and areas of improvement, I found it to be quite challenging. EXIF, resampling, encoding to other formats all on the client !!! And doing all of this while keeping the main thread free, thats the challenge I’m solving. Bonus: some WebAssembly magic too !!

Outline

I wanted the process of uploading images on the web to be as good as native in terms of capability and smooth/performant as well. Based on our requirements, when we upload an image, the application was supposed to show a thumbnail which should take into account the EXIF orientation factor so that the thumbnail is shown in thr correct orientation. The next big challenge was to reduce the overall upload size during submitting the file to the server. Here we resorted to a Hermite resample filter that allowed us to further reduce the payload size. Since a user could upload maximum of 5 images in one go, we wanted to keep the main thread as free as possible so all of the above-mentioned tasks actually run in a worker. Using transferrables to reduce the time invokved in an othetwise structure clone postMessage was another area of investment. Moving all work into. a worker gave us the opportunity to work on the new amazing OffscreenCanvas API which enabled us to move all computations to the worker thread. Finally a final optimisation (WIP) is to encode our images to webp format to check if the payload size could be further reduced. Since browsers do not support encoding of images as a native construct, we resorted to Webassembly for achieving the desired result.

Requirements

JavaScript, Web Worker, PostMessage, Canvas, Browser APIs performance costs

Speaker bio

I work as a senior enginner in Flipkart Lite team. I love experiments and performance.

Links

• Flipkart.com