Menu
I'm trying to understand how the speed of a D3.js application (an interactive visualisation of data) could be improved by analysing the Timeline data in Chrome Developer Tool.
I'm dragging the data bars around, them being moved (SVG transformations) on mousemove events.
Timeline tells me that 50% of CPU time is being used by "System" processes (the rest being "Scripting", "Rendering", "Painting", and "Idle").
What exactly is "System", and what could be the problem, if it takes 50% of time?
By the way, if I'm dragging by holding the right mouse button not left, the response is much better, and "System" uses only about 20% of time.
2020 note: in old Chrome the "System" category was named "Other".
615
# Take a snapshot They are transferred to the DevTools on demand, when you click on the snapshot icon to view it. Note: Only reachable objects are included in snapshots. Also, taking a snapshot always starts with a garbage collection.
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
To view the request or response HTTP headers in Google Chrome, take the following steps : In Chrome, visit a URL, right click , select Inspect to open the developer tools. Select Network tab. Reload the page, select any HTTP request on the left panel, and the HTTP headers will be displayed on the right panel.
I asked me the same question two years ago. I didn't know what the grey bars respectively the System category stand for.
It was hard to find an official answer because the only thing the Chrome DevTools Docs said was "Activity that was not instrumented by DevTools". But this statement was removed since there is a new documentation.
Some helpful info: Chrome Dev Tools: Timeline - White Bars
So I checked out the Chromium project and searched the devtools code for an answer. I found out that the System category contains all activities that not belonging to the categories Loading, Scripting, Rendering, Painting and GPU: see the list of all record types.
Filtering this list against another fragment of Chromium's source that assigns types to categories we can see Timeline shows all record types that are unassigned or are assigned to the System category as grey bars in the System category:
2020 note: in old Chrome the "System" category was named "Other".
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
