Understanding process breakdown

Web Performance Discuss Test Results
1

Dear community,

I need your help to have a better understaing of what process breakdown categories means.

I would like to have a link to documentation or at least a summary of these categories:

[list]
[]Scripting
[]Rendering
[]Loading
[]Painting
[/list]

And these events:

[list]
[]Program
[]Function Call
[]Layout
[]Evaluate Script
[]Recalculate Styles
[]CompositeLayers
[]ResourceReceiversData
[]Paint
[]GCEvent
[]Timefire
[]PaintSetup
[]EventDispatch
[/list]

Thank you all in advance for answering.

TechED

2

Those are just a breakdown of the Chrome Timeline. The dev tools docs are probably your best resource for that: Chrome DevTools - Chrome Developers

3

Hi Webpagetest Team, I have found some differences between the results shown in the timeline view and the ones given directly on the Chrome Dev Tools. I understand the Breakdown timeline may not show all the detail information, but 1. why is the “Composite Layout” task not appearing like the scripting, rendering and paint tasks? Furthermore, 2. I have noticed that above a “click” event task there is always a “Animation Frame Fired” task. When i record the same event directly on Chrome dev tools this task does not appear(at least not over the “click” event task).

Here the timeline example:
http://www.webpagetest.org/chrome/inspector-20170320/inspector.html?experiments=true&loadTimelineFromURL=/getTimeline.php?timeline=t:180827_N9_720154e7d7d6a8cf334d65ea92404075,r:1,c:0,s:2
Here the full test:

Thanks a lot!! :slight_smile: