Performance optimization

Problem:

Freezing the page. Glitching during scrolling.

Solution:

JS

1. Run debug tool - Performance
2. Do performance audit (try performance 6x slowdown)
3. Analyse where fps is slowdown
4. Reduce js exec time | avoid reflow/repaint

HTML+CSS

1. Analyse layout tab
2. Find elements that located out of screen | check hierarchy | reduce elements that are triggered on scroll events (special option in tab)

Angular

1. Check changeDetection
2. Check viewRef creation/deletion
3. Check how many handlers

QA:

1. How browser apply styles. When javascript is run?

• Event Loop
• https://www.youtube.com/watch?v=8aGhZQkoFbQ
• https://www.youtube.com/watch?v=cCOL7MC4Pl0

2. How browser clean up unnecessary variables? What is memory leaks?

• https://www.youtube.com/watch?v=RWmzxyMf2cE
• https://www.youtube.com/watch?v=Op52liUjvSk