Front-end interface rendering method, electronic equipment, storage medium and program product

Abstract

The invention discloses a front-end interface rendering method, electronic equipment, a storage medium and a program product, and relates to the technical field of computers, and the method comprises the following steps: classifying page components according to interface function priorities; collecting a preset load index of the server and a preset performance index of the front-end equipment; determining a load grade according to the acquisition value of the preset load index and the acquisition value of the preset performance index; and according to the load level and the corresponding relationship between the page component and the load level, calling the page component of the corresponding type for rendering. According to the method, the front-end equipment and the server are dynamically coordinated, and the stability of a core function can be guaranteed in a high-concurrency and high-load scene. Meanwhile, different components can be called under different load levels, different interface functions are met, graded progressive degradation can be achieved, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end interface rendering method, electronic device, storage medium, and program product. Background Art

[0002] The front-end interface (FUI) is the visual interface through which users interact with computer systems or applications. It's the part users directly see and operate, typically consisting of a webpage, an application's graphical user interface, or other user interface. The FUI undertakes complex dynamic rendering and interactive tasks in the user experience. However, existing FUI solutions fail to guarantee the stability of core functionality and struggle to maintain a consistent user experience. Therefore, addressing these technical shortcomings has become a pressing technical challenge for those skilled in the art. Summary of the Invention

[0003] The present application provides a front-end interface rendering method, electronic device, storage medium and program product to at least solve the problems in related technologies that the stability of core functions cannot be guaranteed and the user experience is difficult to guarantee.

[0004] This application provides a front-end interface rendering method, including: Classify page components according to interface function priority; Collect the preset load indicators of the server and the preset performance indicators of the front-end equipment; Determining a load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator; According to the load level and the corresponding relationship between the page component and the load level, the corresponding type of page component is called for rendering.

[0005] This application also provides a front-end interface rendering device, including: Classification unit, used to classify page components according to interface function priority; A collection unit, used to collect preset load indicators of the server and preset performance indicators of the front-end equipment; a determining unit, configured to determine a load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator; The rendering unit is used to call the corresponding type of page component for rendering according to the load level and the corresponding relationship between the page component and the load level.

[0006] The present application also provides an electronic device, comprising: a memory for storing a computer program; and a processor for implementing the steps of any of the above-mentioned front-end interface rendering methods when executing the computer program.

[0007] The present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer program is executed by a processor, the steps of any of the above-mentioned front-end interface rendering methods are implemented.

[0008] The present application also provides a computer program product, including a computer program, which implements the steps of any of the above-mentioned front-end interface rendering methods when executed by a processor.

[0009] The beneficial effect is that the front-end interface rendering method provided by the present application obtains the load index of the server and the performance index of the front-end device, and calls the page components for rendering according to the load level determined based on the load index of the server and the performance index of the front-end device, thereby realizing dynamic collaboration between the front-end device and the server, and being able to ensure the stability of core functions in high concurrency and high load scenarios. At the same time, calling the page components for rendering according to the load level can realize calling different components at different load levels to meet different interface functions, and can realize hierarchical and progressive degradation, avoiding the direct shutdown of non-core functions during degradation, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] In order to more clearly illustrate the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0011] Figure 1 A schematic diagram of a flow chart of a front-end interface rendering method provided in an embodiment of the present application; Figure 2 A schematic diagram of a front-end interface rendering provided in an embodiment of the present application; Figure 3 A schematic diagram of a system architecture provided in an embodiment of the present application; Figure 4 A schematic diagram of a page component classification process provided in an embodiment of the present application; Figure 5 A schematic diagram of a front-end interface rendering device provided in an embodiment of the present application; Figure 6 A schematic diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0012] The following will be combined with the accompanying drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of this application.

[0013] It should be noted that, in the description of this application, the terms "comprises," "includes," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. The terms "first," "second," etc., in this application are used to distinguish similar objects, and are not used to describe a particular order or sequence.

[0014] In order to enable those skilled in the art to better understand the present application, the present application is further described in detail below with reference to the accompanying drawings and specific implementation methods.

[0015] An embodiment of the present application provides a front-end interface rendering method, and the method is described in detail in conjunction with the execution process of the method.

[0016] refer to Figure 1 As shown, an embodiment of the present application provides a front-end interface rendering method comprising: S101: Classify page components according to interface function priority.

[0017] Page components are modules within the front-end interface with independent functionality and styling. Examples include charts, buttons, input fields, and navigation bars. Categorizing page components allows for differentiated component rendering.

[0018] Interface functions include core functions, secondary functions, and enhanced user experience functions. Core functions include user authentication and basic data submission, the backbone path of key business processes, and operations that affect data integrity. Secondary functions include data analysis chart display, non-real-time data synchronization, and auxiliary tool panels. Enhanced user experience functions include interactive animations and transition effects, a personalized recommendation module, and visual special effects rendering.

[0019] Core functionality takes precedence over secondary functionality, which in turn takes precedence over enhanced user experience functionality. During a front-end interface degradation, core functionality must be maintained, while enhanced user experience functionality is prioritized for degradation. Secondary functionality can be temporarily downgraded. A front-end interface degradation refers to the process of reverting the front-end interface from a more advanced, complex, or optimized state to a simpler, more limited, or inferior state.

[0020] After classifying the page components, put each type of page components into the component pool.

[0021] In some embodiments, classifying page components according to interface function priority includes: According to the interface function priority, the page components are classified into animation degradation components, data frequency reduction components, static components and function switch components; the animation degradation components include components with icons and animations; the data frequency reduction components include components that require rotation query; the static components include components that do not need to interact with the backend; the function switch components include components with page setting functions.

[0022] S102: Collecting preset load indicators of the server and preset performance indicators of the front-end device.

[0023] A server's preset load metrics are pre-selected indicators used to measure the server's operating status and resource usage. These metrics can include CPU (Central Processing Unit) utilization, memory usage, I / O (Input / Output) read / write speeds, and request queue depth.

[0024] The preset performance indicators of the front-end device are pre-selected indicators used to reflect the performance level of the front-end device. The preset performance indicators may include page load time, rendering frame rate, etc.

[0025] S103: Determine the load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator.

[0026] In some embodiments, determining the load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator includes: Determining a comprehensive performance score based on the collected values of the preset load indicators and the collected values of the preset performance indicators; The load level is determined based on the comprehensive performance score and a preset threshold.

[0027] In some embodiments, determining the comprehensive performance score according to the collected value of the preset load indicator and the collected value of the preset performance indicator includes: The collected value of the preset load indicator and the collected value of the preset performance indicator are weighted and summed to obtain the comprehensive performance score.

[0028] A corresponding weight is set for each preset load indicator and preset performance indicator. Based on the corresponding weights set for each preset load indicator and preset performance indicator, the collected values of the preset load indicator and the collected values of the preset performance indicator are weighted and summed to obtain a comprehensive performance score.

[0029] The weighted summation of the collected values of the preset load indicators and the collected values of the preset performance indicators can more accurately reflect the importance differences of the data and more accurately coordinate the front-end and back-end.

[0030] Taking the preset load indicators including CPU usage, memory usage, and I / O read and write speed, and the preset performance indicators including network latency as an example, the comprehensive performance score can be obtained based on the following formula: Score = α*CPU + β*Memory + γ*IO + δ*Network.

[0031] Among them, Score represents the comprehensive performance score, CPU represents CPU usage, Memory represents memory occupancy, Network represents network delay time, and α, β, γ, and δ represent weights.

[0032] The server's CPU usage is more important, so its corresponding weight can be set higher. I / O read and write speed is more affected by the network, so its corresponding weight can be set lower. The baseline values for each weight can be: α = 0.4, β = 0.3, γ = 0.2, and δ = 0.1.

[0033] In some embodiments, it further includes: Adjusting the weight corresponding to the preset load indicator according to the change rate of the preset load indicator; The weight corresponding to the preset performance indicator is adjusted according to the change rate of the preset performance indicator.

[0034] The relationship between the rate of change of the preset load indicator and the weight corresponding to the preset load indicator can be positively correlated or negatively correlated. Similarly, the relationship between the rate of change of the preset performance indicator and the weight corresponding to the preset performance indicator can be positively correlated or negatively correlated. The size of the weight adjustment can also be pre-set, and each time the weight is adjusted, the size of the weight increase or decrease is a pre-set value. The size of the weight adjustment can also be determined based on the rate of change, and each time the weight is adjusted, the size of the weight increase or decrease is determined by the actual rate of change. The corresponding relationship between the rate of change and the size of the weight adjustment can be pre-set.

[0035] For example, the rate of change of CPU usage is positively correlated with the corresponding weight. If CPU usage increases in a short period of time, the weight corresponding to CPU usage increases from 0.4 to 0.5.

[0036] In some embodiments, determining the load level according to the comprehensive performance score and a preset threshold includes: If the comprehensive performance score is greater than a first preset threshold, the load level is a first load level; If the comprehensive performance score is less than or equal to the first preset threshold and greater than or equal to the second preset threshold, the load level is the second load level; If the comprehensive performance score is less than the second preset threshold, the load level is the third load level.

[0037] As a specific implementation, the first preset threshold may be 80, and the second preset threshold may be 60.

[0038] As shown in Table 1, Level 0 is the first load level, Level 1 is the second load level, and Level 2 is the third load level. At the first load level, all interface functions are available, including support for animations, real-time charts, and interactive logs. If the load level drops to the second load level, the front-end interface is downgraded, prioritizing enhanced experience features. This means that enhanced experience features are not implemented on the front-end interface, and secondary functions are temporarily downgraded. If the load level drops to the third load level, the front-end interface is downgraded, supporting only core functions.

[0039] Table 1 Policy mapping rules

[0040] If the overall performance score is less than 80, animations and special effects can be disabled and the data refresh interval can be extended. For example, functions that require real-time data typically call backend interfaces every 5 or 10 seconds to obtain data. If the overall performance score is less than 80, the data refresh interval can be extended to 30 seconds. If the overall performance score is less than 60, static data mode can be switched to disable real-time collaboration.

[0041] S104: According to the load level and the correspondence between the page component and the load level, the corresponding type of page component is retrieved for rendering.

[0042] In some embodiments, calling a corresponding type of page component for rendering according to the load level and the corresponding relationship includes: If the load level is the first load level, various page components are called for rendering; If the load level is the second load level, calling the data frequency reduction component and the page component for implementing the core function for rendering; If the load level is the third load level, the static component is called for rendering.

[0043] refer to Figure 2As shown, if the load level is the first load level, various interface functions are supported, and animation degradation components, data frequency reduction components, static components, and function switch components are called for rendering. If the load level is the second load level, the core functions are guaranteed, and page components related to the core functions are rendered, and the data frequency reduction component is called for rendering. If the load level is the third load level, static components are called for rendering.

[0044] In some embodiments, it further includes: The functional complexity and visual effects of the front-end interface are adjusted according to the load level and the corresponding rendering strategy.

[0045] For example, reference Figure 2 As shown, when the load level drops to the second load level, non-critical animations are disabled in terms of functional complexity, and charts are downgraded to SVG (Scalable Vector Graphics). For rendering strategies, refer to the typical strategy combinations in Table 1. At the first load level, the rendering strategy includes the system in normal mode, supporting full interface functionality, animations, real-time charts, and interactive logs. At the second load level, user experience enhancements are prioritized, and secondary functions are temporarily downgraded. At the third load level, only core functions are supported to ensure normal operation.

[0046] In some embodiments, before determining the load level based on the value of the preset load indicator and the value of the preset performance indicator, the process further includes: Performing missing value processing and outlier filtering on the collected values of the preset load indicators; The collected values of the preset performance indicators are processed for missing values and outliers are filtered.

[0047] The collected values of the preset load indicators of the server and the preset performance indicators of the front-end devices can be summarized through communication technologies such as WebSocket or HTTP / Server Push, and missing value processing and outlier filtering can be performed to ensure data accuracy.

[0048] In some embodiments, performing missing value processing on the collected value of the preset load indicator includes: According to the collected values of the preset load indicators and the corresponding timestamps, the values of the preset load indicators between the timestamps are calculated.

