Front-end performance optimization method and system based on dynamic resource loading and rendering optimization

Abstract

The invention discloses a front-end performance optimization method and system based on dynamic resource loading and rendering optimization, belongs to the technical field of webpage front-end development, and aims to solve the technical problems that an on-demand loading scheme lacks dynamic strategy adaptation, is not deeply combined with a rendering process and cannot be dynamically optimized according to a real-time environment. Comprising the steps of predicting page blocks or resource types possibly accessed by a user through a behavior prediction model on the basis of user behavior data, and dynamically calculating a loading weight of each resource on the basis of the resource types, the distance between the resources and a viewport, the user behavior data and a user behavior prediction result; based on the network state and the equipment memory capacity, according to a preset resource loading strategy, setting a loading mode and a priority of resources; splitting a long list or a component in the page block into a plurality of independent frame rendering tasks, and processing the frame rendering tasks in batches in an idle period of the browser; and pre-defined performance indexes are monitored and recorded in real time.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of webpage front-end development, in particular to a front-end performance optimization method and system based on dynamic resource loading and rendering optimization. BACKGROUND

[0002] The traditional front-end resource loading method usually loads all resources (such as scripts, styles, pictures, etc.) at one time, resulting in long first-screen loading time, resource waste and runtime performance bottleneck. The on-demand loading scheme (such as lazy loading) in the prior art lacks dynamic strategy adaptation capability and is not deeply combined with the rendering process, and cannot dynamically optimize according to the real-time environment (network, device performance, user behavior).

[0003] The technical problem to be solved is that the on-demand loading scheme lacks dynamic strategy adaptation and is not deeply combined with the rendering process, and cannot dynamically optimize according to the real-time environment. SUMMARY

[0004] The technical task of the present application is to provide a front-end performance optimization method and system based on dynamic resource loading and rendering optimization to solve the technical problem that the on-demand loading scheme lacks dynamic strategy adaptation and is not deeply combined with the rendering process, and cannot dynamically optimize according to the real-time environment.

[0005] In a first aspect, the present application provides a front-end performance optimization method based on dynamic resource loading and rendering optimization, comprising the following steps:

[0006] User behavior analysis and resource classification: listen to user behavior and collect user behavior data, predict the page blocks or resource types that the user may access based on the user behavior data and through a behavior prediction model, output user behavior prediction results, and dynamically calculate the loading weight of each resource based on the resource type, the distance between the resource and the viewport, the user behavior data and the user behavior prediction results;

[0007] Resource dynamic loading: perform performance detection on the device and the network, set the loading mode and priority of the resource based on the network status and the device memory capacity according to the preset resource loading strategy, load the content or resource required for the next screen based on the user behavior prediction results when a loading event is listened to, predict the page blocks that the user may access based on the user historical browsing path as the to-be-accessed page blocks, and load the resources related to the to-be-accessed page blocks from the local cache;

[0008] Rendering optimization: for the page blocks or resources browsed by the user, the long list or component in the page block is split into multiple independent frame rendering tasks, the frame rendering tasks are processed in batches during the idle period of the browser, and the CSS style sheet matching the performance of the device is dynamically loaded according to the performance of the device;

[0009] Real-time performance monitoring: Real-time monitoring and recording of pre-defined performance indicators, evaluating user experience based on performance indicators, if the quality of user experience is less than the threshold, loading preset content and resources on the current user browsing page.

[0010] As preferred, user behavior analysis and resource classification include the following steps:

[0011] Interaction behavior detection: Real-time capture of operation trajectory by document.body.addEventListener event listening technology, user scrolling, clicking and touching, record the frequency of visual area change and hot area click distribution, and listen to the user page stay time and scrolling speed, visual area change frequency and hot area click distribution, user page stay time and scrolling speed as user behavior data, based on user behavior data, predict the page block or resource type that the user may access through the pre-built behavior prediction model;

[0012] Resource priority marking: Identify resource types through the construction tool and mark the initial priority, dynamically calculate the loading weight of each resource according to resource type, resource distance from viewport, user behavior data and user behavior prediction results, and divide resources into key resources and non-key resources based on resource loading weight.

[0013] As preferred, resource dynamic loading includes the following steps:

[0014] According to the network state and device memory capacity detected by the original JavaScript, according to the network state and device memory capacity, according to the preset resource loading strategy to set the loading mode and priority of the resource;

[0015] When the Intersection Observer API detects that a specific element is within 300 pixels before entering the visible area, trigger the corresponding loading event, based on user behavior data to determine that the current user behavior is scrolling the page, predict the page scrolling direction based on the loading event to get the next screen to be accessed by the user, load the content or resources required by the next screen;

[0016] Based on the user's historical browsing path, predict the page block that the user may access in the future time period as the page block to be accessed through the pre-configured reinforcement learning model, and load the resources associated with the page block to be accessed from the local cache, wherein the local cache stores resources related to the user's historical browsing pages, and the number of times the historical browsing pages are accessed exceeds the threshold.

[0017] As preferred, rendering optimization includes the following steps:

[0018] Frame rendering: for the page blocks that the user wants to access, split the long list or component into multiple independent frame rendering tasks, and process the frame rendering tasks in batches through the requestIdleCallback API provided by the browser during the idle period of the browser;

[0019] Using the navigator.deviceMemory attribute and GPU-related API, the hardware performance of the device used by the user is detected, and the CSS stylesheet matching the current device performance is dynamically loaded according to the device performance. For devices with performance below the threshold, disable the shadow effect and reduce the frame rate of the animation. For devices with performance above the threshold, enable advanced rendering techniques including WebGL.

[0020] As a preferred, real-time performance monitoring, deploy performance monitoring and recording preset key performance indicators in real time through performance monitoring and recording preset key performance indicators, key performance indicators include first screen loading time and interaction delay, based on key performance indicators to evaluate user experience, if the current page frame rate is lower than the predetermined value, trigger the preset degradation strategy, if the resource loading failure rate exceeds the threshold, switch to the content distribution network or enable the content fallback service, through the content fallback service to load the preset content and resources in the current user browsing page.

[0021] In a second aspect, the present application is a front-end performance optimization system based on dynamic resource loading and rendering optimization, including a user behavior analysis and resource classification module, a resource dynamic loading module, a rendering optimization module, and a real-time performance monitoring module;

[0022] The user behavior analysis and resource classification module is used to perform the following: listen to user behavior and collect user behavior data, predict the page blocks or resource types that the user may access based on the user behavior data and through the behavior prediction model, output the user behavior prediction result, and dynamically calculate the loading weight of each resource based on the resource type, the distance between the resource and the viewport, the user behavior data, and the user behavior prediction result;

[0023] The resource dynamic loading module is used to perform the following: perform performance detection on the device and the network, set the loading mode and priority of the resource based on the network status and the device memory capacity according to the preset resource loading strategy, load the content or resource required by the next screen based on the user behavior prediction result when a loading event is detected, predict the page blocks that the user may access as the to-be-accessed page blocks based on the user historical browsing path, and load the resources related to the to-be-accessed page blocks from the local cache;

[0024] The rendering optimization module is configured to perform the following: for a page block or resource browsed by a user, splitting a long list or component in the page block into multiple independent frame rendering tasks, processing the frame rendering tasks in batches during an idle period of the browser, and dynamically loading a CSS stylesheet matching the performance of the device according to the performance of the device;

[0025] The real-time performance monitoring module is configured to perform the following: monitoring and recording predefined performance indicators in real time, evaluating user experience based on the performance indicators, and loading preset content and resources on a current page browsed by the user if the quality of the user experience is less than a threshold value.

[0026] Preferably, the user behavior analysis and resource classification module is configured to perform the following operations:

[0027] Interaction behavior detection: capturing operation trajectories in real time by means of a document.body.addEventListener event listening technique, user scrolling, clicking, and touching, recording visual area change frequency and hot area click distribution, and listening to user page stay duration and scrolling speed, visual area change frequency and hot area click distribution, user page stay duration and scrolling speed being used as user behavior data, predicting a page block or resource type that the user is likely to access based on the user behavior data and by means of a pre-constructed behavior prediction model;

[0028] Resource priority marking: identifying resource types by means of a construction tool and marking initial priorities, dynamically calculating a loading weight of each resource according to resource types, distances between resources and a viewport, user behavior data, and user behavior prediction results, and dividing resources into key resources and non-key resources based on the loading weight of the resources.

[0029] Preferably, the resource dynamic loading module is configured to perform the following operations:

[0030] Detecting network status and device memory capacity according to original JavaScript, setting a loading mode and priority of resources according to the network status and the device memory capacity, and according to a preset resource loading strategy;

[0031] Triggering a corresponding loading event when a specific element is detected by means of an Intersection Observer API to be within a range of 300 pixels before entering a visual area, determining that a current user behavior is scrolling a page based on user behavior data, predicting a page scrolling direction to obtain a next screen to be accessed by the user based on the loading event, and loading content or resources required by the next screen;

[0032] Based on the user historical browsing path, the page block that the user is likely to access in a future time period is predicted as a to-be-accessed page block through a preconfigured reinforcement learning model, and resources associated with the to-be-accessed page block are loaded from a local cache, wherein the local cache stores resources of historical browsing pages of the user, and the historical browsing pages are accessed more than a threshold number of times.

[0033] As preferred, the rendering optimization module is used to perform the following operations with confidence:

[0034] Frame rendering: for the page block to be accessed by the user, the long list or component is split into multiple independent frame rendering tasks, and the frame rendering tasks are processed in batches through the requestIdleCallback API provided by the browser during the idle period of the browser;

[0035] The hardware performance of the device used by the user is detected by using the navigator.deviceMemory attribute and GPU-related API, and the CSS stylesheet matching the current device performance is dynamically loaded according to the device performance, for the device with performance lower than the threshold, the shadow effect is disabled, and the frame rate of the animation is reduced, and for the device with performance higher than the threshold, the advanced rendering technology including WebGL is enabled.

[0036] As preferred, the real-time performance monitoring is used to perform the following: deploy performance monitoring points, monitor and record preset key performance indicators in real time through the performance monitoring points, the key performance indicators include first screen loading time and interaction delay, evaluate the user experience based on the key performance indicators, if the current page frame rate is lower than the predetermined value, trigger the preset degradation strategy, if the resource loading failure rate exceeds the threshold, switch to the content distribution network or enable the content fallback service, and load the preset content and resources on the current browsing page of the user through the content fallback service.

[0037] The front-end performance optimization method and system based on dynamic resource loading and rendering optimization have the following advantages:

[0038] 1. Improved user experience: reduced user waiting perception through dynamic resource scheduling and preloading technology, scroll frame rate (FPS) increased to >= 60fps, reduced main thread blocking through frame rendering and GPU acceleration, ensured animation and long list sliding without lag, still ensured basic function availability (such as priority loading of text content) under 3G network, and reduced user churn rate

[0039] 2. Comprehensive performance improvement: bandwidth consumption reduced by 30%-50% through resource compression and on-demand loading, reduced server load and traffic cost, memory peak occupancy of low-end devices (2GB memory) reduced by 40%, and page crashes caused by resource overload avoided;

[0040] 3. Compatibility and extensibility: The modular architecture supports rapid adaptation to new devices (such as folding screens, AR glasses) and business scenarios, reduces subsequent iteration costs, supports rendering downgrade strategies from low-end Android devices to high-end iOS devices, and is compatible with mainstream browsers such as Chrome / Safari / Firefox. BRIEF DESCRIPTION OF DRAWINGS

[0041] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments or prior art description will be briefly introduced as follows. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor on the basis of these drawings.

[0042] The present application will be further described below in conjunction with the drawings.

[0043] Figure 1 A flowchart of a front-end performance optimization method based on dynamic resource loading and rendering optimization for embodiment 1. DETAILED DESCRIPTION

[0044] The present application will be further described below in conjunction with the drawings and specific embodiments, so that those skilled in the art can better understand the present application and implement it. However, the embodiments are not limiting to the present application, and the technical features in the embodiments and the embodiments can be combined with each other without conflict.

[0045] The present application provides a front-end performance optimization method and system based on dynamic resource loading and rendering optimization, which is used to solve the technical problems of lack of dynamic strategy adaptation in on-demand loading scheme, and not deeply combined with rendering process, and unable to dynamically optimize according to real-time environment.

[0046] Embodiment 1:

[0047] The present application provides a front-end performance optimization method based on dynamic resource loading and rendering optimization, which includes four steps of user behavior analysis and resource classification, resource dynamic loading, rendering optimization and real-time performance monitoring.

[0048] Step S100 user behavior analysis and resource classification: listen to user behavior and collect user behavior data, predict the page block or resource type that the user may access based on the user behavior data and through the behavior prediction model, output the user behavior prediction result, and dynamically calculate the loading weight of each resource based on the resource type, the distance between the resource and the viewport, the user behavior data and the user behavior prediction result.

[0049] As a specific implementation of user behavior analysis and resource classification, this step includes the following operations:

[0050] (1) Interaction behavior detection: Real-time capture operation trajectory by document.body.addEventListener event listening technology, user scrolling, clicking and touching, record visual area change frequency and hot area click distribution, and listen to user page stay time and scrolling speed, visual area change frequency and hot area click distribution, user page stay time and scrolling speed as user behavior data, predict the page block or resource type that the user may access based on user behavior data and pre-built behavior prediction model;

[0051] (2) Resource priority marking: Identify resource type (script / style / picture) through construction tools (such as Webpack) and mark initial priority (critical / non-critical), dynamically calculate the loading weight of each resource according to resource type, resource distance from viewport, user behavior data and user behavior prediction results, and divide resources into critical resources and non-critical resources based on resource loading weight.

[0052] Step S200 resource dynamic loading: Perform performance detection on devices and networks, set resource loading mode and priority based on network status and device memory capacity according to pre-set resource loading strategy, load the content or resources required for the next screen based on user behavior prediction results when loading event is detected, predict the page block that the user may access based on user historical browsing path as the page block to be accessed, and load the resources related to the page block to be accessed from local cache.

[0053] As a specific implementation of resource dynamic loading, this step includes the following operations:

[0054] (1) According to the network status (such as 4G / wifi / weak network) and device memory capacity of the original JavaScript (navigator.connection object), set the loading mode and priority of the resource according to the pre-set resource loading strategy based on the network status and device memory capacity, specifically, dynamically switch resource versions (such as replacing high-definition pictures with Base64 thumbnails) according to the detection results, and limit the number of parallel requests through promise or async / await to avoid wideband overload, if the weak network environment is enabled, the local cache strategy is used to preferentially load the cached resources, and the Service Worker is used to realize offline availability;

[0055] (2) Through the Intersection Observer API, when a specific element is detected to be within a range of 300 pixels before entering the visible area, trigger the corresponding loading event. Based on user behavior data, determine that the current user behavior is scrolling the page. Based on the loading event, predict the page scrolling direction to obtain the next screen to be accessed by the user. Load the content or resources required for the next screen to optimize user experience and reduce waiting time during page loading;

[0056] (3) Based on user historical browsing paths, predict the page blocks that the user may access in the future time period as the to-be-accessed page blocks using a pre-configured reinforcement learning model, and load the resources associated with the to-be-accessed page blocks from the local cache. The local cache stores resources related to historical browsing pages accessed by the user, and the number of accesses to the historical browsing pages exceeds a threshold value. For example, when the user is likely to access the detail page of a product, the 3D model of the product will be automatically preloaded. This operation not only optimizes user experience and reduces waiting time, but also improves the response speed and efficiency of the website.

[0057] Step S300: Rendering optimization: For the page blocks or resources browsed by the user, the long list or component in the page block is split into multiple independent frame rendering tasks, and the frame rendering tasks are processed in batches during the idle period of the browser, and CSS style sheets matching the performance of the device are dynamically loaded according to the performance of the device.

[0058] As a specific implementation of rendering optimization, this step includes the following operations:

[0059] (1) Frame rendering: In order to improve the performance and user experience of the webpage, for the page blocks to be accessed by the user, the long list or component is split into multiple independent frame rendering tasks, and the frame rendering tasks are processed in batches during the idle period of the browser through the requestIdleCallback API provided by the browser. This can effectively avoid blocking the main thread. This method not only improves the response speed of the page, but also ensures the smoothness of the user interface, because the main thread is not occupied for a long time when processing these rendering tasks, allowing other high-priority tasks such as user interaction to be responded to in a timely manner. For some animation elements, an independent rendering layer is enabled by applying the CSS property transform: translateZ(0). This property forces the browser to use GPU acceleration for processing. In this way, page layout rearrangement and recalculation caused by animation execution can be effectively reduced, thereby optimizing the smoothness and response speed of the animation;

[0060] (2) Using the navigator.deviceMemory attribute and GPU-related APIs, the hardware performance of the device used by the user is detected, and the CSS stylesheet matching the current device performance is dynamically loaded according to the device performance. For devices with performance lower than the threshold, the shadow effect is disabled, and the frame rate of the animation is reduced. For devices with performance higher than the threshold, advanced rendering technologies including WebGL are enabled to fully utilize the graphics processing capabilities of the device, providing users with a more rich and smooth visual experience.

[0061] Step S400 real-time performance monitoring: Real-time monitoring and recording of pre-defined performance indicators, evaluating user experience based on performance indicators, if the quality of user experience is less than the threshold, loading preset content and resources on the current user browsing page.

[0062] When the embodiment performs real-time performance monitoring, performance monitoring is deployed. The preset key performance indicators are monitored and recorded in real time through the performance monitoring. The key performance indicators include first screen loading time (First ContentfulPaint, FCP) and interaction delay (FirstInput Delay, FID). Based on the key performance indicators, the user experience is evaluated. If the current page frame rate is lower than the predetermined value (i.e. lower than 25 frames per second (fps)), the preset degradation strategy is triggered. If the resource loading failure rate exceeds the threshold, switch to the content distribution network (CDN) or enable the content fallback service. Through the content fallback service, the preset content and resources are loaded on the current user browsing page.

[0063] The method of the embodiment provides dynamic resource scheduling based on weights: combining scripts, styles, and image pixels, the priority queue is generated based on the distance from the viewport and user behavior prediction, avoiding the limitations of traditional static priority division, and realizing more fine-grained resource loading control.

[0064] A cooperative event loop for rendering and loading is provided: resource loading tasks are embedded in the browser time loop mechanism, the execution order of rendering and loading is dynamically adjusted through the microtask queue, the main thread is blocked, during the key rendering path, the loading of non-critical resources is suspended, and the queueMicrotask() is used to control task scheduling, ensuring that high-priority rendering is given priority, thereby solving the problem of loading and rendering competing for main thread resources in traditional solutions

[0065] An AI-driven preloading strategy is provided: a lightweight machine learning model is integrated, the subsequent operation is predicted by analyzing the user's historical behavior, the target resource is dynamically preloaded, the user's browsing chapter is predicted according to the scrolling speed, the corresponding content is loaded in advance, and invalid resource requests are reduced.

[0066] Hard performance-aware rendering degradation is provided: device memory and GPU performance data are obtained through navigator.deviceMemory and GPUAdapterAPI, rendering mode is dynamically switched, for low-end devices, shadows and complex animations are disabled, and CSS degradation styles are enabled, while for high-end devices, 3D transformation, WebGL rendering and other high-performance effects are enabled, so that the rendering effect of "thousand faces" is realized, and the smoothness of low-end devices and the user experience of high-end devices are considered;

[0067] A WebAssembly-based rendering acceleration engine is provided: the core rendering logic is implemented through WebAssembly, which replaces the traditional JavaScript engine and improves the computing performance, and is suitable for CPU-intensive scenarios such as editors and data visualization.

[0068] Embodiment 2:

[0069] The application discloses a front-end performance optimization system based on dynamic resource loading and rendering optimization, which comprises a user behavior analysis and resource classification module, a resource dynamic loading module, a rendering optimization module and a real-time performance monitoring module.

[0070] The user behavior analysis and resource classification module is used for performing the following: listening to user behaviors and collecting user behavior data, predicting a page block or a resource type that a user is likely to access based on the user behavior data and through a behavior prediction model, outputting a user behavior prediction result, and dynamically calculating a loading weight of each resource based on a resource type, a distance between a resource and a viewport, user behavior data and the user behavior prediction result.

[0071] As a specific implementation of the user behavior analysis and resource classification module, the module is used for performing the following operations:

[0072] (1) Interaction behavior detection: the operation trajectory of user scrolling, clicking and touching is captured in real time through a document.body.addEventListener event listening technology, the visual area change frequency and the hot area click distribution are recorded, and the user page staying time and the scrolling speed are listened to, the visual area change frequency and the hot area click distribution, the user page staying time and the scrolling speed are used as user behavior data, and a page block or a resource type that a user is likely to access is predicted based on the user behavior data and through a pre-constructed behavior prediction model.

[0073] (2) Resource priority marking: identify resource types (script / style / picture) through build tools (such as Webpack) and mark initial priority (critical / non-critical), dynamically calculate the loading weight of each resource according to resource type, resource distance from the viewport, user behavior data, and user behavior prediction results, and divide resources into critical resources and non-critical resources based on resource loading weight.

[0074] The resource dynamic loading module is used to perform the following: performance detection of the device and the network, setting the loading mode and priority of the resource based on the network status and the device memory capacity according to the preset resource loading strategy, loading the content or resource required by the next screen based on the user behavior prediction result when the loading event is detected, and predicting the page blocks that the user is likely to access as the to-be-accessed page blocks based on the user historical browsing path, and loading the resources related to the to-be-accessed page blocks from the local cache.

[0075] As a specific implementation of the resource dynamic loading module, the module is used to perform the following operations:

[0076] (1) According to the original JavaScript (navigator.connection object) to detect the network status (such as 4G / wifi / weak network) and the device memory capacity, set the loading mode and priority of the resource based on the network status and the device memory capacity according to the preset resource loading strategy, specifically, dynamically switch resource versions (such as replacing high-definition pictures with Base64 thumbnails) according to the detection results, and limit the number of parallel requests through promise or async / await to avoid bandwidth overload, if the weak network environment is enabled, the local cache strategy is used to preferentially load the cached resources, and the Service Worker is used to realize offline availability;

[0077] (2) Trigger the corresponding loading event when the Intersection Observer API detects that a specific element is within 300 pixels before entering the visible area, determine the current user behavior as scrolling the page based on user behavior data, predict the page scrolling direction based on the loading event to obtain the next screen to be accessed by the user, load the content or resource required by the next screen, and optimize the user experience and reduce the waiting time during page loading;

[0078] (3) Based on the user's historical browsing path, predict the page blocks that the user is likely to visit in the future time period through the pre-configured reinforcement learning model as the to-be-visited page blocks, and load the resources associated with the to-be-visited page blocks from the local cache, wherein the local cache stores the resources of the historical browsing pages of the user, and the number of times of visiting the historical browsing pages exceeds a threshold value, for example, when the user is likely to visit the detail page of a certain commodity, the 3D model of the commodity is automatically preloaded, which optimizes not only the user experience and reduces the waiting time, but also improves the response speed and efficiency of the website.

[0079] The rendering optimization module is used to perform the following: for the page blocks or resources browsed by the user, the long list or component in the page block is split into multiple independent frame rendering tasks, and the frame rendering tasks are processed in batches during the idle period of the browser, and the CSS style sheet matching the performance of the device is dynamically loaded according to the performance of the device.

[0080] As a specific implementation of the rendering optimization module, the module is used to perform the following operations:

[0081] (1) Frame rendering: In order to improve the performance and user experience of the webpage, for the page blocks to be accessed by the user, the long list or component is split into multiple independent frame rendering tasks, and the frame rendering tasks are processed in batches during the idle period of the browser through the requestIdleCallback API provided by the browser, which can effectively avoid the blocking of the main thread. This method not only improves the response speed of the page, but also ensures the smoothness of the user interface, because the main thread is not occupied for a long time when processing these rendering tasks, thereby allowing other high-priority tasks such as user interaction to be responded in time. For part of the animation elements, an independent rendering layer is enabled, which is realized by applying the CSS property transform: translateZ(0). This property forces the browser to use GPU for accelerated processing. In this way, the page layout rearrangement and recalculation caused by animation execution can be effectively reduced, thereby optimizing the smoothness and response speed of the animation;

[0082] (2) Use navigator.deviceMemory property and GPU-related API to detect the hardware performance of the device used by the user, and dynamically load the CSS style sheet matching the current device performance according to the device performance. For devices with performance below a threshold value, disable shadow effects and reduce the frame rate of the animation. For devices with performance above a threshold value, enable advanced rendering technologies including WebGL to fully utilize the graphics processing capabilities of the device and provide users with a more rich and smooth visual experience.

[0083] The real-time performance monitoring module is configured to perform the following: monitoring and recording predefined performance indicators in real time, evaluating user experience based on the performance indicators, and loading preset content and resources on the current page browsed by the user if the quality of the user experience is less than a threshold value.

[0084] In this embodiment, the real-time performance monitoring module is configured to perform the following: deploying performance monitoring points, monitoring and recording preset key performance indicators in real time through the performance monitoring points, the key performance indicators including first contentful paint (FCP) and first input delay (FID), evaluating user experience based on the key performance indicators, triggering a preset degradation strategy if the current page frame rate is lower than a predetermined value (i.e., lower than 25 frames per second (fps)), switching to a content distribution network (CDN) or enabling a content fallback service if the resource loading failure rate exceeds a threshold value, and loading preset content and resources on the current page browsed by the user through the content fallback service.

[0085] The system of this embodiment can perform the method disclosed in Embodiment 1 to achieve front-end performance optimization.

[0086] The above describes in detail the front-end performance optimization method and system provided by the present application based on dynamic resource loading and rendering optimization. The principles and implementation modes of the present application are described by applying specific examples. The above description of the embodiments is only used to help understand the method of the present application and its core idea. Meanwhile, for those skilled in the art, the specific implementation modes and application ranges can be changed according to the idea of the present application. In summary, the content of the specification should not be understood as a limitation of the present application.

