💡 Would you like more free lessons? Please subscribe on YouTube to show your support.
To understand the cause of a performance issue on YouTube.com.
On YouTube.com there is a search box at the top of the page. When you start typing, you trigger autosuggest. Let's profile this.
As a reminder, here are the steps to follow when investigating front-end performance issues.
Here is the performance profile of activating the search dropdown.
Zoom into one of the large "blocks" or "peaks".
We can confirm this period of time was slow, the frame took 316 ms to execute, and ran at 3 FPS (1000 ms / 316 ms).
If you click on one of the slow 'events' which occurred (Recalculate Style), DevTools is able to display the code responsible for this slow event. The link is present in the summary pane, click on it.
DevTools takes you to exact point in code which triggered the event. As the code is minified, you should pretty print it.
From here, the process is not always scientific. You should use your experience & common sense to figure out what could be causing the performance bottleneck.
a.classList ? a.classList.remove(b) : g.A(a, b) && (a.className = (0))
One thing which stands out is: CSS classes are being modified on an element.
Set a breakpoint on the relevant line of code. When this portion of code executes:
a.classList.remove(b), we need to understand what variables
b are exactly.
Trigger the action on the YouTube homepage again, this cases the breakpoint to trigger. When paused at a breakpoint, DevTools automatically detects variables
b as variables of interest. Because of this, the variables are revealed in the scope pane.
At this point, it should be clear that: variable
a is the HTML element in the document, and variable
b is the classname
'no-focus-outline' which is applied/removed.
When the search dropdown is triggered, a class of
'no-focus-outline' is removed from the HTML element.
We can perform a project wide code search (Cmd + Alt + f) from the Sources Panel to understand in what ways a class of
no-focus-outline affects the page.
The performance summary pane you saw at the start may start to make sense.
By changing the class name of an element very high up in the DOM, it has the potential to affect a large number of elements. In this case: