Single-Page Application Performance Monitoring via Segmented Timing
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Traditional methods for measuring web performance are inadequate for single-page applications (SPAs) as they continue to download and render resources after initial HTML loading, interfering with accurate measurement of page load times and other performance metrics.
Innovation Solution
A system that collects and calculates page load times and other performance metrics by utilizing events associated with user input, rendering of views, and downloading of resources within the SPA, using APIs and frameworks like Navigation Timing and Resource Timing, to provide accurate measurements.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If traditional timing events based on HTML loading are used to measure web performance, then measurement simplicity is maintained, but measurement precision deteriorates for single-page applications
Solution Approach 1:
The patent segments the page load time measurement into multiple distinct phases: HTML loading time, resource download time, and render completion time. Each phase is measured separately using specific timing events, allowing accurate measurement of the total load time while breaking down the complex measurement process into manageable components that can be tracked independently.
Solution Approach 2:
The patent introduces intermediary timing events and markers that are inserted at critical points in the SPA loading process. These intermediaries (such as custom timing events and performance markers) facilitate accurate measurement without directly interfering with the natural loading process, acting as mediators between the loading process and the measurement system.
2Adaptability or versatility
If SPA continues to download and render resources after HTML loading, then functionality and user experience are improved, but measurement accuracy of load times deteriorates
Solution Approach 1:
The patent implements preliminary timing events and markers that are set up before the SPA loading process begins. These pre-configured measurement points capture the start times of various loading phases, allowing the system to accurately measure subsequent resource downloads and rendering operations without interfering with the dynamic nature of SPA.
Solution Approach 2:
The patent employs feedback mechanisms where timing information from resource downloads and rendering operations is continuously collected and fed back to the measurement system. This feedback loop allows the system to dynamically adjust measurements and accurately capture the total load time even as resources continue to load and render after HTML completion.
Data Source
AI summary
The disclosed embodiments provide a system for processing data. During operation, the system obtains a first set of metrics generated during loading of a single-page application (SPA) in a web browser, wherein the first set of metrics includes a page load event and a render completion time. Next, the system uses the first set of metrics to calculate an initial page load time for the SPA. The system also obtains a second set of metrics generated during loading of a subsequent view in the SPA, wherein the second set of metrics includes a transition time and the render completion time. The system then uses the second set of metrics to calculate a subsequent page load time for the SPA. Finally, the system outputs the first and second sets of metrics, the initial page load time, and the subsequent page load time for use in analyzing a performance of the SPA.