932008 - (Find-frequ-Rredraws) Find Frequent Redraws in a Recording

Status: RESOLVED WONTFIX

(DevTools :: Performance Tools (Profiler/Timeline), defect)

Description

[Axel Kratel]

As a web App developer, I'd like to easily find frequent redraws within a recording and be able to drill down to the DOM objects and/or JS that are related to the frequent redraws so that I can optimize my CSS and/or JS related to the redraw and potentially eliminate it.

Note: we currently have a way to graphically show the frequent redraws via the highlighter, but the highlighter doesn't necessarily show which DOM element is involved, nor does it easily show the JS. It would be easier to do this for example via a flame chart that can be filtered for events that are redraws and sorted in order of most # of events to least number of events. 

Related User Story: 931968: "Frame Rate Drop Root Cause: DOM" which also requires the ability to map back to the DOM.

for example, via such a sortable flame chart, we could show that one particular DOM node caused 220 paint events during the last minute.

Comment 1

[Jordan Santell [:jsantell] [@jsantell]]

I think the new performance tools get close to this, but maybe lack the ability to map directly to the offending DOM element(s) -- like highlighting the corresponding DOM element when selecting a specific marker, for example? What's remaining here?

Comment 2

[Greg Tatum [:gregtatum]]

I believe this is no longer relevant for current planned work.