Resource loading optimization method and system based on dynamic network quality prediction

Abstract

The invention relates to the technical field of Web performance optimization, and provides a resource loading optimization method based on dynamic network quality prediction, which comprises the following steps: responding to a webpage resource loading request initiated by a browser end; triggering a Service Worker interceptor registered in the browser environment to intercept the network resource loading request, and collecting multi-dimensional network performance index data of the browser environment in real time; calling a lightweight prediction model operated at the browser end to predict the network state in the target time period, and outputting a prediction result of the network quality grade in the future target time period; a resource loading strategy corresponding to the network quality grade is determined, a Service Worker interceptor executes a corresponding scheduling operation according to the resource loading strategy, and a network state prediction mechanism based on high-frequency sampling and time sequence modeling, a hierarchical dynamic scheduling method of the resource loading strategy and a model updating process driven by closed-loop feedback are introduced. And multi-dimensional safety guarantee measures are provided.

Description

Technical Field

[0001] This invention relates to the field of Web performance optimization technology, and in particular to a resource loading optimization method and system based on dynamic network quality prediction, which is mainly applied to Web application resource scheduling in weak network environments on mobile devices. Background Technology

[0002] With the rapid development of web applications and front-end technologies, the loading efficiency of web page resources is directly related to user experience, especially on mobile devices and in environments with weak network conditions. Fluctuations in network conditions significantly impact page response speed and first-screen rendering quality, such as LCP and FCP. To improve page performance, the industry has widely adopted resource loading optimization strategies such as preloading, high-priority loading, and lazy loading.

[0003] However, existing web page resource loading optimization schemes generally rely on static strategies or historical statistical data for scheduling, which has the following main problems: (1) The prediction is lagging. Most schemes use fixed thresholds or static models based on historical averages, which are difficult to cope with the instantaneous fluctuations in network quality. For example, when the user's network bandwidth suddenly drops by 50% or the RTT (round-trip time) surges instantaneously, the resource loading rhythm cannot be adjusted in time, which leads to the preloaded resources blocking the rendering of core content, ultimately affecting the first screen loading performance and causing the preload strategy to fail. (2) The resource scheduling strategy is rigid. Current schemes usually set fixed concurrency, loading order and priority. When the user's network environment changes, such as when switching between WiFi and cellular networks, there is no adaptation mechanism. A large amount of secondary content is loaded under low bandwidth, or multiple requests are accidentally triggered in high latency networks, causing page jitter, stuttering and redundant traffic consumption. (3) There is a lack of closed-loop optimization capability. Most loading strategies lack real-time effect monitoring and feedback mechanisms, and cannot dynamically evaluate their effectiveness based on real loading performance data. At the same time, network state prediction models usually rely on periodic offline training, with long update cycles and slow responses, making it difficult to adapt to rapidly changing network environments. For example, in weak network scenarios, traditional loading optimization mechanisms often lack the ability to adjust strategies in real time, which can lead to the failure or timeout of loading critical resources on the first screen. This can cause a significant deterioration in the LCP (Largest Contentful Paint) metric, severely impacting the user experience. The system itself lacks an adaptive avoidance mechanism and can only passively enter a degraded mode. Summary of the Invention

[0004] To address the aforementioned problems, the present invention aims to provide a resource loading optimization method and system based on dynamic network quality prediction, thereby solving the problems of lag in network state response, rigid resource loading strategies, and lack of closed-loop optimization mechanisms in existing technologies. The above-mentioned objective of the present invention is achieved through the following technical solutions: This invention provides a resource loading optimization method based on dynamic network quality prediction, comprising: Responding to a webpage resource loading request initiated by the browser; Based on the web page resource loading request, the Service Worker interceptor registered in the browser environment is triggered to intercept the network resource loading request and collect multi-dimensional network performance data of the browser environment in real time. By extracting continuous time-series segments from historical network performance index data within a preset target time period, a lightweight prediction model running on the browser is invoked to predict the network status within the target time period, and the prediction results of the network quality level within the future target time period are output. Based on the prediction results, a resource loading strategy corresponding to the network quality level is determined, and the Service Worker interceptor executes the corresponding scheduling operation according to the resource loading strategy. After the resources are loaded, the corresponding loading performance feedback data is collected, and the scheduling operation of the resource loading strategy is evaluated based on the performance feedback data. The strategy parameters are dynamically adjusted on the browser side and / or the performance feedback data is uploaded to the server to update the lightweight prediction model, so as to realize the closed-loop adaptive update of resource loading optimization.

[0005] Furthermore, based on the webpage resource loading request, the Service Worker interceptor registered in the browser environment is triggered to intercept the network resource loading request, and multi-dimensional network performance index data of the browser environment is collected in real time, including: The Service Worker interceptor is triggered based on the webpage resource loading request; During the interception process, the browser's performance analysis interface, performance.getEntries(), is called to collect timing information of resource loading, and the NetworkInformation interface is used to collect dynamic network quality parameters in real time. The timing information includes DNS resolution time, TCP connection establishment time, and first byte arrival time (TTFB) in milliseconds. The network quality parameters include downlink bandwidth estimate (Mbps), round-trip time (RTT) in milliseconds, and valid network connection type such as 4G, 5G, and WiFi.

[0006] Furthermore, real-time collection of multi-dimensional network performance metrics data from the browser environment also includes, When the fluctuation range of the round-trip time (RTT) within the preset continuous time period is within the preset threshold range and the network connection type is consistent, such as when the RTT fluctuation compared to the previous sampling does not exceed ±50% or the connection type has not changed, the network status is determined to be stable, and periodic collection is performed with the first collection cycle, such as 30 seconds. If the round-trip time (RTT) exceeds the preset threshold range or the network connection type changes, such as when the RTT fluctuates by more than ±50% compared to the previous sample or the connection type changes, it is determined that the network status is abnormal, triggering a high-frequency sampling mode to collect data in the second sampling period for a preset sampling window period, that is, triggering high-frequency sampling once per second for 10 seconds.

[0007] Furthermore, the real-time collection of multi-dimensional network performance index data in the browser environment also includes encrypting the user IP address associated with the network performance index data using the SHA-256 salted hash algorithm during the collection process, and discarding the salt value used after hash calculation, so as to achieve irreversible desensitization of user identification information.

[0008] Furthermore, by extracting continuous time-series segments from historical network performance index data within a preset target time period, a lightweight prediction model running on the browser is invoked to predict the network state during the target time period, outputting the predicted network quality level for the future target time period, including: Based on historical network performance data, continuous time segments are extracted from the target time period according to a preset time window and sliding step size. The extracted continuous time segments are subjected to feature processing to generate a time-series feature vector for model input. Feature processing includes calculating the moving mean and bandwidth variance of round-trip time (RTT). The lightweight prediction model preloaded in the browser is invoked. The time series feature vector is input into the lightweight prediction model to perform inference and output the prediction result corresponding to the future target time period. The lightweight prediction model is an LSTM time series prediction model built on TensorFlow.js, and the prediction result is at least the network state score.

[0009] Furthermore, the output of the prediction results for the corresponding future target time period also includes mapping the network status score to the corresponding network quality level according to the preset scoring interval threshold. The network quality level includes excellent, good, medium and poor.

[0010] Furthermore, based on the prediction results, a resource loading strategy corresponding to the network quality level is determined, and the ServiceWorker interceptor executes the corresponding scheduling operation according to the resource loading strategy, including: When the network quality level is excellent, the LCP-related resources are identified based on the browser-side performance observation interface, the LCP-related resources are preloaded, and the loading priority of asynchronous resources is increased to a high priority level through the Service Worker interceptor. The maximum number of concurrent requests for resource loading is set to a certain limit. When the network status is good, prioritize loading key resources on the first screen of the page, including structured markup language files, style sheet files, main logic scripts, and image resources in the visible area of ​​the first screen. Adopt an on-demand loading strategy for components in the visible area, and limit the number of concurrent requests to the first upper limit. When the network status level is medium, the Service Worker interceptor is controlled to implement a lazy loading strategy for non-critical image resources and perform lossy compression on the image quality, while limiting the number of concurrent requests to no more than the second upper limit. When the network status is poor, only the minimum core resource set predefined by the developer is loaded. The total transmission volume of the resource set is no higher than a preset size threshold. Other non-critical resource requests are replaced with placeholder content to reduce resource transmission overhead, and the number of concurrent requests is limited to no more than the third upper limit value.

[0011] Furthermore, after resource loading is complete, corresponding loading performance feedback data is collected, and the scheduling operation of the resource loading strategy is evaluated based on the performance feedback data. Strategy parameters are dynamically adjusted on the browser side and / or performance feedback data is uploaded to the server to update the lightweight prediction model, achieving closed-loop adaptive updates for resource loading optimization, including... After the resources are loaded, collect the corresponding loading performance feedback data, including the maximum content rendering time, cumulative layout offset, and core resource loading success rate. Determine whether the collected performance feedback data meets the preset target conditions. If continuous performance degradation events are detected, trigger a rollback operation to restore the previous stable resource loading strategy. The performance feedback data of the de-identification process is periodically uploaded to the server. The uploaded data includes predicted labels, actual network status, LCP and CLS performance indicators. The server performs stratified A / B testing based on the uploaded data, using 95% confidence intervals to compare and verify the performance differences and effectiveness of different strategies. The validated strategy samples are then injected into the training set of the prediction model as training data. The lightweight prediction model is iteratively updated when the set update trigger conditions are met.

[0012] Based on the same inventive concept, this invention also provides a resource loading optimization system based on dynamic network quality prediction, which executes the resource loading optimization method described above, including: The request and response module is used to respond to web page resource loading requests initiated by the browser. The data acquisition module is used to trigger the ServiceWorker interceptor registered in the browser environment to intercept network resource loading requests based on web page resource loading requests, and to collect multi-dimensional network performance index data of the browser environment in real time. The data processing module is used to extract continuous time-series segments from historical network performance index data within a preset target time period, call a lightweight prediction model running on the browser to predict the network status within the target time period, and output the prediction results of the network quality level within the future target time period. The loading and scheduling module is used to determine the resource loading strategy corresponding to the network quality level based on the prediction results, and the Service Worker interceptor executes the corresponding scheduling operation according to the resource loading strategy. The performance evaluation module is used to collect corresponding loading performance feedback data after the resource loading is completed, and evaluate the performance of the resource loading strategy scheduling operation based on the performance feedback data. It dynamically adjusts the strategy parameters on the browser side and / or uploads the performance feedback data to the server to update the lightweight prediction model, realizing a closed-loop adaptive update of resource loading optimization.

[0013] Furthermore, the data acquisition module also includes a privacy protection subunit, which is used to encrypt the user IP address associated with the network performance index data using the SHA-256 salted hash algorithm during the acquisition process, and discard the salt value used after hash calculation.

[0014] Compared with the prior art, the present invention has at least one of the following beneficial effects: This invention achieves significant optimizations in resource loading efficiency, adaptability, system response timeliness, data flow control, and user privacy protection by introducing a network state prediction mechanism based on high-frequency sampling and time-series modeling, a hierarchical dynamic scheduling method for resource loading strategies, a closed-loop feedback-driven model update process, and multi-dimensional security measures. It offers the following beneficial effects: (1) A high-frequency sampling mechanism is adopted, with a sampling frequency of 1Hz. Combined with LSTM time-series modeling, it can capture network state fluctuations at the second level, compressing the prediction response time in transient network degradation scenarios from the traditional minute level to the second level, realizing an instant response to transient network degradation, and significantly improving the immediacy and accuracy of the prediction system.

[0015] (2) The continuous scoring mechanism eliminates abrupt changes in the policy switching boundary. Combined with dynamic concurrency control (bandwidth / 0.5 rounded up to 6) and the core resource forced loading strategy, the success rate of loading key resources on the first screen in a weak network environment is increased by more than 23%. (3) By adopting a dual feedback mechanism of client-side circuit breaking and server-side model update, the client can complete the policy rollback response within 5 seconds (monitoring frequency 1Hz), while the server-side model iteration cycle is shortened from the traditional weekly level to the hour level, thereby improving the model adaptation timeliness by 12 times.

[0016] (4) By implementing a network-state-based hierarchical resource degradation strategy, such as dynamic adjustment of WebP image compression quality and non-critical request blocking control, redundant data transmission during resource loading is effectively reduced, and the overall traffic consumption decreases by more than 17%. (5) HMAC-SHA256 salted hash desensitization (salt value destruction) and ε=0.2 differential privacy training are adopted to meet the GDPR Article 25 data minimization principle and anonymization requirements. Attached Figure Description

[0017] Figure 1 This is a flowchart illustrating the steps of the resource loading optimization method based on dynamic network quality prediction of the present invention. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0019] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the term “comprising” as used in this specification means the presence of the stated features, integers, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0020] First Embodiment In current webpage loading optimization practices, dynamic changes in network conditions are often overlooked, especially in mobile network environments. Users may experience switching from WiFi to 4G or 5G within seconds, or encounter sudden bandwidth drops or surges in RTT, making it difficult for static resource scheduling strategies to respond in a timely manner. This results in phenomena such as prolonged blank screens for the first page, delayed image loading, and failure to render the page skeleton, severely impacting user experience. Furthermore, most current mainstream optimization mechanisms are based on fixed empirical rules to set resource loading priorities and concurrency levels, lacking the ability to perceive and adapt to real-time network quality. They also fail to build a closed-loop feedback mechanism for loading performance, making strategy execution effects often unquantifiable. Model training cycles are too long, making it difficult to quickly optimize based on actual performance, resulting in both low resource utilization efficiency and performance optimization failure.

[0021] For example, when a user switches from a stable WiFi environment to a 4G mobile network, network bandwidth may drop by more than 50% instantaneously. If the current strategy still attempts to load all page components, it can easily cause critical resources to fail to load. Alternatively, in high RTT scenarios, multiple secondary requests may be triggered concurrently, blocking the loading of main resources and significantly delaying LCP (Maximum Content Render Time). Furthermore, due to the lack of real-time evaluation and feedback on loading effects, the system cannot determine whether a strategy is being effectively implemented and typically can only passively wait for the user to close the page or enter a degraded mode, severely lacking adaptive capabilities.

[0022] To address the aforementioned issues, the inventors propose a predictive resource loading and scheduling optimization scheme for future network conditions. This scheme not only predicts the network quality level over a short period based on real-time bandwidth, RTT, and other metrics collected from the browser, but also dynamically selects appropriate resource loading strategies based on the prediction results, such as adjusting image compression formats, controlling concurrency limits, and prioritizing the loading of LCP-related resources. Furthermore, to ensure continuous optimization, the scheme introduces a client-side circuit breaker mechanism and a server-side model evolution mechanism, constructing an optimization closed loop through loading performance feedback (such as LCP, CLS, and loading success rate). The specific implementation is as follows: like Figure 1 As shown, this invention provides a resource loading optimization method based on dynamic network quality prediction, comprising: Step S1: Respond to the webpage resource loading request initiated by the browser; Step S2: Based on the webpage resource loading request, trigger the Service Worker interceptor registered in the browser environment to intercept the network resource loading request and collect multi-dimensional network performance index data of the browser environment in real time; Step S3: Extract continuous time series segments from historical network performance index data through a preset target time period, call the lightweight prediction model running on the browser to predict the network status of the target time period, and output the prediction results of the network quality level in the future target time period. Step S4: Based on the prediction results, determine the resource loading strategy corresponding to the network quality level, and the ServiceWorker interceptor executes the corresponding scheduling operation according to the resource loading strategy; Step S5: After the resource loading is completed, collect the corresponding loading performance feedback data, evaluate the effect of the resource loading strategy scheduling operation based on the performance feedback data, dynamically adjust the strategy parameters on the browser side and / or upload the performance feedback data to the server to update the lightweight prediction model, so as to realize the closed-loop adaptive update of resource loading optimization.

[0023] Furthermore, based on the webpage resource loading request, the Service Worker interceptor registered in the browser environment is triggered to intercept the network resource loading request, and multi-dimensional network performance index data of the browser environment is collected in real time, including: The Service Worker interceptor is triggered based on the webpage resource loading request; During the interception process, the browser's performance analysis interface, performance.getEntries(), is called to collect timing information of resource loading, and the NetworkInformation interface is used to collect dynamic network quality parameters in real time. The timing information includes DNS resolution time, TCP connection establishment time, and first byte arrival time (TTFB) in milliseconds. The network quality parameters include downlink bandwidth estimate (Mbps), round-trip time (RTT) in milliseconds, and valid network connection type such as 4G, 5G, and WiFi.

[0024] Furthermore, real-time collection of multi-dimensional network performance metrics data from the browser environment also includes, When the fluctuation range of the round-trip time (RTT) within the preset continuous time period is within the preset threshold range and the network connection type is consistent, such as when the RTT fluctuation compared to the previous sampling does not exceed ±50% or the connection type has not changed, the network status is determined to be stable, and periodic collection is performed with the first collection cycle, such as 30 seconds. If the round-trip time (RTT) exceeds the preset threshold range or the network connection type changes, such as when the RTT fluctuates by more than ±50% compared to the previous sample or the connection type changes, it is determined that the network status is abnormal, triggering a high-frequency sampling mode to collect data in the second sampling period for a preset sampling window period, that is, triggering high-frequency sampling once per second for 10 seconds.

[0025] Furthermore, the real-time collection of multi-dimensional network performance index data in the browser environment also includes encrypting the user IP addresses associated with the network performance index data using the SHA-256 salted hash algorithm during the collection process, and discarding the salt value used after hash calculation.

[0026] Furthermore, by extracting continuous time-series segments from historical network performance index data within a preset target time period, a lightweight prediction model running on the browser is invoked to predict the network state during the target time period, outputting the predicted network quality level for the future target time period, including: Based on historical network performance data, continuous time segments are extracted from the target time period according to a preset time window and sliding step size. The extracted continuous time segments are subjected to feature processing to generate a time-series feature vector for model input. Feature processing includes calculating the moving mean and bandwidth variance of round-trip time (RTT). The lightweight prediction model preloaded in the browser is invoked. The time series feature vector is input into the lightweight prediction model to perform inference and output the prediction result corresponding to the future target time period. The lightweight prediction model is an LSTM time series prediction model built on TensorFlow.js, and the prediction result is at least the network state score.

[0027] Furthermore, the output of the prediction results for the corresponding future target time period also includes mapping the network status score to the corresponding network quality level according to the preset scoring interval threshold. The network quality level includes excellent, good, medium and poor.

[0028] Here are some specific examples: Based on historical network performance data collected from the browser, the round-trip time (RTT) and downlink bandwidth within the last 120 seconds were selected as input data sources. The moving average of RTT and the variance of bandwidth within each window were calculated with a sliding window period of 10 seconds and used as input features for the model.

[0029] The network state prediction results output by the model are quantified using a continuous scoring mechanism. The denominator of the bandwidth term in the scoring function is normalized using a logarithmic function to ensure scoring stability in high-bandwidth scenarios. The RTT term is set to a saturation threshold of 800ms to improve scoring discrimination in timeout scenarios, resulting in the final network quality score. The model is an LSTM time-series prediction model built using TensorFlow.js. Regarding the definition of a continuous quantization scoring mechanism for state grading: ; Where: the denominator of the bandwidth term adopts Ensure that the score is not excessively affected in high-bandwidth scenarios. The RTT (Resolution Timeout) item uses 800ms as a saturation threshold to avoid a decrease in discrimination in timeout scenarios, which is mapped to a level four strategy: Excellent: Score ≥ 0.8; Good: 0.6 ≤ Score < 0.8; Average: 0.4 ≤ Score < 0.6; Poor: Score < 0.4 The model performs inference tasks only on the browser side and does not bear the training load; the server aggregates the terminal de-identified performance data daily for global model training and updates the model parameters based on a differential privacy protection mechanism (such as ε=0.2); the browser side pulls the updated model from the server as needed, and the update cycle is configurable (such as once per hour or once per day).

[0030] Furthermore, based on the prediction results, a resource loading strategy corresponding to the network quality level is determined, and the ServiceWorker interceptor executes the corresponding scheduling operation according to the resource loading strategy, including: When the network quality level is excellent, the LCP-related resources are identified based on the browser-side performance observation interface, the LCP-related resources are preloaded, and the loading priority of asynchronous resources is increased to a high priority level through the Service Worker interceptor. The maximum number of concurrent requests for resource loading is set to a certain limit. When the network status is good, prioritize loading key resources on the first screen of the page, including structured markup language files, style sheet files, main logic scripts, and image resources in the visible area of ​​the first screen. Adopt an on-demand loading strategy for components in the visible area, and limit the number of concurrent requests to the first upper limit. When the network status level is medium, the Service Worker interceptor is controlled to implement a lazy loading strategy for non-critical image resources and perform lossy compression on the image quality, while limiting the number of concurrent requests to no more than the second upper limit. When the network status is poor, only the minimum core resource set predefined by the developer is loaded. The total transmission volume of the resource set is no higher than a preset size threshold. Other non-critical resource requests are replaced with placeholder content to reduce resource transmission overhead, and the number of concurrent requests is limited to no more than the third upper limit value.

