Intelligent Front-End Rendering Optimization Method and System Based on Real-Time Environment Perception

Abstract

The embodiments of this specification disclose an intelligent front-end rendering optimization method and system based on real-time environment perception. Obtain the user behavior data and environment perception data corresponding to the terminal; based on the device weight model, network weight model, and rendering weight model, determine the resource loading variables according to the environment perception data; perform priority weighting processing on the resource loading variables to determine the priority data corresponding to the terminal; send a preset resource loading policy to the terminal according to the priority data, and the terminal performs rendering optimization on the page based on the preset resource loading policy, the progressive rendering template, and the parallel resource scheduling method; determine the multi-terminal operation conflict probability based on the user behavior data, determine the multi-terminal high-risk operation types, and execute the conflict reduction strategy based on the multi-terminal high-risk operation types for intelligent front-end rendering optimization based on real-time environment perception. The loading speed and rendering efficiency of the front-end application are improved, providing a smoother interaction experience for users.

Description

Technical Field

[0001] One or more embodiments of this specification relate to the technical field of front - end resource loading, and specifically to an intelligent front - end rendering optimization method and system based on real - time environment perception. Background Art

[0002] With the rapid development of Internet technology, front - end performance optimization has become one of the key factors in enhancing user experience. Modern Web applications and mobile applications have increasingly high requirements for resource loading speed and rendering efficiency. Especially in the case of complex network environments and uneven device performances, how to efficiently manage and load resources has become an urgent problem to be solved. Currently, front - end resource loading and rendering optimization technologies mainly rely on static resource optimization, lazy loading, and pre - loading. Static resource optimization reduces the loading time by compressing, caching, and merging resource files; lazy loading only loads resources when the user needs them, such as images or videos; the pre - loading method is to pre - load resources that may be needed in advance to reduce the user's waiting time. However, these technologies still have limitations such as lack of environment perception ability, difficulty in adapting to diverse usage scenarios, and limited dynamic adjustment ability. Therefore, there is an urgent need for an intelligent front - end rendering optimization method based on real - time environment perception. Summary of the Invention

[0003] Embodiments of this specification provide an intelligent front - end rendering optimization method and system based on real - time environment perception, and the technical solutions are as follows:

[0004] In a first aspect, embodiments of this specification provide an intelligent front - end rendering optimization method based on real - time environment perception, including: obtaining user behavior data and environment perception data corresponding to a terminal; determining a resource loading variable according to the environment perception data based on a device weight model, a network weight model, and a rendering weight model; performing priority weighting processing on the resource loading variable to determine priority data corresponding to the terminal; sending a preset resource loading policy to the terminal according to the priority data, and the terminal performs rendering optimization on the page based on the preset resource loading policy, and according to a progressive rendering template and a parallel resource scheduling method. The progressive rendering template is used to decompose the page into several rendering blocks, and dynamically adjusts the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index; determining the multi - terminal operation conflict probability based on the user behavior data, determining the multi - terminal high - risk operation types through the multi - terminal operation conflict probability, and executing a conflict reduction strategy according to the multi - terminal high - risk operation types.

[0005] In a second aspect, an intelligent front-end rendering optimization system based on real-time environment perception provided by embodiments of this specification includes: a data acquisition module, configured to acquire user behavior data and environment perception data corresponding to a terminal; a variable determination module, configured to determine resource loading variables based on an equipment weight model, a network weight model, and a rendering weight model according to the environment perception data; a priority determination module, configured to perform priority weighting processing on the resource loading variables to determine priority data corresponding to the terminal; a rendering optimization module, configured to send a preset resource loading policy to the terminal according to the priority data, and the terminal performs rendering optimization on a page based on the preset resource loading policy, and according to a progressive rendering template and a parallel resource scheduling method. The progressive rendering template is used to decompose the page into several rendering blocks, and dynamically adjust the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index; a status synchronization module, configured to determine the multi-terminal operation conflict probability based on the user behavior data, determine the multi-terminal high-risk operation type through the multi-terminal operation conflict probability, and execute a conflict reduction strategy according to the multi-terminal high-risk operation type.

[0006] The beneficial effects brought by the technical solutions provided by some embodiments of this specification at least include:

[0007] The embodiments of this specification can not only acquire environment perception data in real time, dynamically monitor information such as device performance and network status, but also determine resource loading variables based on an equipment weight model, a network weight model, and a rendering weight model according to the environment perception data. The embodiments of this specification set up an adaptive scheduling mechanism, that is, after defining resource loading variables based on the environment perception data, priority data corresponding to the terminal is also determined according to the resource loading variables, so as to not only adjust the resource loading order in real time, but also adaptively and dynamically adjust the resource loading priority and the preset resource loading policy based on the resource loading variables; the terminal performs rendering optimization on the page based on the preset resource loading policy and according to the progressive rendering template and the parallel resource scheduling method. The embodiments of this specification optimize the rendering process by combining device performance and user behavior; at the same time, the embodiments of this specification provide a status synchronization optimization mechanism, that is, predict multi-terminal high-risk operations based on user behavior data and a differential synchronization mechanism based on operation conflict prediction, and execute a conflict reduction strategy according to the multi-terminal high-risk operations. The embodiments of this specification provide a customized optimization solution according to different scenarios and device characteristics; by real-time monitoring the performance of the user device and the network environment, dynamically adjusting the resource loading and rendering strategies, the loading speed and rendering efficiency of the front-end application are improved, providing a smoother interaction experience for users; the embodiments of this specification solve the problems of insufficient environment perception, poor pertinence, and limited dynamic adjustment ability in the prior art, and provide a new solution for front-end performance optimization. Description of the Drawings

[0008] To more clearly illustrate the technical solutions in the embodiments of this specification, the accompanying drawings required for the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of this specification. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can be obtained based on these drawings.

[0009] Figure 1 It is a schematic diagram of an application scenario of an intelligent front-end rendering optimization method based on real-time environment perception provided by this specification.

[0010] Figure 2 It is a schematic diagram of the process of an intelligent front-end rendering optimization method based on real-time environment perception provided by this specification.

[0011] Figure 3 It is a schematic diagram of the process of determining resource loading variables provided by this specification.

[0012] Figure 4 It is a schematic diagram of the process of determining resource loading variables according to different types of environment perception data provided by this specification.

[0013] Figure 5 It is a schematic diagram of the process of determining priority data corresponding to a terminal provided by this specification.

[0014] Figure 6 It is a schematic diagram of the process of performing rendering optimization on a page provided by this specification.

[0015] Figure 7 It is a schematic diagram of the process of adjusting the rendering granularity provided by this specification.

[0016] Figure 8 It is a schematic diagram of the structure of an intelligent front-end rendering optimization system based on real-time environment perception provided by this specification.

[0017] Figure 9 It is a schematic diagram of the structure of an electronic device provided by this specification. Detailed implementation manners

[0018] Next, the technical solutions in the embodiments of this specification will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of this specification.

[0019] In the description, claims and the above drawings of this specification, the terms "first", "second", etc. are used to distinguish different objects, rather than to describe a specific order. In addition, the term "comprising" and any of its variations are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products or devices.

[0020] The intelligent front-end rendering optimization method based on real-time environment perception provided by multiple embodiments of this specification, and the execution subject of the intelligent front-end rendering optimization method based on real-time environment perception can be the intelligent front-end rendering optimization system provided by the embodiments of the present invention.

[0021] Before elaborating on the intelligent front-end rendering optimization method based on real-time environment perception in combination with one or more embodiments in this specification, the application scenarios of the intelligent front-end rendering optimization method based on real-time environment perception are introduced first.

[0022] Please refer to Figure 1 , Figure 1 which is a schematic diagram of the application scenario of the intelligent front-end rendering optimization method based on real-time environment perception provided by the embodiments of the present invention. In this embodiment, the intelligent front-end rendering optimization system 100 based on real-time environment perception may include a server 110 and a plurality of terminals 120, and the plurality of terminals 120 are respectively communicatively connected to the server 110.

[0023] In the embodiments of this specification, the terminal 120 may be a device such as a mobile phone, a tablet computer, a smart Bluetooth device, a laptop computer, or a personal computer (PC). The terminal 120 includes a central processing unit (CPU), a graphics processing unit (GPU), a memory, a storage device, a network communication module, sensors, a display screen, a battery, and a power management module, etc. The central processing unit can execute logical calculations, resource scheduling, and rendering optimization algorithms of the front-end application, etc.; the graphics processing unit can be used to accelerate the rendering of the front-end page, especially the rendering of complex graphics, animations, and multimedia content; the memory can be used to store the runtime data, resource files, user behavior data, and environment perception data of the front-end application, etc.; the storage device can be used to store the code, resource files, and cache data of the front-end application, etc.; the network communication module can be used to communicate with the server to obtain dynamic resources and real-time environment information, etc.; the sensors can be used to sense the environmental state of the user device in real time. For example, the network sensor is used to obtain network bandwidth, latency, and connection status, etc. Another example is that the performance sensor is used to obtain the CPU, GPU, and memory usage of the terminal 120, etc. Another example is that the screen sensor can obtain the screen resolution, brightness, and refresh rate, etc.; the display screen can be used to present the content of the front-end application; the battery and power management module can provide power support for the device to run and optimize energy consumption.

[0024] The server 110 in the embodiments of this specification may be a single server or a server cluster composed of multiple servers, and multiple servers are used to implement the intelligent front-end rendering optimization method based on real-time environment perception of this application.

[0025] The server 110 in the embodiments of this specification may include a data acquisition module, a variable determination module, a priority determination module, a rendering optimization module, and a status synchronization module, etc. The server 110 in the embodiments of this specification may first acquire the environment perception data corresponding to the terminal 120; then, based on the device weight model, the network weight model, and the rendering weight model, determine the resource loading variables according to the environment perception data; then perform priority weighting processing on the resource loading variables to determine the priority data corresponding to the terminal 120; then send a preset resource loading policy to the terminal 120 according to the priority data, and the terminal 120 performs rendering optimization on the page based on the preset resource loading policy and according to the progressive rendering template and the parallel resource scheduling method; then predict multi-terminal high-risk operations based on the user behavior data and the differential synchronization mechanism based on operation conflict prediction, and execute a conflict reduction policy according to the multi-terminal high-risk operations.

[0026] It should be noted that Figure 1The scenario schematic diagram of the intelligent front-end rendering optimization system 100 based on real-time environment perception shown is merely an example. The intelligent front-end rendering optimization system and scenario described in the embodiments of the present invention are for more clearly explaining the technical solutions of the embodiments of the present invention, and do not constitute a limitation on the technical solutions provided by the embodiments of the present invention. Those of ordinary skill in the art can know that with the evolution of the intelligent front-end rendering optimization system based on real-time environment perception and the emergence of new scenarios, the technical solutions provided by the embodiments of the present invention are equally applicable to similar technical problems.

[0027] Please refer to Figure 2 , Figure 2 which is a flowchart of the intelligent front-end rendering optimization method based on real-time environment perception provided by the embodiments of the present invention. This intelligent front-end rendering optimization method based on real-time environment perception can be executed by Figure 1 the intelligent front-end rendering optimization system 100 shown. This intelligent front-end rendering optimization method based on real-time environment perception can at least include the following steps:

[0028] 200. Obtain the user behavior data and environment perception data corresponding to the terminal.

[0029] In this embodiment, the server 110 can obtain the user behavior data and environment perception data corresponding to the terminal 120. The user behavior data can be the operation data of the user during the use of the terminal, and can include the operation type (such as insert, delete, update, etc.), operation location, timestamp, user ID, and session ID, etc. The environment perception data can be the data related to device performance, network quality, and rendering pressure obtained by the terminal; the environment perception data can include the processor clock frequency, the number of processor cores, the memory capacity, the graphics processing unit benchmark score, the transmission capacity of the network, the latency duration, the jitter rate, the remaining battery power of the terminal, the terminal temperature, and the number of frames per unit time, etc.

[0030] In this embodiment, the terminal 120 can first obtain the environment perception data, and then upload the environment perception data to the server 110.

[0031] 210. Based on the device weight model, network weight model, and rendering weight model, determine the resource loading variable according to the environment perception data.

[0032] In this embodiment, the resource loading variable can be a variable related to the resource loading strategy, and the resource loading variable can include the device capability index, network quality rating, and rendering pressure coefficient, etc.

[0033] In this embodiment, the device weight model can be a model that determines the device capability index based on data such as the processor clock frequency, the number of processor cores, the memory capacity, and the graphics processing unit benchmark score; the network weight model can be a model that determines the network quality rating based on data such as the transmission capacity, the latency duration, and the jitter rate of the network; the rendering weight model can be a model that determines the rendering pressure coefficient based on data such as the remaining battery power of the terminal, the terminal temperature, and the number of frames per unit time.

[0034] In some embodiments, refer to Figure 3 , Figure 3 which is a schematic flowchart of the process for determining the resource loading variable provided by the embodiment of the present invention. Based on the device weight model, the network weight model, and the rendering weight model, the resource loading variable is determined according to the environmental perception data, including:

[0035] 2100. Obtain the first environmental perception data, the second environmental perception data, and the third environmental perception data;

[0036] 2110. Based on the device weight model, the network weight model, and the rendering weight model, determine the device capability index, the network quality rating, and the rendering pressure coefficient respectively according to the first environmental perception data, the second environmental perception data, and the third environmental perception data.

[0037] In this embodiment, the first environmental perception data can be the environmental perception data corresponding to the device capability index, the second environmental perception data can be the environmental perception data corresponding to the network quality rating, and the third environmental perception data can be the environmental perception data corresponding to the rendering pressure coefficient. The server 110 in this embodiment can determine resource loading variables such as the device capability index, the network quality rating, and the rendering pressure coefficient according to different types of environmental perception data.

[0038] In some embodiments, refer to Figure 4 , Figure 4 which is a schematic flowchart of the process for determining the resource loading variable according to different types of environmental perception data provided by the embodiment of the present invention. Based on the device weight model, the network weight model, and the rendering weight model, determine the device capability index, the network quality rating, and the rendering pressure coefficient respectively according to the first environmental perception data, the second environmental perception data, and the third environmental perception data, including:

[0039] 2112. Based on the device weight model, determine the device capability index according to the processor clock frequency, the number of processor cores, the memory capacity, and the graphics processing unit benchmark score;

[0040] 2114. Based on the network weight model, determine the network quality rating according to the transmission capacity, the latency duration, and the jitter rate of the network;

[0041] 2116. Based on the rendering weight model, determine the rendering pressure coefficient according to the remaining power of the terminal, the terminal temperature, and the number of frames per unit time.

