Increasing Performance of HTML and JavaScript on Mobile Devices, Especially iOSon 16 October 2011

HTML rendering and JavaScript execution performance on iOS is still a far cry from native code. Meanwhile, I recommend that anything targeting a WebKit (or mobile browser for that matter) be optimized for the device. This article is all about optimization.

Different than Desktop

The biggest consideration is that mobile devices are underpowered by comparison to their desktop counterparts. To obtain desktop-like performance.

I am a fan of jQuery, though when it comes to mobile, I highly recommend not using it. As the mobile landscape stands right now, there are a few mobile browsers to account for, target them directly. They typically have better support for newer web technologies (CSS3, HTML 5 spec) and better support for universal native JavaScript execution (meaning less case coding necessary). Having case coding for anything Internet Explorer anything except Internet Explorer on Windows Phone is unnecessary.

zepto.js is looking promising for WebKit specific mobile browsers.

Images

Images are a big source of slowdown on iOS in particular. It is best to avoid using large images, especially as background images. More than one large image will typically cause smooth scroll and rendering issues.

Every situation is different, so there are no set rules with regard to images.

  • Keep images small
  • Tile the smaller images, if possible
  • Avoid images in excessive pixel dimensions (I believe iOS mentions 1024 pixels)
  • Avoid complex SVG graphics

Hardware Acceleration

iOS has a feature in mobile Safari (and UIWebView) that allows items to be hardware accelerated. This allows for an element to have smooth movement on the device, which is almost necessary for smooth animations. This is an easy thing to activate (see hack), with a simple CSS property translateZ(0);. Setting this property will not actually do anything visually to the element, the entire item will be rendered to the graphics processor of the iOS device.

Because it is rendering elements to an image on the graphics processor, the same image rules apply, unless a visual flash of the HTML element being rendered to an image is an acceptable visual glitch.

Hardware acceleration, on iOS specifically, has great enhancements for animations and transitions via CSS.

To determine if your elements are hardware accelerated, you can use the following line in the OS X Terminal.

CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
 

Canvas and Gradients

When dealing with the new HTML canvas element, be aware that anything that is created using a <canvas>, is converted to an image. Gradients are the same way. Making a <canvas> or a gradient too big will run into the same image issues that are mentioned above. Use each sparingly.

Fullscreen Animations

Avoid anything that will takeover the whole screen as it will render insufficiently, even with hardware acceleration on. This is especially apparent when darkening the page for use with a modal content. Mobile devices will typically render blocks of content and “chunk” on screen until the whole screen is filled. It is best to avoid anything that needs to be animated onto the screen in this way.

If this casualty of the rendering engine is an acceptable experience for you, then safely ignore this warning.

Touch Events

Use the touch events instead of the click events.

Desktop web development utilizes click, mousedown, and mouse move events to name a few. These events have corresponding touch events on mobile touchscreen devices touchstart, touchend, and touchmove.

These touch events can also be called from HTML.

  • ontouchstart
  • ontouchend
  • ontouchmove

This code will allow for development either on the desktop or on the iOS device or simulator. Detecting whether or not touching exists and then using the result to determine what type of event to use in JavaScript.

var evt = (document.createTouch != null ? "ontouchend" : "click");
element.addEventListener(evt, method, false);
 

Conclusion

This is only a handful of the things that you can do to speed up HTML on mobile devices. iOS 5 has sped up HTML and JavaScript execution quite a bit. Though not as fast as native code.

Next will be transitions in CSS for iOS.

If you enjoyed this, use this shorter link to share: http://the.ichibod.com/s/mhtml