Week 8:Measuring the Performance Impact Using Chrome DevTools

Recording load performance

Recording load performance to analyze the performance of a page as it’s loading, as opposed to running.

1. Open chrome incognito mode as it ensures chrome runs in a clean state
2. open Devtools open the performance
3. Click Reload page
4. DevTools record performance metrics while the page reloads and then automatically stops recording a couple of seconds after the load finishes

Recording runtime performance

Recording runtime performance to analyze the performance of a page as it’s running, as opposed to loading.

1. Click the Performance tab in DevTools.
2. Click Record
3. Click around or touch things that would make mb slower

More about how to use the performance tab on chrome devTools can be seen here https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference

In the Frames section, when hovering mouse over one of the green squares. DevTools shows the FPS for that particular frame. Each frame is actually expected to be below the target of 60 FPS.

The summary tab. When no events are selected, this tab shows you a breakdown of activity. The page spent most of its time scripting. The goal is to reduce the amount of time spent doing scripting work.

The Main section and Summary tab only display information for the selected portion of the recording.

so clicking on the animation frame fired ,The Summary tab now shows you information about that event. The reveal link is alos shown. Also the tween.min.js link.Clicking that jumps you to the relevant line in the source code.

View main thread activity

Use the Main section to view activity that occurred on the page’s main thread.

After recording musicblocks ,DevTools provides three tabular views for analyzing activities. Each view gives a different perspective on the activities:

• When you want to view the root activities that cause the most work, use the Call Tree tab.
• When you want to view the activities where the most time was directly spent, use the Bottom-Up tab.
• When you want to view the activities in the order in which they occurred during the recording, use the Event Log tab.

Self Time represents the time directly spent in that activity. Total Time represents the time spent in that activity or any of its children.

Click Self Time, Total Time, or Activity to sort the table by that column.

Use the Filter text box to filter events by activity name.

By default the Grouping menu is set to No Grouping. Use the Grouping menu to sort the activity table based on various criteria.

Click Show Heaviest Stack

to reveal another table to the right of the Activity table. Click on an activity to populate the Heaviest Stack table. The Heaviest Stack table shows you which children of the selected activity took the longest time to execute.

From this it is easier to trace activities that take longer time to execute and know how best to improve it.

Runtime performance test with more than 1 start block); inclusion of graphics with the above; inclusion of some special musical effect with the above: intervals, chorus, etc.

From the above their are some loops ,setimeouts etc that actually takes a longer period to execute