[0031] For example: Regarding the priority strategy (Score ≥ 0.8), a preloading task is initiated. Resources associated with the Maximum Content Rendering (LCP) metric are identified and prioritized for loading through the PerformanceObserver interface. At the same time, the loading priority of critical asynchronous resources is increased to the High level to optimize the first screen rendering time.

[0032] The "Good" strategy (0.6 ≤ Score < 0.8) prioritizes loading core resources such as HTML, CSS, JavaScript, and images visible on the first screen. It triggers resource loading tasks for components within the first screen as needed and controls the maximum number of concurrent resource loadings to 4.

[0033] The intermediate strategy (0.4 ≤ Score < 0.6) delays the loading of non-core image resources. When the CPU utilization is detected to be below 70%, the image quality is downgraded to WebP format with a 75% compression ratio to reduce system load and limit the maximum number of concurrent loading to 2.

[0034] The differential strategy (Score < 0.4) loads only the core resource package predefined by the developer (no more than 50KB), replaces all unnecessary loading requests with local skeleton screen placeholders, and limits the loading concurrency to 1 to ensure that basic functions are displayed normally.

[0035] Furthermore, after resource loading is complete, corresponding loading performance feedback data is collected, and the scheduling operation of the resource loading strategy is evaluated based on the performance feedback data. Strategy parameters are dynamically adjusted on the browser side and / or performance feedback data is uploaded to the server to update the lightweight prediction model, achieving closed-loop adaptive updates for resource loading optimization, including... After the resources are loaded, collect the corresponding loading performance feedback data, including the maximum content rendering time, cumulative layout offset, and core resource loading success rate. Determine whether the collected performance feedback data meets the preset target conditions. If continuous performance degradation events are detected, trigger a rollback operation to restore the previous stable resource loading strategy. The performance feedback data of the de-identification process is periodically uploaded to the server. The uploaded data includes predicted labels, actual network status, LCP and CLS performance indicators. The server performs stratified A / B testing based on the uploaded data, using 95% confidence intervals to compare and verify the performance differences and effectiveness of different strategies. The validated strategy samples are then injected into the training set of the prediction model as training data. The lightweight prediction model is iteratively updated when the set update trigger conditions are met.

[0036] For example, a dual-loop feedback mechanism can be established to improve the system's adaptability, specifically including a client-side circuit breaker mechanism and a server-side model evolution mechanism: Regarding real-time circuit breaking on the client side, after the resource loading strategy is executed, the browser monitors the following key performance indicators in real time: Maximum Content Rendering Time (LCP), target ≤ 2.5s; Cumulative Layout Offset (CLS), target ≤ 0.1; Core resource loading success rate, target ≥ 98%. If a single LCP exceeds 3 seconds, or two consecutive LCPs exceed 2.8 seconds, the strategy circuit breaking mechanism is triggered, automatically reverting to the previous verified stable resource loading strategy to prevent the spread of performance degradation.

[0037] Regarding server-side model evolution: The browser uploads anonymized performance feedback logs hourly, including predicted tags, actual network status, LCP, and CLS metrics. The server performs stratified A / B testing on the received data, using 95% confidence intervals to analyze the significance of the first-screen performance improvement of different strategy versions.

[0038] If a strategy shows a statistically significant performance improvement, its corresponding strategy data is injected into the training set, and the lightweight prediction model is incrementally updated as needed under the condition of meeting the shortest trigger interval (e.g., 1 hour), thereby improving the model's adaptability to dynamic network environments.

[0039] Second Embodiment Based on the same inventive concept, this invention also provides a resource loading optimization system based on dynamic network quality prediction, which executes the resource loading optimization method described above, including: The request and response module is used to respond to web page resource loading requests initiated by the browser. The data acquisition module is used to trigger the ServiceWorker interceptor registered in the browser environment to intercept network resource loading requests based on web page resource loading requests, and to collect multi-dimensional network performance index data of the browser environment in real time. The data processing module is used to extract continuous time-series segments from historical network performance index data within a preset target time period, call a lightweight prediction model running on the browser to predict the network status within the target time period, and output the prediction results of the network quality level within the future target time period. The loading and scheduling module is used to determine the resource loading strategy corresponding to the network quality level based on the prediction results, and the Service Worker interceptor executes the corresponding scheduling operation according to the resource loading strategy. The performance evaluation module is used to collect corresponding loading performance feedback data after the resource loading is completed, and evaluate the performance of the resource loading strategy scheduling operation based on the performance feedback data. It dynamically adjusts the strategy parameters on the browser side and / or uploads the performance feedback data to the server to update the lightweight prediction model, realizing a closed-loop adaptive update of resource loading optimization.

