Once your Angular application has the features you need, the next step is usually focused on improving its performance. Initial load time, responsiveness to user’s commands – the application has to execute quickly in order to be useful.
There are general guides to improve an angular application’s speed by order of 2 magnitudes. For example Scalyr blog post suggests the following:
- Cache DOM elements
- Use fewer watchers
- Defer element creation
- Skip watchers for hidden elements
I find these suggestions valid, but too difficult to implement right away. Instead I suggest the following steps to optimize Angular web app’s performance.
- Profile individual actions
- Measure and optimize the idle digest cycle
- Simplify watched expressions by removing filters
- Remove unnecessary watchers by replacing two- with one-way data binding
- Analyze the model update / DOM repaint cycle to identify bottlenecks
- Large work can be split into batches
- Some work can be potentially moved to the web workers
- Minimize garbage collection events
- Reuse memory instead of continuously allocating new space.
Some handy tips on improving performance with Angular.js web apps.