Improving HTML5 app performance

These best practices can help you to develop more efficient and more responsive HTML5 apps.

  1. Avoid Canvas.

    Canvas and SVG elements aren't optimal for use on mobile and embedded platforms, because proper hardware acceleration for these elements hasn't yet been finalized.

  2. Avoid 2D transformations.

    Use 3D instead. For example, instead of translateX(x) use translate3d(x,y,z). This practice forces hardware acceleration of the translation. You can use similar methods for most other transformations. Avoid animating with JavaScript libraries!

  3. Avoid opacity, rounded corners, and gradients.

    These are a significant drain on performance when they're redrawn often. If used sparingly and mostly on static objects, they shouldn't impede performance, but if you mix these elements with animations, buttons, or anything that gets redrawn often, performance suffers. Consider using images instead of heavy CSS.

  4. Remove elements from the DOM when modifying them.

    This technique is especially helpful when you're updating several DOM fields at once. For example, if you're scrolling through a list of 100 contacts and you want to refresh them, updating them one by one causes the list to be redrawn 100 times. But if you remove the entire list, update the contacts in memory, and then add the list again, this does only two redraws.

  5. Hide elements you don't need.

    For instance, adding display:none to elements that don't need to be displayed prevents them from being rendered.

  6. Avoid libraries intended for desktop use.

    Some JavaScript libraries are designed for use on a desktop browser with a powerful CPU. Try to limit the number of third-party JavaScript libraries included in your app or try to seek out versions optimized for mobile use.

  7. Use image sprites.

    These are useful for preloading active element states (e.g., buttons with a "pressed" state).