[RPP] Apply optimizations to statsForTimeRange

This trace is of the performance panel: https://trace.cafe/t/zP4zA7sNLb.
One thing of interest is that `statsForTimeRange` takes 3.5s, which is
33% of the `loadingComplete` callback.

One thing that jumped out to me is that 33% of `statsForTimeRange` is
spent inside `eventTimingsMilliSeconds`. The work this method must do
is simple, but it calls another method in an effort to DRY the code.
This creates an extra object allocation. Additionally, it uses the
timing tag and conversion functions multiple times. Given these are
called 100,000s of times during the processing of this trace, that adds
up. Un-DRYing the code and should have a good effect.

Additionally, `statsForTimeRange` can get away with calling
`eventTimingsMicroseconds` instead of `eventTimingsMilliSeconds`, which
saves 3 divisions per trace event.

Bug: None
Change-Id: Ie7ace912ebaac6c879233a809223710264081ed0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6154635
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/trace/helpers/Timing.test.ts

@@ -64,18 +64,6 @@ describeWithEnvironment('Timing helpers', () => {
     });
   });
 
-  it('eventTimingsSeconds returns the right numbers', async () => {
-    const event = {
-      ts: 100_000,  // 100k microseconds = 100ms = 0.1second
-      dur: 50_000,  // 50k microseconds = 50ms = 0.05second
-    } as unknown as Trace.Types.Events.Event;
-    assert.deepEqual(Trace.Helpers.Timing.eventTimingsSeconds(event), {
-      startTime: Trace.Types.Timing.Seconds(0.1),
-      endTime: Trace.Types.Timing.Seconds(0.15),
-      duration: Trace.Types.Timing.Seconds(0.05),
-    });
-  });
-
   describe('timeStampForEventAdjustedByClosestNavigation', () => {
     it('can use the navigation ID to adjust the time correctly', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');

front_end/models/trace/helpers/Timing.ts

@@ -79,25 +79,16 @@ export interface EventTimingsData<
 
 export function eventTimingsMicroSeconds(event: Types.Events.Event): EventTimingsData<Types.Timing.MicroSeconds> {
   return {
-    startTime: event.ts,
-    endTime: Types.Timing.MicroSeconds(event.ts + (event.dur ?? Types.Timing.MicroSeconds(0))),
-    duration: Types.Timing.MicroSeconds(event.dur || 0),
+    startTime: event.ts as Types.Timing.MicroSeconds,
+    endTime: (event.ts + (event.dur ?? 0)) as Types.Timing.MicroSeconds,
+    duration: (event.dur || 0) as Types.Timing.MicroSeconds,
   };
 }
 export function eventTimingsMilliSeconds(event: Types.Events.Event): EventTimingsData<Types.Timing.MilliSeconds> {
-  const microTimes = eventTimingsMicroSeconds(event);
   return {
-    startTime: microSecondsToMilliseconds(microTimes.startTime),
-    endTime: microSecondsToMilliseconds(microTimes.endTime),
-    duration: microSecondsToMilliseconds(microTimes.duration),
-  };
-}
-export function eventTimingsSeconds(event: Types.Events.Event): EventTimingsData<Types.Timing.Seconds> {
-  const microTimes = eventTimingsMicroSeconds(event);
-  return {
-    startTime: microSecondsToSeconds(microTimes.startTime),
-    endTime: microSecondsToSeconds(microTimes.endTime),
-    duration: microSecondsToSeconds(microTimes.duration),
+    startTime: (event.ts / 1000) as Types.Timing.MilliSeconds,
+    endTime: (event.ts + (event.dur ?? 0)) / 1000 as Types.Timing.MilliSeconds,
+    duration: (event.dur || 0) / 1000 as Types.Timing.MilliSeconds,
   };
 }
 

front_end/panels/timeline/TimelineUIUtils.ts

@@ -2066,9 +2066,9 @@ export class TimelineUIUtils {
       },
       parsedTrace: Trace.Handlers.Types.ParsedTrace, event: Trace.Types.Events.Event): boolean {
     const events = parsedTrace.Renderer?.allTraceEntries || [];
-    const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(event);
+    const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
     function eventComparator(startTime: number, e: Trace.Types.Events.Event): number {
-      const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(e);
+      const {startTime: eventStartTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(e);
       return startTime - eventStartTime;
     }
 
@@ -2081,7 +2081,7 @@ export class TimelineUIUtils {
     if (endTime) {
       for (let i = index; i < events.length; i++) {
         const nextEvent = events[i];
-        const {startTime: nextEventStartTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(nextEvent);
+        const {startTime: nextEventStartTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(nextEvent);
         if (nextEventStartTime >= endTime) {
           break;
         }
@@ -2105,7 +2105,10 @@ export class TimelineUIUtils {
         for (const categoryName in total) {
           aggregatedTotal += total[categoryName];
         }
-        total['idle'] = Math.max(0, endTime - startTime - aggregatedTotal);
+
+        const deltaInMillis =
+            Trace.Helpers.Timing.microSecondsToMilliseconds((endTime - startTime) as Trace.Types.Timing.MicroSeconds);
+        total['idle'] = Math.max(0, deltaInMillis - aggregatedTotal);
       }
       return false;
     }