[0049] The preset load indicators of the server are supplemented by linear interpolation method.

[0050] For the preset load index of the server, given two known points and , the formula for completing the value y corresponding to the missing point x is: .

[0051] in, , x is usually a timestamp or sequence index, and y represents the value of the estimated preset load indicator.

[0052] In some embodiments, performing missing value processing on the collected values of the preset performance indicator includes: Searching for a preset number of collected values closest to and including the missing position from the collected values of the preset performance indicator; Calculating the mean of the preset number of collected values; The value corresponding to the missing position is obtained according to the mean value.

[0053] The preset performance indicators of the front-end equipment are filled using the nearest neighbor average.

[0054] For each missing value, find the k nearest valid neighbors before and after it and calculate the average value of these neighbors to fill in the missing value.

[0055] For missing position i, the corresponding filling value for: .

[0056] Among them, k is the set number of neighbors.

[0057] For the preset load indicators of the server, remove data values with large single numerical deviations and low probability of occurrence.

[0058] That is, spike filtering is used: a duration of less than 5 seconds and an amplitude less than 3 times the baseline value is considered a transient jitter.

[0059] For the preset performance indicators of the front-end equipment, the preset performance indicators of the front-end equipment are filtered by combining the automatic mode threshold and the manual intervention mechanism.

[0060] Normalization of preset load indicators and preset performance indicators, using different algorithms for processing according to the characteristics of the indicators.

[0061] For the server's preset load indicators (such as CPU usage, memory usage): If the type is interval optimal, the normalized value is calculated based on the preset optimal interval. Otherwise, the dynamic sliding window method is used to calculate the minimum and maximum values in the recent period and perform Min-Max normalization.

[0062] Assume the window size is W, and the data sequence at the current time t is: .

[0063] Extreme value calculation: ; .

[0064] The normalization formula is: .

[0065] in, To prevent division by zero, it is usually advisable to .

[0066] Window update rules: When new data Upon arrival: .

[0067] For preset performance indicators of front-end load (such as page load time, rendering frame rate): If the metric is as small as possible (such as page loading time), calculate the maximum value in the recent period and perform reverse Min-Max normalization (i.e. 1 - (current value / maximum value)).

[0068] Assume the window size is W, and the data sequence at the current time t is: .

[0069] ‌Extreme value calculation‌: .

[0070] ‌Inverse normalization formula‌: .

[0071] in, is a constant. To prevent division by 0, it is usually .

[0072] It should be noted that when xi = 0: f(xi) = 1 (optimal).

[0073] When xi = Mt: f(xi) = 0 (worst).

[0074] Output value range: [0, 1] interval.

[0075] The above formula is suitable for indicators that need to be minimized, such as latency and page load time, and the scoring direction is kept consistent (1 is the best and 0 is the worst) by reverse processing.

[0076] If the indicator is as large as possible (such as rendering frame rate), calculate the minimum value in the recent period and perform Min-Max normalization (i.e. (current value - minimum value) / (maximum value - minimum value)).

[0077] Assume the window size is W, and the data sequence at the current time t is: .

[0078] ‌Extreme value calculation‌: .

[0079] ‌Forward normalization formula‌: .

[0080] It should be noted that when xi = Mt: f(xi) ≈ 1 (optimal).

[0081] When xi = mt: f(xi) = 0 (worst).

[0082] In some embodiments, it further includes: receiving threshold information and / or interface function priority information; Setting the first preset threshold and the second preset threshold according to the received threshold information; Set the interface function priority according to the received interface function priority information.

[0083] Users have different needs and concerns. Users can customize thresholds, interface function priorities, etc. to continuously optimize the formulation and execution of rendering strategies.

[0084] In some embodiments, it further includes: Based on the historical data of the preset load indicator, the historical data of the preset performance indicator and user behavior feedback, a machine learning algorithm is used to dynamically optimize the first preset threshold, the second preset threshold and the rendering strategy.

[0085] Based on historical data on preset load indicators, historical data on preset performance indicators, and user behavior feedback, machine learning algorithms (such as reinforcement learning and deep learning) are used to dynamically optimize thresholds and rendering strategies. Through continuous learning and iteration, a closed-loop optimization mechanism is formed to continuously improve the effectiveness of rendering strategies and user experience.

