Repaint/Reflow

• Repaints and Reflows: Manipulating the DOM responsibly
• REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

CSS Triggers

• csstriggers
  • opacity and transform are probably best properties to change as they don't trigger Layout and Paint (just Composite)

Animations

• Use only opacity and transform CSS rules. [mithril]
  • These can be hardware-accelerated by modern browsers and yield better performance than animating top, left, width, and height.
• Avoid the box-shadow rule and selectors like :nth-child [mithril]
  • If you want to animate a box-shadow, consider putting the box-shadow rule on a pseudo element, and animate that element's opacity instead. [tobiasahlin]
• Avoid large or dynamically scaled images and overlapping elements with different position values (e.g. an absolute positioned element over a fixed element). [mithril]
• FLIP animations (First, Last, Invert, Play)

App lifecycle

• RAIL -> Load, Idle, Response, Animations