Building Hybrid Android Apps with Java and JavaScript

Chapter 7. CSS, DOM, and JavaScript: Optimization Tips and Useful Snippets

In this chapter, we will explore how to build snappy mobile applications by taking advantage of high-performance optimization techniques while avoiding memory leaks. Performance is a big focus for mobile applications, as smartphones have limited resources.

Image garbage collection

The images in the view may not be immediately garbage collected when you remove the DOM container element. In order to release the previous image reference, you can assign a 1x1 pixel transparent data image src attribute before safely removing the image object. You can encode this image as base64 to avoid a network request.

function removeImage(image) {
        image.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
        setTimeout(function () {
                delete image.src;
                image = null;
        }, 0);
}

Data URI images

Use of base64 encoded data images is very popular in mobile apps. It involves inlining your image data straight into the HTML or CSS page. It allows images to load instantly with your web app’s HTML page—something very important if you want your app to function like a native app. An additional benefit is that you can easily retrieve relatively small images like the avatars within the JSON strings from the Java layer. If you want to create data URI images manually, you can use the following command in your terminal window:

openssl base64 -in image.png

Preloading images

Perhaps some of your web data needs to come from a dynamic ...