[0042] In this embodiment, the processor clock frequency can be the frequency of the internal clock signal of the CPU, expressed in hertz. For example, the processor clock frequency is 3.5 GHz. The higher the processor clock frequency, the more instructions the CPU can execute per unit time, and the faster the computing speed. The number of processor cores can be the number of independent computing units inside the CPU. For example, a 4-core CPU means there are 4 independent cores inside the CPU, and each core can execute different tasks simultaneously. The more the number of cores, the stronger the parallel processing ability of the CPU. The memory can be the main memory of the terminal, used to temporarily store running programs and data; the memory capacity can be one of the important indicators to measure the memory performance, indicating the capacity size of the terminal. The graphics processing unit benchmark score can be the score obtained by evaluating the GPU performance through a benchmark program, used to measure the performance level of the GPU.

[0043] In the embodiment of this specification, the server 110 can determine the device capability index based on the device weight model according to the processor clock frequency, the number of processor cores, the memory capacity, and the graphics processing unit benchmark score. The device weight model in the embodiment of this specification can be: device capability index = 0.4×log2(processor clock frequency × number of processor cores) + 0.3×(memory capacity / 4) + 0.3×graphics processing unit benchmark score. The server 110 in the embodiment of this specification can also divide the device capabilities into different levels according to the size of the device capability index. For example, when the device capability index is greater than 0.7, it can indicate that the device performance of the terminal is high; when the device capability index is not greater than 0.7 and greater than 0.4, it can indicate that the device performance of the terminal is medium; when the device capability index is not greater than 0.4, it can indicate that the device performance of the terminal is low.

[0044] In this embodiment, the transmission capacity of the network, that is, the bandwidth, can be expressed in bit rate. The higher the bandwidth, the faster the network transmits data. The latency duration can be the time required for data to be sent from the server to the terminal. The jitter rate can be the degree of change in latency, an indicator representing network stability.

[0045] The server 110 in the embodiments of this specification can determine the network quality rating based on the network weight model according to the transmission capacity, latency duration, and jitter rate of the network. The network weight model in the embodiments of this specification can be: Network quality rating = (network transmission capacity / 10) × 0.6 + (1000 / latency duration) × 0.3 + (1 - jitter rate) × 0.1. The server 110 in the embodiments of this specification can also divide the network quality into different levels according to the size of the network quality rating. For example, when the network quality rating is greater than 0.8, it can indicate excellent network quality; when the network quality rating is not greater than 0.8 and greater than 0.6, it can indicate good network quality; when the network quality rating is not greater than 0.6, it can indicate poor network quality.

[0046] In this embodiment, the number of frames per unit time can be the number of frames of the image displayed by the terminal per unit time (such as per second), which is used to measure the smoothness of videos, animations, etc. displayed on the terminal.

[0047] The server 110 in the embodiments of this specification can determine the rendering pressure coefficient based on the rendering weight model according to the remaining battery power of the terminal, the terminal temperature, and the number of frames per unit time. The rendering weight model in the embodiments of this specification can be: Rendering pressure coefficient = (remaining battery power of the terminal / 100) × 0.5 + (1 - min(terminal temperature / 70, 1)) × 0.3 + (number of frames per unit time / 60) × 0.2, and min(terminal temperature / 70, 1)) can be the minimum value between terminal temperature / 70 and the value 1. The server 110 in the embodiments of this specification can also divide the rendering pressure into different levels according to the rendering pressure coefficient. For example, when the rendering pressure coefficient is greater than 0.7, it can indicate low rendering pressure; when the rendering pressure coefficient is not greater than 0.7 and greater than 0.5, it can indicate medium rendering pressure; when the rendering pressure coefficient is not greater than 0.5, it can indicate high rendering pressure.

[0048] 220. Perform priority weighting on the resource loading variables to determine the priority data corresponding to the terminal.

[0049] The server 110 in the embodiments of this specification can set an adaptive scheduling mechanism, that is, after defining the resource loading variables based on the environment perception data, it also determines the priority data corresponding to the terminal according to the resource loading variables, so as to not only adjust the resource loading order in real time, but also adaptively and dynamically adjust the resource loading priority and the preset resource loading strategy based on the resource loading variables.

[0050] In some embodiments, please refer to Figure 5 , Figure 5 is a schematic flowchart of the process for determining the priority data corresponding to the terminal provided by the embodiments of the present invention. Performing priority weighting on the resource loading variables to determine the priority data corresponding to the terminal includes:

[0051] 2200. Obtain the first coefficient, the second coefficient, the third coefficient, and the rendering idle coefficient. The rendering idle coefficient is the difference between the first preset data and the rendering pressure coefficient;

[0052] 2210. Based on the first coefficient, determine the device capacity ratio according to the first coefficient and the device capacity index;

[0053] 2220. Based on the second coefficient, determine the network quality ratio according to the second coefficient and the network quality rating;

[0054] 2230. Based on the third coefficient, determine the rendering idle ratio according to the third coefficient and the rendering idle coefficient;

[0055] 2240. Add the device capacity ratio, the network quality ratio, and the rendering idle ratio to obtain the priority data.

[0056] In this embodiment, to obtain the first coefficient, the second coefficient, the third coefficient, and the rendering idle coefficient, a priority score model can be established first. The priority score model can be: Priority score = (y1 × device capacity index) + (y2 × network quality rating) + (y3 × (y4 - rendering pressure coefficient)), where y1 is the first coefficient, y2 is the second coefficient, y3 is the third coefficient, y4 is the first preset data, (y1 × device capacity index) can be the device capacity ratio, (y2 × network quality rating) can be the network quality ratio, and (y3 × (y4 - rendering pressure coefficient)) can be the rendering idle ratio.

[0057] The server 110 in the embodiment of this specification can obtain the model training historical data. The model training historical data can include a large amount of historical data on network quality rating, device capacity index, rendering pressure coefficient, and the corresponding priority score historical data set. Then, input the model training historical data into the priority score model to train the priority score model, obtain the trained priority score model, and save the trained priority score model. When it is necessary to determine the priority data corresponding to the terminal, the trained priority score model can be directly called to obtain the priority score corresponding to the terminal. In this embodiment, the first coefficient y1 can be 0.3, the second coefficient y2 can be 0.5, the third coefficient y3 can be 0.2, and the first preset data can be 1.

[0058] 230. Send a preset resource loading policy to the terminal according to the priority data. The terminal, based on the preset resource loading policy, and according to the progressive rendering template and the parallel resource scheduling method, optimizes the rendering of the page.

[0059] The embodiments of this specification set up a progressive rendering template, that is, the page is decomposed into several rendering blocks, and the rendering granularity corresponding to the several rendering blocks is dynamically adjusted according to the viewport change value and the device capability index.

[0060] In some embodiments, a preset resource loading policy is sent to the terminal according to the priority data, including: when the priority data meets the first threshold range, a first resource loading policy is sent to the terminal, and the first resource loading policy includes loading the core HTML framework, core CSS inline styles, JavaScript files within a preset size range, and WebP images with standard resolution in sequence; when the priority data meets the second threshold range, a second resource loading policy is sent to the terminal, and the second resource loading policy includes loading the preloaded full resource package, high-resolution images, WebAssembly modules, and rich media resources in sequence; when the priority data meets the third threshold range, a third resource loading policy is sent to the terminal, and the third resource loading policy includes loading HTML in chunks, CSS modules on demand, loading adaptive high-definition images, and lazy loading non-first-screen JS.