Claims

1. A front-end performance optimization method based on dynamic resource loading and rendering optimization, characterized in that: The steps include: User behavior analysis and resource classification: Monitor user behavior and collect user behavior data. Based on the user behavior data and behavior prediction model, predict the page blocks or resource types that users may visit, output the user behavior prediction results, and dynamically calculate the loading weight of each resource based on the resource type, the distance between the resource and the viewport, user behavior data, and the user behavior prediction results. Dynamic resource loading: Perform performance testing on devices and networks, set resource loading methods and priorities based on network status and device memory capacity, and according to preset resource loading strategies. When a loading event is detected, load the content or resources required for the next screen based on user behavior predictions. Predict the page blocks that users are likely to visit based on their historical browsing paths, and select them as the page blocks to be visited. Load the related resources from the local cache. Rendering optimization: For page blocks or resources browsed by users, long lists or components in the page blocks are split into multiple independent frame rendering tasks. Frame rendering tasks are batched during the browser's idle period, and CSS style sheets that match the device performance are dynamically loaded based on the device's performance. Real-time performance monitoring: Monitors and records predefined performance indicators in real time, evaluates user experience based on these indicators, and loads preset content and resources on the user's current browsing page if the user experience quality falls below a threshold.

2. The front-end performance optimization method based on dynamic resource loading and rendering optimization according to claim 1 is characterized in that: User behavior analysis and resource classification include the following steps: Interaction behavior detection: Using document.body.addEventListener event monitoring technology, we capture user scrolling, clicking, and touching operations in real time, record the frequency of changes in the visible area and the distribution of clicks in hot spots, and monitor the user's page dwell time and scrolling speed. These changes in the visible area, the distribution of clicks in hot spots, the user's page dwell time, and the scrolling speed are used as user behavior data. Based on this user behavior data, we use a pre-built behavior prediction model to predict the page blocks or resource types that the user is likely to visit. Resource priority marking: Identify resource types through construction tools and mark initial priorities. Dynamically calculate the loading weight of each resource based on resource type, distance between the resource and the viewport, user behavior data, and user behavior prediction results. Based on the resource loading weight, divide the resources into critical resources and non-critical resources.

3. The front-end performance optimization method based on dynamic resource loading and rendering optimization according to claim 1 is characterized in that: Dynamic resource loading includes the following steps: Detect network status and device memory capacity based on native JavaScript, and set resource loading mode and priority based on the network status and device memory capacity and the preset resource loading strategy; When the Intersection Observer API detects a specific element within 300 pixels of the visible area, it triggers a corresponding loading event. Based on user behavior data, if the user is scrolling, the loading event is used to predict the scrolling direction of the page to determine the next screen the user is about to visit, and then load the content or resources required for the next screen. Based on the user's historical browsing path, a pre-configured reinforcement learning model is used to predict the page blocks that the user may visit in the future time period as the page blocks to be visited, and the resources associated with the page blocks to be visited are loaded from the local cache, wherein the local cache stores resources related to the user's historical browsing pages, and the number of times the historical browsing pages have been visited exceeds a threshold.

4. The front-end performance optimization method based on dynamic resource loading and rendering optimization according to claim 1 is characterized in that: Rendering optimization includes the following steps: Frame rendering: For the page blocks that users want to access, long lists or components are split into multiple independent frame rendering tasks. During the browser's idle period, the frame rendering tasks are batched through the requestIdleCallback API provided by the browser; Use the navigator.deviceMemory property and GPU-related APIs to detect the hardware performance of the device used by the user, and dynamically load CSS style sheets that match the current device performance. For devices with performance below the threshold, choose to disable shadow effects and reduce the frame rate of animations. For devices with performance above the threshold, enable advanced rendering technologies including WebGL.

5. The front-end performance optimization method based on dynamic resource loading and rendering optimization according to claim 1 is characterized in that: During real-time performance monitoring, performance monitoring tracking points are deployed to monitor and record preset key performance indicators in real time through performance monitoring tracking points. Key performance indicators include first screen loading time and interaction delay. User experience is evaluated based on key performance indicators. If the current page frame rate is lower than the preset value, the preset degradation strategy is triggered. If the resource loading failure rate exceeds the threshold, switch to the content distribution network or enable the content backup service. The content backup service is used to load the preset content and resources on the user's current browsing page.