[0086] In some embodiments, it further includes: When the comprehensive performance score meets the interface function recovery conditions for a preset number of consecutive times, the interface function will be gradually restored.

[0087] For example, if the current overall performance score is less than 60 points, the system is in static data mode. If the score is greater than 60 points three times in a row, the system can be switched to a higher mode. Or if the score is greater than 80 points three times in a row, the system can be released from degraded mode and returned to normal mode, with animations, charts, and data displayed normally.

[0088] refer to Figure 3 As shown, the front-end interface rendering method provided in the embodiment of the present application can be implemented by a closed-loop system consisting of a load monitoring module, a strategy generation module, an interface rendering module and a feedback optimization module, which dynamically optimizes the front-end resource loading and interaction complexity, ensures the stability of core functions in high concurrency and high load scenarios, and maximizes the smoothness of the user experience.

[0089] The load monitoring module synchronizes the server's preset load indicators (CPU usage, memory occupancy, I / O read and write rates, request queue depth, etc.) with the front-end device's preset performance indicators (page loading time, rendering frame rate, etc.) in real time through the WebSocket / HTTP protocol, realizing front-end and back-end status linkage monitoring.

[0090] The load monitoring module preprocesses the collected data, including missing value handling (using linear interpolation or nearest neighbor mean filling) and outlier filtering (using the σ principle combined with manual threshold setting). Linear interpolation is used to fill in the preset server load indicators. The preset performance indicators of the front-end devices are filled in using the nearest neighbor mean. Furthermore, the preset load indicators and preset performance indicators are normalized. Different algorithms are used for normalization based on the characteristics of the indicators.

[0091] The load monitoring module transmits the pre-processed data to the strategy generation module.

[0092] The strategy generation module assigns weights to each metric based on business needs and uses a weighted summation algorithm to calculate a comprehensive performance score (for example, Score = αCPU + βMemory + γIO + δNetwork). The strategy generation module uses a dynamic weighting mechanism to automatically adjust weights based on the recent rate of change of metrics and introduces a time decay factor to increase the weight of recent data.

[0093] The strategy generation module generates a progressive layered rendering strategy based on comprehensive performance scores and predefined rendering strategy rules. Based on strategy mapping rules (as shown in Table 1) and interface function priorities, page components are categorized into animation degradation components, data degradation components, static components, and function switch components, and placed into a component pool. Interface functions include core functions, secondary functions, and enhanced experience functions. Core functions include user authentication and basic data submission, the backbone path of key business processes, and operations that affect data integrity. Secondary functions include data analysis chart display, non-real-time data synchronization, and auxiliary tool panels. Enhanced experience functions include interactive animations and transition effects, personalized recommendation modules, and visual special effects rendering. Core functions have higher priority than secondary functions, which in turn have higher priority than enhanced experience functions. During the front-end interface rendering process, core functions must be maintained, enhanced experience functions are prioritized for degradation, and secondary functions can be temporarily downgraded.

[0094] refer to Figure 4 As shown, the strategy generation module generates different types of components based on the comprehensive performance score, threshold, and interface function priority, and puts the components into the component pool for the interface rendering module to call.

[0095] The strategy generation module adopts an abnormal recovery mechanism. When the comprehensive performance score meets the interface function recovery conditions for a preset number of consecutive times, the interface function will be gradually restored.

[0096] For example, if the current overall performance score is less than 60 points, the system is in static data mode. If the score is greater than 60 points three times in a row, the system can be switched to a higher mode. Or if the score is greater than 80 points three times in a row, the system can be released from degraded mode and returned to normal mode, with animations, charts, and data displayed normally.

[0097] The interface rendering module receives the current load level from the strategy generation module and renders the corresponding components from the component pool. Based on the rendering strategy, it dynamically adjusts the functional complexity and visual effects of the front-end interface, such as disabling non-critical animations and downgrading charts to static SVG. It supports multiple front-end frameworks (such as React, Vue, and Angular).

