Goal

• min max frames per second
• Memory Leak
• JS Heap
• min- max Handlers
• Number of nodes
• % Idle time
• % script
• assets Loading time
• css profiling
• macilisious
• Memory Foot print
• how much memory the reachable objects on your page are using(JS memory/Heap memory)
• Maximum frame time
• Max time taken by a event handler

Things to do before ,while doing the profiling

• Keep recordings as short as possible
• Avoid un necessary actions
• Disable Extensions or make use of Incagnito mode
• make use of garbage button at the begining and at the end
• Disable the browser cache

Some Features of DevTools

Capture:

• JS Profile
• Screenshot
• Paint
• Memory
• Heap Snapshots
• Task Manager

Definations

• Flame Chart
• FilmStrip
• Detached nodes These nodes are referenced by the code but do not exist in the DOM tree or they are not attached to the dom tree, so they're detached.
• DCL DOMContnetLoaded event
• FCP First Contentful Paint
• FMP First Meaningful Paint
• onLoad- Event in Flame Chart.

React dev extension tool