[0040] Furthermore, the data acquisition module also includes a privacy protection subunit, which is used to encrypt the user IP address associated with the network performance index data using the SHA-256 salted hash algorithm during the acquisition process, and discard the salt value used after hash calculation.

[0041] The above description is merely a preferred embodiment of the present invention. The scope of protection of the present invention is not limited to the above embodiments. All technical solutions falling within the scope of the present invention's concept are within the scope of protection of the present invention. It should be noted that for those skilled in the art, any improvements and modifications made without departing from the principles of the present invention should also be considered within the scope of protection of the present invention.

[0042] It should be noted that the above embodiments can be freely combined as needed. The above description is only a preferred embodiment of the present invention. It should be pointed out that for those skilled in the art, several improvements and modifications can be made without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A resource loading optimization method based on dynamic network quality prediction, characterized in that, include: Responding to a webpage resource loading request initiated by the browser; Based on the webpage resource loading request, the Service Worker interceptor registered in the browser environment is triggered to intercept the network resource loading request and collect multi-dimensional network performance index data of the browser environment in real time. By extracting continuous time segments from historical network performance index data within a preset target time period, the lightweight prediction model running on the browser is invoked to predict the network status within the target time period, and the prediction result of the network quality level within the future target time period is output. Based on the prediction results, a resource loading strategy corresponding to the network quality level is determined, and the ServiceWorker interceptor executes the corresponding scheduling operation according to the resource loading strategy. After the resource loading is completed, the corresponding loading performance feedback data is collected, and the scheduling operation of the resource loading strategy is evaluated based on the performance feedback data. The strategy parameters are dynamically adjusted on the browser side and / or the performance feedback data is uploaded to the server to update the lightweight prediction model, so as to realize the closed-loop adaptive update of resource loading optimization.

2. The resource loading optimization method according to claim 1, characterized in that, Based on the webpage resource loading request, the Service Worker interceptor registered in the browser environment is triggered to intercept the network resource loading request, and multi-dimensional network performance index data of the browser environment are collected in real time, including: The Service Worker interceptor is triggered based on the webpage resource loading request; During the interception process, the browser's performance analysis interface is invoked to collect resource loading timing information and the current dynamic network quality parameters are collected in real time through the network status awareness interface. The timing information includes DNS resolution time, TCP connection establishment time, and first byte arrival time. The network quality parameters include downlink bandwidth estimate, round-trip time (RTT), and valid network connection type.

3. The resource loading optimization method according to claim 2, characterized in that, Real-time collection of multi-dimensional network performance metrics data of the browser environment, including, When the fluctuation range of the round-trip time (RTT) within a preset continuous time period is within a preset threshold range and the network connection types are consistent, the network state is determined to be stable, and periodic collection is performed in the first collection cycle. If the round-trip time (RTT) exceeds the preset threshold range or the network connection type is switched, it is determined that the network status is abnormal, triggering a high-frequency sampling mode to collect data in a second sampling period for a preset sampling window period.

4. The resource loading optimization method according to claim 3, characterized in that, The real-time collection of multi-dimensional network performance index data of the browser environment also includes encrypting the user IP address associated with the network performance index data using the SHA-256 salted hash algorithm during the collection process, and discarding the salt value used after hash calculation.

5. The resource loading optimization method according to claim 4, characterized in that, By extracting continuous time-series segments from historical network performance index data within a preset target time period, and calling a lightweight prediction model running on the browser side to predict the network status within the target time period, the predicted network quality level for the future target time period is output, including: Based on the historical network performance index data, the continuous time series segments are extracted from the target time period according to a preset time window and sliding step size. The extracted continuous time segments are subjected to feature processing to generate a time-series feature vector for model input. The feature processing includes calculating the moving mean and bandwidth variance of the round-trip time (RTT). The lightweight prediction model preloaded on the browser is invoked, the time-series feature vector is input into the lightweight prediction model to perform inference, and the prediction result corresponding to the future target time period is output. The lightweight prediction model is an LSTM time-series prediction model built on TensorFlow.js, and the prediction result is at least a network state score.