[0098] The Feedback Optimization module allows users to customize thresholds, interface function priorities, and other functions, injecting these parameters into the Strategy Generation module. The Feedback Optimization module uses machine learning algorithms to continuously learn from user behavior data and continuously optimize the formulation and execution of rendering strategies.

[0099] Deploy load monitoring code on servers and front-end devices to implement the deployment of load monitoring modules and ensure that load indicator and performance indicator data can be collected and transmitted in real time.

[0100] Configure the strategy generation module, set the weights and thresholds of each preset load indicator and preset performance indicator according to business needs, and define the interface function classification and rendering strategy.

[0101] The interface rendering module is integrated with the front-end framework to ensure that it can receive instructions from the strategy generation module and dynamically adjust the front-end interface.

[0102] Deploy a feedback optimization module to collect user behavior data and conduct continuous learning to continuously optimize thresholds and rendering strategies.

[0103] In summary, the front-end interface rendering method provided by this application obtains the load index of the server and the performance index of the front-end device, and calls the page component for rendering according to the load level determined based on the load index of the server and the performance index of the front-end device, thereby realizing dynamic collaboration between the front-end device and the server, and being able to ensure the stability of core functions in high concurrency and high load scenarios. At the same time, calling the page component for rendering according to the load level can realize calling different components at different load levels to meet different interface functions, realize hierarchical and progressive degradation, avoid directly shutting down all non-core functions during degradation, and thus improve user experience.

[0104] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, and of course it can also be implemented by hardware, but in many cases the former is a better implementation method.

[0105] The embodiment of the present application also provides a front-end interface rendering device, referring to Figure 5 As shown, the device includes: The classification unit 10 is used to classify the page components according to the interface function priority; The collection unit 20 is used to collect the preset load index of the server and the preset performance index of the front-end device; a determination unit 30, configured to determine a load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator; The rendering unit 40 is configured to retrieve a corresponding type of page component for rendering according to the load level and the corresponding relationship between the page component and the load level.

[0106] Based on the above embodiment, as a specific implementation manner, the classification unit 10 is used to: According to the interface function priority, the page components are classified into animation degradation components, data frequency reduction components, static components and function switch components; the animation degradation components include components with icon and animation functions; the data frequency reduction components include components that require rotation query; the static components include components that do not need to interact with the backend; the function switch components include components with page setting functions.

[0107] Based on the above embodiment, as a specific implementation, the determining unit 30 includes: a comprehensive performance score determination subunit, configured to determine a comprehensive performance score based on the collected values of the preset load indicator and the collected values of the preset performance indicator; The load level determination subunit is configured to determine the load level according to the comprehensive performance score and a preset threshold.

[0108] Based on the above embodiment, as a specific implementation method, the comprehensive performance score determination subunit is used to: The value of the preset load indicator and the value of the preset performance indicator are weighted and summed to obtain the comprehensive performance score.

[0109] Based on the above embodiment, as a specific implementation manner, the load level determination subunit includes: a first determining subunit, configured to determine, if the comprehensive performance score is greater than a first preset threshold, that the load level is a first load level; a second determining subunit, configured to determine that the load level is a second load level if the comprehensive performance score is less than or equal to the first preset threshold and greater than or equal to a second preset threshold; The third determining subunit is configured to determine that if the comprehensive performance score is less than the second preset threshold, the load level is a third load level.

[0110] Based on the above embodiment, as a specific implementation, the rendering unit 40 includes: A first rendering sub-unit is configured to call an animation degradation component, a data frequency reduction component, a static component, and a function switch component for rendering if the load level is the first load level; A second rendering sub-unit is configured to call a data frequency reduction component and a page component for implementing core functions for rendering if the load level is a second load level; The third rendering sub-unit is configured to call a static component for rendering if the load level is the third load level.

[0111] Based on the above embodiment, as a specific implementation method, the following is also included: a receiving unit, configured to receive threshold information and / or interface function priority information; a first setting unit, wherein the user sets the first preset threshold and the second preset threshold according to the received threshold information; The second receiving unit is used to set the interface function priority according to the received interface function priority information.

