list of practical micro optimisations and patterns to help stop dropping frames in hybrid apps

stop-dropping-frames.md

Stop Dropping Frames

Some practical tips from recent experiements in building performant hybrid mobile apps.

Approach

• Question your assumptions about behaviour and perforamnce
• Measure as much as possible
• Optimise for the most common case
• Simplify where ever possible

General JS

• Try avoid any logic inside a requestAnimationFrame Loop
• Use polyfills to patch browser/ devicce functionality at load rather than during excecution
• Query the DOM as little as possible and acche values.
• Use LoDash or (the latest) Underscores as many of loop based functions exceed native javascript performance
• Use Events over two-way-binding, and remember to unbind the events when they're no longer needed.
• Reduce complexity where ever possible
• Remove unneccessary animation (eg: when removing items from a list dynamically when they're not needed)

JS Micro Optimisations

• Use getElementByID jsPerf
  • querySelector is an average of 66% slower
• Use elem.className rather than style or setAttribute jsPerf
  • useing style is considerably slower (81%) and should be avoided if possible
• Use .call over .apply jsPerf
  • its much faster, just shy of calling it a function normally,
• Use offset over getBoundingClientRect jsPerf
  • while getBoundingClientRect is awesome if you need to cut excecution time offset is the was to go
• Use reverse for loops jsPerf
  • They're the fastest

CSS

• Animate with 3d Transforms and opacity
• Use "will-change" specifically and sparingly
• Avoid Box-shadow