interface PerformanceInfo navigationStart number domEnd number domready number onload number memory numberconst defaultPerformanceInfo PerformanceInfo = navigationStart 0 domEnd 0 domready 0

/**

• PerformanceInfo interface to define the shape of performance data object */ interface PerformanceInfo { navigationStart: number; domEnd: number; domready: number; onload: number; memory: number; }

/**

• Default performance data object with initial values set to 0 */ const defaultPerformanceInfo: PerformanceInfo = { navigationStart: 0, domEnd: 0, domready: 0, onload: 0, memory: 0, }

/**

• Reactive object to track changes in performance data object */ const performanceInfo = reactive(defaultPerformanceInfo);

/**

• Function to get performance data and update reactive object / const getPerformanceInfront = (): void => { if (process.client) { setTimeout(() => { /* * Update performance data values by subtracting relevant window.performance.timing values */ performanceInfo.navigationStart = window.performance.timing.domLoading - window.performance.timing.fetchStart; performanceInfo.domEnd = window.performance.timing.domComplete - window.performance.timing.domLoading; performanceInfo.domready = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.fetchStart; performanceInfo.onload = window.performance.timing.loadEventStart - window.performance.timing.fetchStart;

  /** * Get memory used by application and convert to GB */ performanceInfo.memory = getrmb(window.performance?.memory.usedJSHeapSize); }, 500) } }

/**

• Function to convert memory size from bytes to GB
• @param size - memory size in bytes
• @returns memory size in GB with 2 decimal places */ const getrmb = (size: number): number => { return Math.floor(size / 1024 / 1024 / 100) / 10; }

/**

• Call function to get performance data on page load */ getPerformanceInfront();