[0112] Based on the above embodiment, as a specific implementation method, the following is also included: An optimization unit is used to dynamically optimize the first preset threshold and the second preset threshold using a machine learning algorithm based on the historical data of the preset load indicator, the historical data of the preset performance indicator, and user behavior feedback.

[0113] Based on the above embodiment, as a specific implementation method, the following is also included: The adjustment unit is used to adjust the functional complexity and visual effect of the front-end interface according to the load level and the corresponding rendering strategy.

[0114] Based on the above embodiment, as a specific implementation method, the following is also included: A first preprocessing unit, configured to perform missing value processing and outlier filtering on the collected values of the preset load indicator; The second preprocessing unit is used to perform missing value processing and abnormal value filtering on the collected values of the preset performance indicators.

[0115] Based on the above embodiment, as a specific implementation manner, the first pre-processing unit is used to: According to the collected values of the preset load indicators and the corresponding timestamps, the values of the preset load indicators between the timestamps are calculated.

[0116] Based on the above embodiment, as a specific implementation manner, the second pre-processing unit is used to: Searching for a preset number of collected values closest to and including the missing position from the collected values of the preset performance indicator; Calculating the mean of the preset number of collected values; The value corresponding to the missing position is obtained according to the mean value.

[0117] The front-end interface rendering device provided by the present application obtains the load index of the server and the performance index of the front-end device, and calls the page components for rendering according to the load level determined based on the load index of the server and the performance index of the front-end device, thereby realizing dynamic collaboration between the front-end device and the server, and ensuring the stability of core functions in high concurrency and high load scenarios. At the same time, calling the page components for rendering according to the load level can realize calling different components at different load levels to meet different interface functions, realize hierarchical and progressive degradation, avoid directly shutting down all non-core functions during degradation, and thus improve user experience.

[0118] For the description of the features in the embodiment corresponding to the front-end interface rendering device, please refer to the relevant description of the embodiment corresponding to the front-end interface rendering method, and no further details will be given here.

[0119] The embodiment of the present application also provides an electronic device, referring to Figure 6 As shown, the electronic device includes a memory 1 and a processor 2, wherein the memory 1 stores a computer program, and the processor 2 is configured to run the computer program to execute the steps in any one of the above-mentioned front-end interface rendering method embodiments.

[0120] The electronic device provided by the present application obtains the load index of the server and the performance index of the front-end device, and calls the page component for rendering according to the load level determined based on the load index of the server and the performance index of the front-end device, thereby realizing dynamic collaboration between the front-end device and the server, and ensuring the stability of core functions in high concurrency and high load scenarios. At the same time, calling the page component for rendering according to the load level can realize calling different components at different load levels to meet different interface functions, realize hierarchical and progressive degradation, avoid directly shutting down all non-core functions during degradation, and thus improve user experience.

[0121] An embodiment of the present application further provides a computer-readable storage medium, in which a computer program is stored, wherein the computer program is configured to execute the steps of any of the above-mentioned front-end interface rendering method embodiments when run.

[0122] In an exemplary embodiment, the computer-readable storage medium may include, but is not limited to, various media that can store computer programs, such as a USB flash drive, a read-only memory (ROM), a random access memory (RAM), a mobile hard disk, a magnetic disk, or an optical disk.

[0123] An embodiment of the present application further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the steps in any of the above-mentioned front-end interface rendering method embodiments are implemented.

[0124] An embodiment of the present application also provides another computer program product, including a non-volatile computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the steps in any of the above-mentioned front-end interface rendering method embodiments.

[0125] The computer program product provided by this application obtains the server's load index and the front-end device's performance index, and calls page components for rendering according to the load level determined based on the server's load index and the front-end device's performance index, thereby achieving dynamic collaboration between the front-end device and the server, and ensuring the stability of core functions in high-concurrency, high-load scenarios. At the same time, calling page components for rendering according to the load level can achieve different components at different load levels to meet different interface functions, and can achieve hierarchical and progressive degradation, avoiding the direct and complete shutdown of non-core functions during degradation, thereby improving the user experience.

[0126] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0127] The above is a detailed introduction to a front-end interface rendering method, electronic device, storage medium and program product provided by the present application. This article uses specific examples to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of the present application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of the present application.