[0061] In this embodiment, the server 110 can set different resource loading policies according to the priority data. For example, when the priority data meets the first threshold range, a first resource loading policy is sent to the terminal 120, and the terminal 120 executes the first resource loading policy; for another example, when the priority data meets the second threshold range, a second resource loading policy is sent to the terminal 120, and the terminal 120 executes the second resource loading policy; for another example, when the priority data meets the third threshold range, a third resource loading policy is sent to the terminal 120, and the terminal 120 executes the third resource loading policy.

[0062] The server 110 in the embodiments of this specification can determine the priority data corresponding to the terminal according to the resource loading variables, so as to not only adjust the resource loading order in real time, but also adaptively and dynamically adjust the resource loading priority and the preset resource loading policy based on the resource loading variables.

[0063] In the embodiments of this specification, corresponding special processing can also be performed for different preset resource loading strategies. For example, when the device capabilities are low (device capability index is 0.3), the network quality is poor (network quality rating is 0.5), and the rendering pressure is high (rendering pressure coefficient is 0.4), the calculated priority data meets the first threshold range, and the terminal 120 executes the first resource loading strategy. At the same time, all non-core fonts can be turned off, video autoplay can be disabled, and DNS pre-resolution optimization can be enabled. Another example is when the device capabilities are high (device capability index is 0.8), the network quality is excellent (network quality rating is 0.9), and the rendering pressure is low (rendering pressure coefficient is 0.8), the calculated priority data meets the second threshold range, and the terminal 120 executes the second resource loading strategy. At the same time, WebGL texture streaming loading can be enabled, third-party SDKs can be loaded in parallel, and Service Worker caching can be enabled. Another example is when the device capabilities are medium (device capability index is 0.6), the network quality is good (network quality rating is 0.7), and the rendering pressure is medium (rendering pressure coefficient is 0.6), the calculated priority data meets the third threshold range, and the terminal 120 executes the third resource loading strategy. At the same time, the content within 30% of the viewport below can be intelligently pre-loaded, and the image decoding complexity can be dynamically adjusted.

[0064] In some embodiments, please refer to Figure 6 , Figure 6 which is a schematic flowchart of rendering optimization for a page provided by the embodiments of the present invention. The terminal performs rendering optimization on the page based on a preset resource loading strategy and according to a progressive rendering template and a parallel resource scheduling method, including:

[0065] 2300. Obtain the user behavior data and device capability index corresponding to the terminal;

[0066] 2310. Based on the LSTM-based scrolling trajectory prediction algorithm, determine the viewport change value according to the user behavior data;

[0067] 2320. Decompose the page into several rendering blocks, and dynamically adjust the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index;

[0068] 2330. Based on the parallel resource scheduling algorithm, select the animation rendering method corresponding to the graphics processor performance index of the terminal;

[0069] 2340. Render and optimize the page according to the rendering granularity corresponding to the several rendering blocks and the animation rendering method.

[0070] In this embodiment, the user behavior data corresponding to the terminal may be the operation data during the use of the terminal, which may include operation types (such as insert, delete, update), operation locations, timestamps, user IDs, session IDs, etc. The rolling trajectory prediction algorithm based on Long Short-Term Memory (LSTM) is a method for predicting future trajectories using deep learning technology, which is used to process time series data, and LSTM can capture long-term dependencies in time series data. The viewport change value may be the change of the viewport position and size over time. For example, the viewport change value is the distance and direction of the user's page scrolling, and it can also be the change of the viewport size (such as browser window zooming), etc. The embodiments of this specification may be based on the rolling trajectory prediction algorithm of LSTM, and then predict the viewport change value according to the user behavior data.

[0071] The embodiments of this specification may decompose the page into multiple rendering blocks and dynamically adjust the rendering granularity according to the viewport change and device performance.

[0072] The parallel resource scheduling algorithm in the embodiments of this specification may be an algorithm for managing and optimizing the allocation of GPU computing resources, which can maximize GPU utilization, improve task execution efficiency, and meet the priority requirements of different tasks. The parallel resource scheduling algorithm may be time-sliced scheduling, that is, dividing GPU resources into time slices and allocating them to different tasks in turn; the parallel resource scheduling algorithm may also be priority-based scheduling, allocating GPU resources according to the priority of tasks, and high-priority tasks are executed first; the parallel resource scheduling algorithm may also be resource-based scheduling, allocating GPU resources according to the resource requirements of tasks (such as video memory occupancy, computing volume). The parallel resource scheduling algorithm may also adjust the resource allocation according to the dynamic requirements of tasks, so as to adapt to the dynamic changes of tasks and has strong flexibility. The embodiments of this specification may automatically detect the GPU capabilities through the parallel resource scheduling algorithm, enable WebGL acceleration for complex animations, and degrade to CSS animations for low-end devices.

[0073] The terminal 120 in the embodiments of this specification combines device performance and user behavior, and may render the page based on a preset resource loading strategy, and according to the progressive rendering template and the parallel resource scheduling method, which optimizes the rendering process. The embodiments of this specification dynamically adjust the resource loading and rendering strategies by real-time monitoring the user device performance and network environment, improve the loading speed and rendering efficiency of the front-end application, and provide a smoother interaction experience for users.

[0074] In some embodiments, please refer to Figure 7 , Figure 7It is a schematic flowchart of adjusting the rendering granularity provided by an embodiment of the present invention. The page is decomposed into several rendering blocks, and the rendering granularity corresponding to the several rendering blocks is dynamically adjusted according to the viewport change value and the device capability index, including:

[0075] 2322. Perform DOM preprocessing, which includes stacking context recognition and semantic block division;

[0076] 2324. Obtain several rendering block metrics of the rendering block;

[0077] 2326. Determine the block weight of the rendering block according to the several rendering block metrics of the rendering block;

[0078] 2328. Determine the rendering granularity of the rendering block according to the block weight of the rendering block and the device capability index.

[0079] In this embodiment, the DOM preprocessing stage may include stacking context recognition and semantic block division. When performing stacking context recognition in the embodiments of this specification, the terminal can automatically recognize the elements that form independent stacking contexts by parsing CSS styles as basic atomic blocks. The recognition rules include: elements with position: absolute / relative / fixed set and z-index not auto; elements containing properties that trigger composition such as transform, filter, opacity < 1; elements that explicitly declare the will-change property. When performing semantic block division in the embodiments of this specification, non-stacking context DOM nodes can be intelligently merged according to semantic rules, including: text stream merging, that is, adjacent 、 Merge in-line elements such as etc. into text blocks; aggregate list items, that is Elements are merged into a list block when no independent style is set; table optimization, i.e., a table with more than 10 columns is automatically split into left and right sliding blocks.

[0080] In this embodiment, the rendering block metrics can be a set of metrics for analyzing and optimizing rendering performance, used to evaluate the time overhead and resource usage in each stage of the rendering process. Several rendering block metrics can include viewport visibility, interaction heat value, DOM complexity, content update frequency, and animation intensity, etc. The viewport visibility can be the visible degree of an element in the current viewport on the page, and the viewport visibility can be measured by the proportion of the visible area, that is, the percentage of the part of the element visible in the viewport to its total area. The interaction heat value can refer to the heat of user interaction with the page, and the spatio-temporal distribution based on click or scroll events can be determined based on the Gaussian decay model. The DOM complexity can be the structure and depth of the page Document Object Model (DOM), and can be measured by the number of DOM nodes, node levels, and nesting relationships. The content update frequency can be the update frequency of dynamic content on the page, and can be measured by the number of content updates per unit time. The animation intensity can be the complexity and frequency of animation effects on the page, and can be measured by the frame rate, duration, complexity, etc. of the animation.