6. A front-end performance optimization system based on dynamic resource loading and rendering optimization, characterized in that: Including user behavior analysis and resource classification module, resource dynamic loading module, rendering optimization module and real-time performance monitoring module; The user behavior analysis and resource classification module is used to perform the following: monitor user behavior and collect user behavior data, predict the page blocks or resource types that users are likely to access based on the user behavior data and the behavior prediction model, output the user behavior prediction results, and dynamically calculate the loading weight of each resource based on the resource type, the distance between the resource and the viewport, the user behavior data, and the user behavior prediction results; The dynamic resource loading module is used to perform the following: perform performance testing on the device and network, set the resource loading method and priority based on the network status and device memory capacity according to the preset resource loading strategy, and when a loading event is detected, load the content or resources required for the next screen based on the user behavior prediction results, predict the page blocks that the user is likely to visit based on the user's historical browsing path as the page blocks to be visited, and load the related resources of the page blocks to be visited from the local cache; The rendering optimization module is used to perform the following operations: for the page blocks or resources browsed by the user, it splits long lists or components in the page blocks into multiple independent frame rendering tasks, batches the frame rendering tasks during the browser's idle period, and dynamically loads CSS style sheets that match the device performance based on the device performance; The real-time performance monitoring module is used to perform the following: real-time monitoring and recording of predefined performance indicators, evaluation of user experience based on the performance indicators, and if the user experience quality is less than a threshold, loading preset content and resources on the user's current browsing page.

7. The front-end performance optimization system based on dynamic resource loading and rendering optimization according to claim 6 is characterized in that: The user behavior analysis and resource classification module is used to perform the following operations: Interaction behavior detection: Using document.body.addEventListener event monitoring technology, we capture user scrolling, clicking, and touching operations in real time, record the frequency of changes in the visible area and the distribution of clicks in hot spots, and monitor the user's page dwell time and scrolling speed. These changes in the visible area, the distribution of clicks in hot spots, the user's page dwell time, and the scrolling speed are used as user behavior data. Based on this user behavior data, we use a pre-built behavior prediction model to predict the page blocks or resource types that the user is likely to visit. Resource priority marking: Identify resource types through construction tools and mark initial priorities. Dynamically calculate the loading weight of each resource based on resource type, distance between the resource and the viewport, user behavior data, and user behavior prediction results. Based on the resource loading weight, divide the resources into critical resources and non-critical resources.

8. The front-end performance optimization system based on dynamic resource loading and rendering optimization according to claim 6 is characterized in that: The resource dynamic loading module is used to perform the following operations: Detect network status and device memory capacity based on native JavaScript, and set resource loading mode and priority based on the network status and device memory capacity and the preset resource loading strategy; When the Intersection Observer API detects a specific element within 300 pixels of the visible area, it triggers a corresponding loading event. Based on user behavior data, if the user is scrolling, the loading event is used to predict the scrolling direction of the page to determine the next screen the user is about to visit, and then load the content or resources required for the next screen. Based on the user's historical browsing path, a pre-configured reinforcement learning model is used to predict the page blocks that the user may visit in the future time period as the page blocks to be visited, and the resources associated with the page blocks to be visited are loaded from the local cache, wherein the local cache stores resources related to the user's historical browsing pages, and the number of times the historical browsing pages have been visited exceeds a threshold.

9. The front-end performance optimization system based on dynamic resource loading and rendering optimization according to claim 6, characterized in that: The rendering optimization module is used to perform the following operations: Frame rendering: For the page blocks that users want to access, long lists or components are split into multiple independent frame rendering tasks. During the browser's idle period, the frame rendering tasks are batched through the requestIdleCallback API provided by the browser; Use the navigator.deviceMemory property and GPU-related APIs to detect the hardware performance of the device used by the user, and dynamically load CSS style sheets that match the current device performance. For devices with performance below the threshold, choose to disable shadow effects and reduce the frame rate of animations. For devices with performance above the threshold, enable advanced rendering technologies including WebGL.

10. The front-end performance optimization system based on dynamic resource loading and rendering optimization according to claim 6, characterized in that: Real-time performance monitoring is used to perform the following: deploy performance monitoring tracking points, monitor and record preset key performance indicators in real time through performance monitoring tracking points. Key performance indicators include first screen loading time and interaction delay, and evaluate user experience based on key performance indicators. If the current page frame rate is lower than the preset value, the preset degradation strategy is triggered. If the resource loading failure rate exceeds the threshold, switch to the content distribution network or enable the content backup service, and use the content backup service to load the preset content and resources on the user's current browsing page.

Images