6. The resource loading optimization method according to claim 5, characterized in that, The output of the prediction result corresponding to the future target time period also includes mapping the network status score value to the corresponding network quality level according to a preset scoring interval threshold, wherein the network quality level includes excellent, good, medium and poor.

7. The resource loading optimization method according to claim 1, characterized in that, Based on the prediction results, a resource loading strategy corresponding to the network quality level is determined, and the Service Worker interceptor executes the corresponding scheduling operation according to the resource loading strategy, including: When the network quality level is excellent, LCP-related resources are identified based on the browser's performance monitoring interface, these resources are preloaded, and the loading priority of asynchronous resources is increased to a high priority level through the Service Worker interceptor. The maximum concurrent request limit for resource loading is also set to [value missing]. ; When the network status level is good, the key resources of the first screen of the page are loaded first, including structured markup language files, style sheet files, main logic scripts and image resources in the visible area of ​​the first screen, and the components in the visible area are loaded on demand, while the number of concurrent requests is limited to a first upper limit. When the network status level is medium, the Service Worker interceptor is controlled to perform a delayed loading strategy on non-critical image resources and to perform lossy compression processing on the image quality, while limiting the number of concurrent requests to no more than the second upper limit value. When the network status level is poor, only the minimal core resource set predefined by the developer is loaded, and the total transmission volume of the resource set is not higher than a preset size threshold; the remaining non-critical resource requests are replaced with placeholder content to reduce resource transmission overhead, and the number of concurrent requests is limited to a third upper limit value.

8. The resource loading optimization method according to claim 1, characterized in that, After resource loading is complete, corresponding loading performance feedback data is collected, and the scheduling operation of the resource loading strategy is evaluated based on the performance feedback data. The strategy parameters are dynamically adjusted on the browser side and / or the performance feedback data is uploaded to the server to update the lightweight prediction model, thereby realizing a closed-loop adaptive update for resource loading optimization. include, After the resources are loaded, the corresponding loading performance feedback data is collected. The performance feedback data includes the maximum content rendering time, cumulative layout offset, and core resource loading success rate. Determine whether the collected performance feedback data meets the preset target conditions. If continuous performance degradation events are detected, trigger a rollback operation to restore the previous stable resource loading strategy. The performance feedback data, after being anonymized, is periodically uploaded to the server. The uploaded data includes predicted labels, actual network status, LCP and CLS performance metrics. The server performs stratified A / B testing based on the uploaded data, using 95% confidence intervals to compare and verify the performance differences and effectiveness of different strategies. The validated strategy samples are injected into the training set of the prediction model as training data, and the lightweight prediction model is iteratively updated when the set update trigger conditions are met.

9. A resource loading optimization system based on dynamic network quality prediction, executing the resource loading optimization method as described in any one of claims 1 to 8, characterized in that, include, The request and response module is used to respond to web page resource loading requests initiated by the browser. The data acquisition module is used to trigger the ServiceWorker interceptor registered in the browser environment to intercept the network resource loading request based on the web page resource loading request, and to collect multi-dimensional network performance index data of the browser environment in real time. The data processing module is used to extract continuous time-series segments from historical network performance index data within a preset target time period, call the lightweight prediction model running on the browser to predict the network status within the target time period, and output the prediction result of the network quality level within the future target time period. The loading and scheduling module is used to determine the resource loading strategy corresponding to the network quality level based on the prediction results, and the Service Worker interceptor executes the corresponding scheduling operation according to the resource loading strategy. The performance evaluation module is used to collect corresponding loading performance feedback data after the resource loading is completed, and to evaluate the performance of the resource loading strategy scheduling operation based on the performance feedback data. The module dynamically adjusts the strategy parameters on the browser side and / or uploads the performance feedback data to the server to update the lightweight prediction model, thereby realizing a closed-loop adaptive update of resource loading optimization.

10. The resource loading optimization method according to claim 1, characterized in that, The data acquisition module also includes a privacy protection subunit, which is used to encrypt the user IP address associated with the network performance index data using the SHA-256 salted hash algorithm during the acquisition process, and discard the salt value used after hash calculation.

Images