Guest post from Marc Lapierre, HMI developer for the QNX CAR 2 application platform
Have you seen photos of the QNX reference vehicle? If so, you've already caught a glimpse of the rich user experience that HTML5 can bring to car infotainment systems. The vehicle's head unit, in particular, makes extensive use of HTML5.
The members of the QNX CAR 2 team have considerable experience with HTML5, and we follow a number of “best practices” to achieve optimal performance. If you use HTML5, here are 8 techniques proven to help applications perform as smoothly and responsively as possible:
2. Use opacity, rounded corners, and gradients sparingly — If you use these elements sparingly and on mostly static objects, you should achieve decent performance. But when you mix them with animations, buttons, or anything else that gets redrawn often, performance will suffer. Consider using images for framing rather than building components with many specific CSS attributes.
3. When modifying elements, remove them from the DOM — This technique is especially helpful when updating several DOM fields at once. For example, if you are scrolling through a list of 100 contacts and want to refresh them, updating them one by one will cause the list to redraw 100 times. But if you remove the entire list, update it in memory, and then re-add it, you will incur only 2 redraws.
4. Avoid canvas and SVG — Hardware acceleration for canvas isn’t always available in WebKit or other browsers, and might incur performance hits in some cases. Likewise, SVG isn’t always accelerated on mobile and embedded platforms.
5. Hide elements you don’t need — Adding display:none to elements that don’t need to be displayed will prevent them from being rendered.
6. Don’t link across pages — When developing websites, it is common to link across pages. But in mobile applications, this approach detracts from the user experience — when using an app, it can be jarring to see the white screen that often appears when moving from one page to another. For a better UX, use AJAX requests to pull in data dynamically, and update your interface accordingly when the result is received.
8. Use image sprites for pre-loading active element states — For example, using sprites for buttons with a “pressed” state allows you to have the alternative state pre-cached and ready to display, rather than having to load or draw assets on demand.
What about you? Do you have any resource-saving or performance-optimizing techniques that you’d like to share?