[0081] In some embodiments, determining the block weight of a rendering block according to several rendering block metrics of the rendering block includes: determining the weight coefficients corresponding to several rendering block metrics; performing weighted processing on several rendering block metrics of the rendering block according to the weight coefficients corresponding to several rendering block metrics to obtain the block weight of the rendering block.

[0082] This embodiment provides a dynamic chunking strategy, that is, the block weight of each rendering block can be determined through a block weight calculation model, and the corresponding rendering update strategy can be executed. The block weight calculation model can be: block weight = 0.5 × viewport visibility + 0.2 × interaction heat value + 0.15 × DOM complexity + 0.1 × content update frequency + 0.05 × animation intensity. Embodiments of this specification can dynamically calculate the block weight of each rendering block through multi-dimensional rendering block metrics in the block weight calculation model, and determine the rendering granularity of the rendering block by combining the block weight of the rendering block and the device capability index.

[0083] In this embodiment, when the device capability index is greater than the high capability threshold (e.g., 0.8) and the block weight is greater than the high weight threshold (e.g., 0.7), the rendering granularity of the rendering block can be set to the atomic level (corresponding to a single element), and the update strategy can be immediate rendering, that is, whenever there is a rendering task, the rendering operation is immediately executed, and the delay time can be less than the preset delay duration (e.g., less than 16 ms). When the device capability index is not less than the low capability threshold (e.g., 0.6) and not greater than the high capability threshold (e.g., 0.8), and the block weight is not less than the low weight threshold (e.g., 0.5) and not greater than the high weight threshold (e.g., 0.7), the rendering granularity of the rendering block can be set to the component level (corresponding to a functional module), and the update strategy can be batch update, that is, multiple rendering tasks are combined into one batch according to the update interval (e.g., 50 ms) and submitted to the GPU for execution at one time to reduce the rendering call overhead and improve the rendering efficiency. When the device capability index is less than the low capability threshold (e.g., 0.6) and the block weight is less than the low weight threshold (e.g., 0.5), the rendering granularity of the rendering block can be set to the page level (corresponding to the entire screen block), and the update strategy can be lazy update, and the update interval duration can be greater than the preset interval duration (e.g., greater than 200 ms).

[0084] 240. Determine the multi-terminal operation conflict probability based on the user behavior data, determine the multi-terminal high-risk operation types through the multi-terminal operation conflict probability, and execute the conflict reduction strategy according to the multi-terminal high-risk operation types.

[0085] In this embodiment, the user behavior data can be the operation data of the user during the use of the terminal, and can include the operation type (such as insert, delete, update, etc.), the operation location, the timestamp, the user ID, the session ID, etc. The embodiment of the present specification is based on the differential synchronization mechanism for operation conflict prediction to reduce the data transmission volume during multi-terminal state synchronization. In order to reduce the data conflict during multi-terminal synchronization, the server of the embodiment of the present specification sets up a conflict prediction model based on the user behavior pattern, and this model can predict the high-risk operations that may cause conflicts by analyzing the historical operation data.

[0086] In some embodiments, please refer to Figure 7 , Figure 7 is the schematic flowchart of the process for executing the conflict reduction strategy provided by the embodiment of the present invention. Determine the multi-terminal operation conflict probability based on the user behavior data, determine the multi-terminal high-risk operation types through the multi-terminal operation conflict probability, and execute the conflict reduction strategy according to the multi-terminal high-risk operation types, including:

[0087] 2400. Obtain the user behavior data corresponding to several terminals;

[0088] 2410. Obtain the operation characteristics corresponding to several terminals according to the user behavior data corresponding to several terminals;

[0089] 2420. Determine the user operation time difference, location overlap degree, and user behavior similarity between any two terminals based on the operation characteristics corresponding to the two terminals.

[0090] 2430. Determine the multi-terminal operation conflict probability based on the user operation time difference, location overlap degree, and user behavior similarity among several terminals.

[0091] 2440. When the multi-terminal operation conflict probability is higher than a preset threshold, determine the multi-terminal high-risk operation type according to the multi-terminal operation conflict probability, and execute the corresponding conflict reduction strategy according to the multi-terminal high-risk operation type.

[0092] In this embodiment, the operation characteristics corresponding to several terminals may include the operation type (such as insert, delete, update, etc.), operation location, timestamp, user ID, and session ID in the user behavior data.

[0093] In this embodiment, in the multi-terminal collaboration scenario, there may be a situation where multiple users or devices operate on the same data simultaneously. For example, multiple users edit a document, a table, or code through terminals at the same time. Such concurrent operations may lead to operation conflicts, that is, the modifications to the data by different terminals are inconsistent, which may further lead to data errors or losses. To solve this problem, the embodiments of this specification propose a differential synchronization mechanism based on operation conflict prediction. This mechanism is a technology for multi-terminal collaborative operations, used to solve the conflict problems that may occur when multiple terminals operate on shared data simultaneously. The differential synchronization mechanism based on operation conflict prediction in the embodiments of this specification realizes efficient and consistent data synchronization by predicting potential operation conflicts and only transmitting differences (differential data) during synchronization.

[0094] In this embodiment, the user operation time difference may be the time interval between the operations of users corresponding to different terminals. The terminals in this embodiment can record the timestamps of user operations and upload them to the server. The server calculates the time difference between two operations. If the time difference is less than the preset time difference threshold, it indicates a high conflict probability. For example, when two users edit the same paragraph, the server can determine that the current operation of the users has a high conflict risk. The location overlap degree may be the degree of overlap of the target areas or locations of different user operations. The terminal can record the specific locations of user operations (such as paragraphs, line numbers in a document, or specific areas on a page) and upload them to the server. The server measures the specific locations of different user operations to obtain the degree of location overlap. When the location overlap degree is greater than the overlap degree threshold, it indicates a high conflict probability. The user behavior similarity may be the degree of similarity of the operation behaviors of different users. The terminal can upload the operation types of users to the server. The server can analyze the operation types of users (such as editing, deleting, adding, etc.). Embodiments of this specification can compare the operation modes of different users and then determine whether the operation modes are similar. For example, when two users simultaneously perform a "deleting" operation on the same paragraph, the server determines that the behavior similarity of the two users is high. Embodiments of this specification can determine the multi-terminal operation conflict probability according to any one of the user operation time difference, location overlap degree, and user behavior similarity among several terminals. Embodiments of this specification can also perform weighted summation processing on the obtained user operation time difference, location overlap degree, and user behavior similarity to determine the multi-terminal operation conflict probability.

[0095] In the embodiments of this specification, when the multi-terminal operation conflict probability is higher than a preset threshold, the multi-terminal high-risk operation type can be determined according to the multi-terminal operation conflict probability, and the corresponding conflict reduction strategy can be executed according to the multi-terminal high-risk operation type. The server in the embodiments of this specification can determine the multi-terminal high-risk operation type according to the multi-terminal operation conflict probability. The multi-terminal high-risk operation type can be location conflict, semantic conflict, or timing conflict. For example, when the server determines that the multi-terminal high-risk operation type is a location conflict, it indicates that the target locations of different users' operations completely or partially overlap. When executing the corresponding conflict reduction strategy according to the multi-terminal high-risk operation type of location conflict, the server can allow the operation of the first user to be completed first, and the operations of subsequent users are temporarily suspended or a conflict is prompted. Another example is that one user adds a certain sentence, while another user deletes the same sentence. The server determines that the multi-terminal high-risk operation type is a semantic conflict. The server can, according to the operation type, preferentially retain certain operations (such as preferentially retaining the "add" operation rather than the "delete" operation). Another example is that the operations of multiple users are close in time, which may cause the latter operation to overwrite the former operation (such as user A modifies a certain paragraph, and user B also modifies the same paragraph without synchronization). The server determines that the multi-terminal high-risk operation type is a timing conflict. The server can, according to the timestamp of the operation, preferentially retain the latest operation and prompt the user that other operations may be overwritten.

