javascript - What does the "System" category of records mean in Chrome Timeline profiling tool?

Question

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".

Answer 1

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:

• ActivateLayerTree
• CommitLoad
• CpuProfile
• DecodeLazyPixelRef
• DisplayItemListSnapshot
• DrawLazyPixelRef
• ImplSideFling
• InputLatencyMouseMove
• InputLatencyMouseWheel
• JSSample
• JitCodeAdded
• JitCodeMoved
• LatencyInfoFlow
• LayerTreeHostImplSnapshot
• LayoutInvalidationTracking
• LazyPixelRef
• MarkLCPInvalidate
• NeedsBeginFrameChanged
• PictureSnapshot
• Profile
• Program
• Rasterize
• ResourceMarkAsCached
• ScheduleStyleInvalidationTracking
• SetLayerTreeId
• StreamingCompileScript
• StyleInvalidatorInvalidationTracking
• StyleRecalcInvalidationTracking
• Task
• TracingSessionIdForWorker
• TracingStartedInPage
• UpdateCounters
• V8Execute
• V8Sample

2020 note: in old Chrome the "System" category was named "Other".