Add styleDuration, layoutDuration, forcedStyleDuration, and forcedLayoutDuration

[yoavweiss]

This PR adds the styleDuration and layoutDuration attributes to PerformanceLongAnimationFrameTiming and the forcedStyleDuration and forcedLayoutDuration attributes to PerformanceScriptTiming.

This would enable developers to distinguish between the style calculation times and their layout times, which typically have very distinct reasons, and therefore different solutions.

It also includes a couple of tiny unrelated bikeshed fixes.

Currently developers can collect their overall style+layout costs using something like the following:

const totalStyleCost = async () => {
  return new Promise(resolve => {
    let total = 0;
    (new PerformanceObserver(entryList => {
      const entries = entryList.getEntries();
      for (const entry of entries) {
          if (entry.paintTime) {
              total += entry.paintTime - entry.styleAndLayoutStart;
          } else {
              total += entry.startTime + entry.duration - entry.styleAndLayoutStart;
          }
          for (const script of entry.scripts) {
              total += script.forcedStyleAndLayoutDuration;
          }
      }
      resolve(total);
    })).observe({type: "long-animation-frame", buffered: true});
  });
}

This feature will enable developers to collect their overall style calculation time and layout time separately, using:

const totalStyleAndLayoutCost = async () => {                                              
    return new Promise(resolve => {                                                                                                                                                                                 
      let totalStyle = 0;                                                                                                                                                                                           
      let totalLayout = 0;                                                                                                                                                                                          
      (new PerformanceObserver(entryList => {                                                                                                                                                                       
        const entries = entryList.getEntries();                                                                                                                                                                     
        for (const entry of entries) {                                                                                                                                                                              
            totalStyle += entry.styleDuration;                                                                                                                                                                      
            totalLayout += entry.layoutDuration;                                                                                                                                                                    
                                                                                                                                                                                                                    
            for (const script of entry.scripts) {                                                                                                                                                                   
                totalStyle += script.forcedStyleDuration;                                                                                                                                                           
                totalLayout += script.forcedLayoutDuration;                                                                                                                                                         
            }                                                                                                                                                                                                       
        }                                                                                                                                                                                                           
        resolve({totalStyle, totalLayout});                                                                                                                                                                         
      })).observe({type: "long-animation-frame", buffered: true});                                                                                                                                                  
    });                                                                                                                                                                                                             
  }

That would enable them to evaluate e.g. if they need to opt in for cheaper/simpler CSS selectors and reduce their overall number of delivered rules (high style costs), or simplify their DOM structure and
reduce layout-triggering property usage (high layout costs).

---

Preview | Diff

[noamr]

Hmm need a bit more to go on here.

[yoavweiss]

Agree!

[yoavweiss]

Thoughts on how we can do that, given the vagueness of the load-bearing "resolved value computed" in https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle?

[emilio]

@yoavweiss This would be a bit weird, I think, with some of the new features that interleave style and layout, right? E.g., consider a container query.

Should the layout we need to do to figure out the container size be counted as style or layout?

Similarly, should the styling we do as a result of a container resize be counted as style or layout?

[yoavweiss]

Should the layout we need to do to figure out the container size be counted as style or layout?

I think it should count as layout.

If we increased the duration of layout (e.g. by introducing more complex styling outside the container), this number is likely to go up. Therefore it should be accounted for as "layout".

Similarly, should the styling we do as a result of a container resize be counted as style or layout?

It should count as style, with similar reasoning.