34

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

1
  • I also want to know :D Commented Oct 20, 2016 at 10:41

1 Answer 1

40
+50

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

3
  • Thanks for sharing that in-depth knowledge! If I got this right, every event which is not defined in RecordType will be summed up as Other, correct? Do you have any clue, what that could possibly be? And why are values that high for some activities like D3's dragging? Commented Oct 21, 2016 at 9:48
  • Hi, no, sorry. The list shows all available record types. But not all record types are assignable to Loading, Scripting, Rendering, Painting or GPU. So there is another category Others. I've added the assignment of the events to the categories to my previous answer. Commented Oct 21, 2016 at 12:24
  • Would you please update the links to permalinks instead of referencing master? These links are now broken
    – Max Coplan
    Commented Jun 27, 2023 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.