[0096] In this embodiment, the terminal collects user device performance data, network status data, and user behavior data in real time and uploads them to the server. The server determines the priority order of resource loading according to the data collected by the terminal through a preset intermediate variable calculation formula and weight allocation, and formulates different loading strategies accordingly. The terminal in the embodiments of this specification can also decompose the page into multiple rendering blocks, dynamically adjust the rendering granularity according to the viewport change and device performance, and based on the GPU resource scheduling algorithm, select a suitable animation rendering method according to the device's GPU capabilities. The server in the embodiments of this specification can also reduce the data transmission volume during multi-terminal state synchronization based on the differential synchronization mechanism of operation conflict prediction, calculate the conflict probability by analyzing operation characteristics, and classify and process different types of conflicts.

[0097] The embodiments of this specification can not only obtain environmental perception data in real time, dynamically monitor information such as device performance and network status, but also determine resource loading variables based on the device weight model, network weight model, and rendering weight model according to the environmental perception data. The embodiments of this specification set up an adaptive scheduling mechanism, that is, after defining the resource loading variables based on the environmental perception data, it also determines the priority data corresponding to the terminal according to the resource loading variables, so as to not only adjust the resource loading order in real time, but also adaptively and dynamically adjust the resource loading priority and the preset resource loading strategy based on the resource loading variables; the terminal optimizes the page rendering based on the preset resource loading strategy and according to the progressive rendering template and the parallel resource scheduling method. The embodiments of this specification optimize the rendering process by combining device performance and user behavior; at the same time, the embodiments of this specification provide a status synchronization optimization mechanism, that is, predict high-risk operations of multiple terminals based on user behavior data and the differential synchronization mechanism based on operation conflict prediction, and execute a conflict reduction strategy according to the high-risk operations of multiple terminals. The embodiments of this specification provide a customized optimization solution according to different scenarios and device characteristics; by real-time monitoring the performance of the user device and the network environment, dynamically adjusting the resource loading and rendering strategies, the loading speed and rendering efficiency of the front-end application are improved, providing a smoother interaction experience for users; the embodiments of this specification solve the problems of insufficient environmental perception, poor pertinence, and limited dynamic adjustment ability in the prior art, and provide a new solution for front-end performance optimization.

[0098] The above describes specific embodiments of this specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than in the embodiments and still achieve the desired result. Additionally, the processes depicted in the figures do not necessarily require the particular order or sequential order shown to achieve the desired result. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0099] Please refer to Figure 8 , Figure 8 which is a schematic structural diagram of an intelligent front-end rendering optimization system based on real-time environmental perception provided by the embodiments of this specification.

[0100] As Figure 8 shown, the intelligent front-end rendering optimization system based on real-time environmental perception can at least include a data acquisition module 800, a variable determination module 810, a priority determination module 820, a rendering optimization module 830, and a status synchronization module 840, where:

[0101] The data acquisition module 800 is used to acquire user behavior data and environmental perception data corresponding to the terminal.

[0102] A variable determination module 810, configured to determine a resource loading variable according to environment perception data based on a device weight model, a network weight model, and a rendering weight model.

[0103] A priority determination module 820, configured to perform priority weighting processing on the resource loading variable to determine priority data corresponding to the terminal.

[0104] A rendering optimization module 830, configured to send a preset resource loading policy to the terminal according to the priority data. The terminal is based on the preset resource loading policy and renders and optimizes the page according to a progressive rendering template and a parallel resource scheduling method. The progressive rendering template is used to decompose the page into several rendering blocks, and dynamically adjusts the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index.

[0105] A status synchronization module 840, configured to determine the multi-terminal operation conflict probability based on user behavior data, determine the multi-terminal high-risk operation type through the multi-terminal operation conflict probability, and execute a conflict reduction strategy according to the multi-terminal high-risk operation type.

[0106] In some embodiments, the resource loading variable includes a device capability index, a network quality rating, and a rendering pressure coefficient. The variable determination module 810 includes a data acquisition sub-module and a loading variable module. The data acquisition sub-module is configured to acquire first environment perception data, second environment perception data, and third environment perception data. The first environment perception data, the second environment perception data, and the third environment perception data are respectively the environment perception data corresponding to the device capability index, the environment perception data corresponding to the network quality rating, and the environment perception data corresponding to the rendering pressure coefficient. The loading variable module is configured to determine the device capability index, the network quality rating, and the rendering pressure coefficient respectively based on the first environment perception data, the second environment perception data, and the third environment perception data according to the device weight model, the network weight model, and the rendering weight model.

[0107] In some embodiments, the loading variable module includes a loading variable sub-module. The loading variable sub-module is configured to: determine the device capability index based on the device weight model according to the processor clock frequency, the number of processor cores, the memory capacity, and the graphics processing unit benchmark score; determine the network quality rating based on the network weight model according to the transmission capacity, the latency duration, and the jitter rate of the network; determine the rendering pressure coefficient based on the rendering weight model according to the remaining battery power of the terminal, the terminal temperature, and the number of frames per unit time.

[0108] In some embodiments, the priority determination module 820 includes a priority calculation module, and the priority calculation module is configured to: obtain a first coefficient, a second coefficient, a third coefficient, and a rendering idle coefficient, where the rendering idle coefficient is the difference between a first preset data and a rendering pressure coefficient; based on the first coefficient, determine the device capacity ratio according to the first coefficient and the device capacity index; based on the second coefficient, determine the network quality ratio according to the second coefficient and the network quality rating; based on the third coefficient, determine the rendering idle ratio according to the third coefficient and the rendering idle coefficient; perform an addition process on the device capacity ratio, the network quality ratio, and the rendering idle ratio to obtain priority data.

[0109] In some embodiments, the rendering optimization module 830 includes a loading module, and the loading module is configured to: when the priority data meets the first threshold range, send a first resource loading policy to the terminal, where the first resource loading policy includes loading the core HTML framework, the core CSS inline style, JavaScript files within a preset size range, and WebP images with standard resolution in sequence; when the priority data meets the second threshold range, send a second resource loading policy to the terminal, where the second resource loading policy includes loading the preloaded full - volume resource package, high - resolution images, WebAssembly modules, and rich media resources in sequence; when the priority data meets the third threshold range, send a third resource loading policy to the terminal, where the third resource loading policy includes loading HTML in chunks, CSS modules on demand, loading adaptive high - definition images, and lazy - loading non - first - screen JS.

[0110] In some embodiments, the rendering optimization module 830 further includes an optimization sub - module, and the optimization sub - module is configured to: obtain the user behavior data corresponding to the terminal and the device capacity index; based on the LSTM - based scrolling trajectory prediction algorithm, determine the viewport change value according to the user behavior data; decompose the page into several rendering blocks, and dynamically adjust the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capacity index; based on the parallel resource scheduling algorithm, select the animation rendering method corresponding to the graphics processor performance index of the terminal; perform rendering optimization on the page according to the rendering granularity corresponding to the several rendering blocks and the animation rendering method.

