Implement the "Underutilized network time" metric

src/source/source_cache.ts

@@ -23,6 +23,7 @@ import type {SourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {MapSourceDataEvent} from '../ui/events';
 import type {Terrain} from '../render/terrain';
 import type {CanvasSourceSpecification} from './canvas_source';
+import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 
 type TileResult = {
     tile: Tile;
@@ -173,8 +174,11 @@ export class SourceCache extends Evented {
     }
 
     async _loadTile(tile: Tile, id: string, state: TileState): Promise<void> {
+        PerformanceUtils.mark(PerformanceMarkers.lastTileRequested);
+
         try {
             await this._source.loadTile(tile);
+            PerformanceUtils.mark(PerformanceMarkers.tileReceived);
             this._tileLoaded(tile, id, state);
         } catch (err) {
             tile.state = 'errored';

src/source/worker_tile.ts

@@ -24,6 +24,7 @@ import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {VectorTile} from '@mapbox/vector-tile';
 import {MessageType, type GetGlyphsResponse, type GetImagesResponse} from '../util/actor_messages';
 import type {SubdivisionGranularitySetting} from '../render/subdivision_granularity_settings';
+import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 
 export class WorkerTile {
     tileID: OverscaledTileID;
@@ -160,6 +161,7 @@ export class WorkerTile {
             getPatternsPromise = actor.sendAsync({type: MessageType.getImages, data: {icons: patterns, source: this.source, tileID: this.tileID, type: 'patterns'}}, abortController);
         }
 
+        PerformanceUtils.mark(PerformanceMarkers.glyphsRequested);
         const [glyphMap, iconMap, patternMap] = await Promise.all([getGlyphsPromise, getIconsPromise, getPatternsPromise]);
         const glyphAtlas = new GlyphAtlas(glyphMap);
         const imageAtlas = new ImageAtlas(iconMap, patternMap);

src/style/style.ts

@@ -65,6 +65,7 @@ import {
 } from '../util/actor_messages';
 import {Projection} from '../geo/projection/projection';
 import {createProjectionFromName} from '../geo/projection/projection_factory';
+import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 
 const empty = emptyStyle() as StyleSpecification;
 /**
@@ -317,6 +318,7 @@ export class Style extends Evented {
             this._frameRequest = null;
             options.validate = options.validate !== false;
             this._load(json, options, previousStyle);
+            PerformanceUtils.mark(PerformanceMarkers.styleLoaded);
         }).catch(() => {}); // ignore abort
     }
 

src/ui/handler_manager.ts

@@ -21,6 +21,7 @@ import {extend} from '../util/util';
 import {browser} from '../util/browser';
 import Point from '@mapbox/point-geometry';
 import {MapControlsDeltas} from '../geo/projection/camera_helper';
+import {PerformanceMarkers, PerformanceUtils} from '../util/performance';
 
 const isMoving = (p: EventsInProgress) => p.zoom || p.drag || p.roll || p.pitch || p.rotate;
 
@@ -359,6 +360,10 @@ export class HandlerManager {
     }
 
     handleEvent = (e: Event, eventName?: keyof Handler) => {
+        if (e.type === 'moveend' || e.type === 'zoomend' || e.type === 'rotateend') {
+            // When viewport change ends and we know what new tiles we need
+            PerformanceUtils.mark(PerformanceMarkers.viewportChanged);
+        }
 
         if (e.type === 'blur') {
             this.stop(true);

src/util/performance.ts

@@ -8,10 +8,22 @@
     totalFrames: number;
 };
 
+export type NetworkUtilizationMetrics = {
+    viewportToTilesDelay: number;   // Time between viewport change and tile requests
+    styleToTilesDelay: number;      // Time between style load and tile requests
+    tileToGlyphsDelay: number;      // Time between tile load and glyph requests
+};
+
 export enum PerformanceMarkers {
     create = 'create',
     load = 'load',
-    fullLoad = 'fullLoad'
+    fullLoad = 'fullLoad',
+
+    styleLoaded = 'styleLoaded',
+    lastTileRequested = 'lastTileRequested',
+    tileReceived = 'tileReceived',
+    glyphsRequested = 'glyphsRequested',
+    viewportChanged = 'viewportChanged'
 }
 
 let lastFrameTime = null;
@@ -25,7 +37,7 @@
 
 export const PerformanceUtils = {
     mark(marker: PerformanceMarkers) {
         performance.mark(marker);
     },
     frame(timestamp: number) {
         const currTimestamp = timestamp;
@@ -71,6 +83,20 @@
             percentDroppedFrames,
             totalFrames
         };
+    },
+
+    getNetworkUtilizationMetrics(): NetworkUtilizationMetrics {
+        const styleLoadTime = performance.getEntriesByName(PerformanceMarkers.styleLoaded)[0]?.startTime || 0;
+        const lastTileRequestTime = performance.getEntriesByName(PerformanceMarkers.lastTileRequested)[0]?.startTime || 0;
+        const tileReceiveTime = performance.getEntriesByName(PerformanceMarkers.tileReceived)[0]?.startTime || 0;
+        const glyphsRequestTime = performance.getEntriesByName(PerformanceMarkers.glyphsRequested)[0]?.startTime || 0;
+        const viewportChangeTime = performance.getEntriesByName(PerformanceMarkers.viewportChanged)[0]?.startTime || 0;
+
+        return {
+            styleToTilesDelay: lastTileRequestTime - styleLoadTime,
+            tileToGlyphsDelay: glyphsRequestTime - tileReceiveTime,
+            viewportToTilesDelay: lastTileRequestTime - viewportChangeTime
+        };
     }
 };