Claims

1. A front-end interface rendering method, characterized in that: include: Classify page components according to interface function priority; Collect the preset load indicators of the server and the preset performance indicators of the front-end equipment; Determining a load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator; According to the load level and the corresponding relationship between the page component and the load level, the corresponding type of page component is called for rendering.

2. The front-end interface rendering method according to claim 1, characterized in that: Classification of page components according to interface function priority includes: According to the interface function priority, the page components are classified into animation degradation components, data frequency reduction components, static components and function switch components; the animation degradation components include components with icon and animation functions; the data frequency reduction components include components that require rotation query; the static components include components that do not need to interact with the backend; the function switch components include components with page setting functions.

3. The front-end interface rendering method according to claim 1, characterized in that: Determining the load level according to the collected value of the preset load indicator and the collected value of the preset performance indicator includes: Determining a comprehensive performance score based on the collected values of the preset load indicators and the collected values of the preset performance indicators; The load level is determined based on the comprehensive performance score and a preset threshold.

4. The front-end interface rendering method according to claim 3, characterized in that: Determining a comprehensive performance score based on the collected values of the preset load indicator and the collected values of the preset performance indicator includes: The value of the preset load indicator and the value of the preset performance indicator are weighted and summed to obtain the comprehensive performance score.

5. The front-end interface rendering method according to claim 3, characterized in that: Determining the load level according to the comprehensive performance score and the preset threshold includes: If the comprehensive performance score is greater than a first preset threshold, the load level is a first load level; If the comprehensive performance score is less than or equal to the first preset threshold and greater than or equal to the second preset threshold, the load level is the second load level; If the comprehensive performance score is less than the second preset threshold, the load level is the third load level.

6. The front-end interface rendering method according to claim 5, characterized in that: According to the load level and the corresponding relationship between the page component and the load level, calling the corresponding type of page component for rendering includes: If the load level is the first load level, the animation degradation component, the data frequency reduction component, the static component and the function switch component are called for rendering; If the load level is the second load level, calling the data frequency reduction component and the page component for implementing the core function for rendering; If the load level is the third load level, the static component is called for rendering.

7. The front-end interface rendering method according to claim 5, characterized in that: Also includes: receiving threshold information and / or interface function priority information; Setting the first preset threshold and the second preset threshold according to the received threshold information; Set the interface function priority according to the received interface function priority information.

8. The front-end interface rendering method according to claim 5, characterized in that: Also includes: Based on the historical data of the preset load indicator, the historical data of the preset performance indicator and user behavior feedback, a machine learning algorithm is used to dynamically optimize the first preset threshold and the second preset threshold.

9. The front-end interface rendering method according to claim 1, characterized in that: Also includes: The functional complexity and visual effects of the front-end interface are adjusted according to the load level and the corresponding rendering strategy.

10. The front-end interface rendering method according to claim 1, characterized in that: Before determining the load level according to the value of the preset load indicator and the value of the preset performance indicator, the following steps may be further performed: Performing missing value processing and outlier filtering on the collected values of the preset load indicators; The collected values of the preset performance indicators are processed for missing values and outliers are filtered.

11. The front-end interface rendering method according to claim 10, characterized in that: Processing missing values of the collected values of the preset load indicator includes: According to the collected values of the preset load indicators and the corresponding timestamps, the values of the preset load indicators between the timestamps are calculated.

12. The front-end interface rendering method according to claim 10, characterized in that: Processing missing values for the collected values of the preset performance indicators includes: Searching for a preset number of collected values closest to and including the missing position from the collected values of the preset performance indicator; Calculating the mean of the preset number of collected values; The value corresponding to the missing position is obtained according to the mean value.

13. An electronic device, characterized in that: include: Memory for storing computer programs; A processor, configured to implement the steps of the front-end interface rendering method according to any one of claims 1 to 12 when executing the computer program.

14. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, wherein when the computer program is executed by a processor, the steps of the front-end interface rendering method according to any one of claims 1 to 12 are implemented.

15. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the front-end interface rendering method according to any one of claims 1 to 12 are implemented.

Images