[0111] In some embodiments, the optimization sub - module includes a granularity adjustment module, and the granularity adjustment module is configured to: perform DOM pre - processing, where the DOM pre - processing includes stacking context recognition and semantic block division; obtain several rendering block metrics of the rendering block, where the several rendering block metrics include viewport visibility, interaction heat value, DOM complexity, content update frequency, and animation intensity; determine the block weight of the rendering block according to the several rendering block metrics of the rendering block; determine the rendering granularity of the rendering block according to the block weight of the rendering block and the device capacity index.

[0112] In some embodiments, the granularity adjustment module includes a block weight module, and the block weight module is configured to: determine weight coefficients corresponding to a plurality of rendering block metrics; perform weighted processing on the plurality of rendering block metrics of the rendering block according to the weight coefficients corresponding to the plurality of rendering block metrics to obtain the block weight of the rendering block.

[0113] In some embodiments, the status synchronization module 840 includes a conflict reduction module, and the conflict reduction module is configured to: obtain user behavior data corresponding to a plurality of terminals; obtain operation characteristics corresponding to the plurality of terminals according to the user behavior data corresponding to the plurality of terminals; determine the user operation time difference, location overlap degree, and user behavior similarity between any two terminals based on the operation characteristics corresponding to any two terminals; determine the multi-terminal operation conflict probability according to the user operation time difference, location overlap degree, and user behavior similarity between the plurality of terminals; when the multi-terminal operation conflict probability is higher than a preset threshold, determine the multi-terminal high-risk operation type according to the multi-terminal operation conflict probability, and execute a corresponding conflict reduction strategy according to the multi-terminal high-risk operation type.

[0114] The embodiments of the present specification can not only obtain environmental perception data in real time and dynamically monitor information such as device performance and network status, but also determine resource loading variables based on the device weight model, network weight model, and rendering weight model according to the environmental perception data. The embodiments of the present specification set up an adaptive scheduling mechanism, that is, after defining the resource loading variables based on the environmental perception data, the priority data corresponding to the terminal is also determined according to the resource loading variables, so as to not only adjust the resource loading order in real time, but also adaptively and dynamically adjust the resource loading priority and the preset resource loading strategy based on the resource loading variables; the terminal optimizes the page rendering based on the preset resource loading strategy, the progressive rendering template, and the parallel resource scheduling method. The embodiments of the present specification optimize the rendering process by combining device performance and user behavior; at the same time, the embodiments of the present specification provide a status synchronization optimization mechanism, that is, predict multi-terminal high-risk operations based on user behavior data and the differential synchronization mechanism based on operation conflict prediction, and execute a conflict reduction strategy according to the multi-terminal high-risk operations. The embodiments of the present specification provide a customized optimization solution according to different scenarios and device characteristics; by real-time monitoring the user device performance and network environment, dynamically adjusting the resource loading and rendering strategies, the loading speed and rendering efficiency of the front-end application are improved, providing a smoother interaction experience for users; the embodiments of the present specification solve the problems of insufficient environmental perception, poor pertinence, and limited dynamic adjustment ability in the prior art, and provide a new solution for front-end performance optimization.

[0115] Each embodiment in this specification is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other, and the key point of each embodiment is to illustrate the differences from other embodiments. In particular, for the embodiment of the intelligent front-end rendering optimization system based on real-time environment perception, since it is basically similar to the embodiment of the intelligent front-end rendering optimization method based on real-time environment perception, the description is relatively simple, and reference can be made to the relevant part of the method embodiment for the relevant content.

[0116] Please refer to Figure 9 The schematic structural diagram of an electronic device regarding the server in an intelligent front-end rendering optimization system provided by an embodiment of this specification is shown.

[0117] As Figure 9 shown, the electronic device 900 may include: at least one processor 910, at least one network interface 940, a user interface 930, a memory 950, and at least one communication bus 920.

[0118] Among them, the communication bus 920 can be used to realize the connection and communication of the above components.

[0119] Among them, the user interface 930 may include buttons, and the optional user interface may further include a standard wired interface and a wireless interface.

[0120] Among them, the network interface 940 can, but is not limited to, include a Bluetooth module, an NFC module, a ZigBee module, and a UWB module, etc.

[0121] Among them, the processor 910 may include one or more processing cores. The processor 910 connects various parts within the entire electronic device 900 through various interfaces and lines, and by running or executing instructions, programs, code sets, or instruction sets stored in the memory 950, and calling data stored in the memory 950, it executes various functions of the electronic device 900 and processes data. Optionally, the processor 910 can be implemented in at least one of the hardware forms of DSP, FPGA, and PLA. The processor 910 can integrate one or a combination of several of CPU and GPU, etc. Among them, the CPU mainly processes the operating system, user interface, and application programs, etc.; the GPU is responsible for the rendering and drawing of the content to be displayed on the display screen.

[0122] Among them, the memory 950 may include RAM or ROM. Optionally, the memory 950 includes a non-transitory computer-readable medium. The memory 950 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 950 may include a program storage area and a data storage area. Among them, the program storage area can store instructions for implementing the operating system, instructions for at least one function (such as touch function, sound playback function, image playback function, etc.), instructions for implementing the above-mentioned method embodiments, etc.; the data storage area can store the data involved in the above-mentioned method embodiments. Optionally, the memory 950 may also be at least one storage device located far from the aforementioned processor 910. The memory 950 as a computer storage medium may include an operating system, a communication module, a user interface module, and a vehicle startup application based on face recognition. The processor 910 can be used to call the intelligent front-end rendering optimization application stored in the memory 950 and execute the steps in a method for intelligent front-end rendering optimization based on real-time environment perception mentioned in the foregoing embodiments.

[0123] An embodiment of this specification also provides a computer-readable storage medium. Instructions are stored in the computer-readable storage medium. When the instructions are run on a computer or a processor, the computer or the processor is caused to execute the above Figures 2 to 7 one or more steps in the illustrated embodiments. If each component module of the above electronic device is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0124] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the processes or functions according to the embodiments of this specification are generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium or transmitted through a computer-readable storage medium. The computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center in a wired manner (such as coaxial cable, optical fiber, Digital Subscriber Line (DSL)) or a wireless manner (such as infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that the computer can access or a data storage device such as a server or data center that includes one or more integrated available media. The available medium can be a magnetic medium (such as a floppy disk, hard disk, magnetic tape), an optical medium (such as a Digital Versatile Disc (DVD)), or a semiconductor medium (such as a Solid State Disk (SSD)), etc.

[0125] Those of ordinary skill in the art can understand that all or part of the processes in the above embodiments of the method can be completed by instructing relevant hardware through a computer program. The program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. The foregoing storage medium includes various media that can store program codes, such as ROM, RAM, magnetic disks, or optical discs. Without conflict, the technical features in this embodiment and the implementation solutions can be combined arbitrarily.

[0126] The above-described embodiments are merely described as preferred implementation manners of this specification, and do not limit the scope of this specification. Without departing from the design spirit of this specification, various deformations and improvements made by those of ordinary skill in the art to the technical solutions of this specification shall fall within the protection scope determined by the claims of this specification.

Claims

1. An intelligent front-end rendering optimization method based on real-time environment perception, characterized in that Including: Obtain user behavior data and environmental perception data corresponding to the terminal; Based on the device weight model, network weight model, and rendering weight model, determine a resource loading variable according to the environmental perception data; Perform priority weighting processing on the resource loading variable to determine priority data corresponding to the terminal; Send a preset resource loading policy to the terminal according to the priority data. The terminal optimizes page rendering based on the preset resource loading policy, the progressive rendering template, and the parallel resource scheduling method. The progressive rendering template is used to decompose the page into several rendering blocks and dynamically adjust the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index; Determine the multi-terminal operation conflict probability based on the user behavior data, determine the multi-terminal high-risk operation type through the multi-terminal operation conflict probability, and execute a conflict reduction strategy according to the multi-terminal high-risk operation type; The terminal optimizes page rendering based on the preset resource loading policy, the progressive rendering template, and the parallel resource scheduling method, including: Obtain user behavior data and device capability index corresponding to the terminal; Based on the LSTM-based scrolling trajectory prediction algorithm, determine the viewport change value according to the user behavior data; Decompose the page into several rendering blocks and dynamically adjust the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capability index; Based on the parallel resource scheduling algorithm, select the animation rendering method corresponding to the graphics processor performance index of the terminal; Optimize page rendering according to the rendering granularity corresponding to the several rendering blocks and the animation rendering method.

2. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 1, characterized in that The resource loading variable includes a device capability index, a network quality rating, and a rendering pressure coefficient. The determining the resource loading variable according to the environmental perception data based on the device weight model, network weight model, and rendering weight model includes: Obtain first environmental perception data, second environmental perception data, and third environmental perception data. The first environmental perception data, the second environmental perception data, and the third environmental perception data are the environmental perception data corresponding to the device capability index, the environmental perception data corresponding to the network quality rating, and the environmental perception data corresponding to the rendering pressure coefficient, respectively; Based on the device weight model, network weight model, and rendering weight model, determine the device capability index, network quality rating, and rendering pressure coefficient according to the first environmental perception data, second environmental perception data, and third environmental perception data, respectively.

3. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 2, wherein, The determining the device capability index, network quality rating, and rendering pressure coefficient according to the first environmental perception data, second environmental perception data, and third environmental perception data based on the device weight model, network weight model, and rendering weight model includes: Based on the device weight model, determine the device capability index according to the processor clock frequency, the number of processor cores, the memory capacity, and the graphics processing unit benchmark test score; Based on the network weight model, determine the network quality rating according to the transmission capacity, latency duration, and jitter rate of the network; Based on the rendering weight model, determine the rendering pressure coefficient according to the remaining battery power of the terminal, the terminal temperature, and the number of frames per unit time.

4. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 3, wherein The priority weighting process for the resource loading variable to determine the priority data corresponding to the terminal includes: Obtain a first coefficient, a second coefficient, a third coefficient, and a rendering idle coefficient, where the rendering idle coefficient is the difference between a first preset data and the rendering pressure coefficient; Based on the first coefficient, determine the device capacity ratio according to the first coefficient and the device capacity index; Based on the second coefficient, determine the network quality ratio according to the second coefficient and the network quality rating; Based on the third coefficient, determine the rendering idle ratio according to the third coefficient and the rendering idle coefficient; Perform an addition process on the device capacity ratio, the network quality ratio, and the rendering idle ratio to obtain the priority data.

5. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 1, wherein The sending of the preset resource loading policy to the terminal according to the priority data includes: When the priority data meets the first threshold range, send a first resource loading policy to the terminal, where the first resource loading policy includes loading the core HTML framework, core CSS inline styles, JavaScript files within a preset size range, and WebP images with standard resolution in sequence; When the priority data meets the second threshold range, send a second resource loading policy to the terminal, where the second resource loading policy includes loading the pre-loaded full resource package, high-resolution images, WebAssembly modules, and rich media resources in sequence; When the priority data meets the third threshold range, send a third resource loading policy to the terminal, where the third resource loading policy includes loading HTML in chunks, CSS modules on demand, loading adaptive high-definition images, and lazy loading non-first-screen JS.

6. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 1, characterized in that The decomposing of the page into several rendering blocks and dynamically adjusting the rendering granularity corresponding to the several rendering blocks according to the viewport change value and the device capacity index includes: Perform DOM preprocessing, where the DOM preprocessing includes stacking context recognition and semantic block division; Obtain several rendering block metrics of the rendering block, where the several rendering block metrics include viewport visibility, interaction heat value, DOM complexity, content update frequency, and animation intensity; Determine the block weight of the rendering block according to the several rendering block metrics of the rendering block; Determine the rendering granularity of the rendering block according to the block weight of the rendering block and the device capacity index.

7. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 6, characterized in that The determining of the block weight of the rendering block according to the several rendering block metrics of the rendering block includes: Determine the weight coefficients corresponding to the several rendering block metrics; Perform a weighting process on the several rendering block metrics of the rendering block according to the weight coefficients corresponding to the several rendering block metrics to obtain the block weight of the rendering block.

8. The intelligent front-end rendering optimization method based on real-time environment perception according to claim 1, wherein Determining the multi-terminal operation conflict probability based on the user behavior data, determining the multi-terminal high-risk operation types through the multi-terminal operation conflict probability, and executing a conflict reduction strategy according to the multi-terminal high-risk operation types, including: Obtaining user behavior data corresponding to a number of terminals; Obtaining operation characteristics corresponding to the number of terminals according to the user behavior data corresponding to the number of terminals; Determining the user operation time difference, location overlap degree, and user behavior similarity between any two terminals based on the operation characteristics corresponding to any two terminals; Determining the multi-terminal operation conflict probability according to the user operation time difference, location overlap degree, and user behavior similarity among the number of terminals; When the multi-terminal operation conflict probability is higher than a preset threshold, determining the multi-terminal high-risk operation types according to the multi-terminal operation conflict probability, and executing the corresponding conflict reduction strategy according to the multi-terminal high-risk operation types.

9. An intelligent front-end rendering optimization system based on real-time environment perception, characterized in that, Including: A data acquisition module for acquiring user behavior data and environmental perception data corresponding to a terminal; A variable determination module for determining resource loading variables based on a device weight model, a network weight model, and a rendering weight model according to the environmental perception data; A priority determination module for performing priority weighting processing on the resource loading variables to determine the priority data corresponding to the terminal; A rendering optimization module for sending a preset resource loading policy to the terminal according to the priority data, and the terminal performs rendering optimization on the page based on the preset resource loading policy and according to a progressive rendering template and a parallel resource scheduling method, and the progressive rendering template is used to decompose the page into a number of rendering blocks, and dynamically adjusts the rendering granularity corresponding to the number of rendering blocks according to the viewport change value and the device capability index A status synchronization module for determining the multi-terminal operation conflict probability based on the user behavior data, determining the multi-terminal high-risk operation types through the multi-terminal operation conflict probability, and executing a conflict reduction strategy according to the multi-terminal high-risk operation types; The terminal performs rendering optimization on the page based on the preset resource loading policy and according to a progressive rendering template and a parallel resource scheduling method, including: Obtaining the user behavior data and the device capability index corresponding to the terminal; Determining the viewport change value according to the user behavior data based on the LSTM-based rolling trajectory prediction algorithm; Decomposing the page into a number of rendering blocks, and dynamically adjusting the rendering granularity corresponding to the number of rendering blocks according to the viewport change value and the device capability index; Selecting an animation rendering method corresponding to the graphics processor performance index of the terminal based on the parallel resource scheduling algorithm; Performing rendering optimization on the page according to the rendering granularity corresponding to the number of rendering blocks and the animation rendering method.

Images