Page rendering method, device, equipment, storage medium and program product
By introducing a unified resource management server into the customer management platform, the page lag caused by conflicts in page resource requests of multiple subsystems is solved, and the page rendering efficiency and user experience are improved.
Patent Information
- Application Number
- CN202411609217.2
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-12
- Publication Date
- 2025-04-01
AI Technical Summary
The front-end page of the multi-subsystem customer management platform is stuttering and the user experience is poor, especially when the resource request of the multi-subsystem page is conflicted.
By introducing a unified resource management server, including a CDN master server and an ECS standby server, the resource requests of the subsystem pages are uniformly managed and allocated, resource reuse between subsystem pages is realized.
It improves the page rendering efficiency of the customer's operating platform, avoids page lag, improves user experience, and ensures the stability and reliability of the system.
Smart Images

Figure CN119739934A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer application technology, and in particular to a page rendering method, device, equipment, storage medium and program product. Background Art
[0002] In order to effectively manage and operate customer resources and cope with rapidly changing business scenarios, an automated customer management platform came into being. It integrates multiple independently developed subsystems internally and is a Web client product developed with a front-end architecture that embeds the portal subsystem into the page.
[0003] However, this front-end architecture requires that subsystem pages request common basic components from their respective deployed front-end servers. As the activity planning logic becomes more complex, different subsystem pages will trigger the relevant components of the marketing strategy canvas respectively. When multiple page windows are opened, the page rendering speed slows down, and there will be freezes or even browser crashes.
[0004] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention
[0005] The main purpose of this application is to provide a page rendering method, device, equipment, storage medium and program product, aiming to solve the technical problems of front-end page freeze and poor user experience in the multi-subsystem customer management platform in the prior art.
[0006] To achieve the above purpose, the present application proposes a page rendering method, which is applied to a customer management platform. The customer management platform includes several subsystem pages, including:
[0007] Receiving a page operation of a user on a subsystem page, and generating a resource request according to the page operation;
[0008] Send the resource request to a preset unified resource management server, which reads the page resource corresponding to the resource request and returns the page resource to the customer management platform. The unified resource management server includes at least a CDN primary server and an ECS backup server;
[0009] The page resource returned by the unified resource management server is received, and the subsystem page is rendered using the page resource.
[0010] In one embodiment, before the step of sending the resource request to a preset unified resource management server, the method further includes:
[0011] Get front-end page resources;
[0012] The front-end page resources are uploaded to the CDN master server, and a data backup request is sent to the CDN master server. The CDN master server backs up the received front-end page resources to the ECS backup server according to the data backup request.
[0013] In one embodiment, the resource request includes a static resource request, and the step of sending the resource request to a preset unified resource management server, having the unified resource management server read a page resource corresponding to the resource request, and returning the page resource to the customer management platform includes:
[0014] Sending the static resource request to the CDN master server, the CDN master server reading the page static resource corresponding to the static resource request, and returning the page static resource to the customer management platform;
[0015] If the CDN main server reads successfully, receiving the page static resource returned by the CDN main server;
[0016] If the CDN main server fails to read, the static resource request is sent to the ECS standby server, and the ECS standby server reads the backup page static resource corresponding to the static resource request and returns the backup page static resource to the customer management platform.
[0017] In one embodiment, before the step of sending the static resource request to the CDN primary server, the method further includes:
[0018] Parsing the static resource request to obtain a request parsing result;
[0019] According to the request parsing result, determining whether the subsystem page is in a preset network environment;
[0020] If the subsystem page is in the preset network environment, the following steps are executed: sending the static resource request to the ECS backup server, having the ECS backup server read the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0021] In one embodiment, after the step of receiving the page static resource returned by the CDN master server, the method further includes:
[0022] Determine whether there is a resource anomaly in the static resources of the page;
[0023] If there is a resource anomaly, the following steps are executed: sending the static resource request to the ECS standby server, the ECS standby server reading the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0024] In one embodiment, the method further comprises:
[0025] Monitoring memory usage and static resource usage of the plurality of subsystem pages;
[0026] Generate a memory release priority queue according to the memory usage and static resource usage;
[0027] When the system memory exceeds the preset jam threshold, the page windows of the plurality of subsystem pages are released according to the priority order of the memory release priority queue.
[0028] In one embodiment, the method is applied to a unified resource management server, which includes at least a CDN primary server and an ECS backup server, including:
[0029] Receiving a resource request sent by a customer management platform, wherein the resource request is generated by the customer management platform receiving a page operation of a user on a subsystem page, and the customer management platform includes a plurality of subsystem pages;
[0030] The page resource corresponding to the resource request is read, and the page resource is returned to the customer management platform, and the customer management platform renders the subsystem page through the page resource.
[0031] In addition, to achieve the above purpose, the present application also proposes a page rendering device, the page rendering device comprising:
[0032] A receiving module, used for receiving a page operation of a user on a subsystem page, and generating a resource request according to the page operation;
[0033] A reading module, used for sending the resource request to a preset unified resource management server, and the unified resource management server reads the page resource corresponding to the resource request and returns the page resource to the customer management platform, wherein the unified resource management server includes at least a CDN primary server and an ECS standby server;
[0034] The rendering module is used to receive the page resource returned by the unified resource management server, and perform page rendering on the subsystem page through the page resource.
[0035] In addition, to achieve the above-mentioned purpose, the present application also proposes a page rendering device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the page rendering method described above.
[0036] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the page rendering method described above are implemented.
[0037] In addition, to achieve the above-mentioned purpose, the present application also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, the steps of the page rendering method described above are implemented.
[0038] The present application provides a page rendering method, which receives page operations of a user on a subsystem page in a customer management platform, generates a resource request based on the page operation, sends the resource request to a unified resource management server, uses the unified resource management server to read the corresponding page resources, performs the same resource management through the CDN main server and the ECS backup server, allocates page resources to the subsystem page for page rendering, and implements resource reuse between subsystem pages, thereby improving the page rendering efficiency of the customer management platform. The method solves the problem of front-end page freeze and poor user experience of a multi-subsystem customer management platform in the prior art, avoids page freeze caused by conflicts in resource requests of multi-subsystem pages, and improves user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.
[0040] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0041] Figure 1 A schematic diagram of a flow chart provided for the first embodiment of the page rendering method of the present application;
[0042] Figure 2 A schematic diagram of the architecture of unified static resource management provided for the second embodiment of the page rendering method of the present application;
[0043] Figure 3A schematic diagram of the unified resource uploading process provided for the second embodiment of the page rendering method of this application;
[0044] Figure 4 A schematic diagram of a page for obtaining resources provided in the second embodiment of the page rendering method of the present application;
[0045] Figure 5 A flow chart of the service degradation logic provided for the second embodiment of the page rendering method of the present application;
[0046] Figure 6 A schematic diagram of recording test data on the correlation between page performance and the number of parallel processed canvases provided in the second embodiment of the page rendering method of the present application;
[0047] Figure 7 A graph showing the relationship between canvas drawing completion time and memory usage provided in the second embodiment of the page rendering method of the present application;
[0048] Figure 8 A schematic diagram of marking the lowest release priority when creating a new window provided in the second embodiment of the page rendering method of the present application;
[0049] Fig. 9 A schematic diagram of adjusting the release priority when a non-current window is activated provided in the second embodiment of the page rendering method of the present application;
[0050] Fig.10 A schematic diagram of re-marking the release priority when polling finds an uninstallable window provided in the second embodiment of the page rendering method of the present application;
[0051] Fig.11 A schematic diagram of the release priority of the uninstall window provided in the second embodiment of the page rendering method of the present application;
[0052] Fig.12 A graph showing the relationship between the optimized memory usage and the number of parallel editing canvases provided in the second embodiment of the page rendering method of the present application;
[0053] Fig.13 A graph showing the relationship between the optimized canvas drawing completion time and memory usage provided in the second embodiment of the page rendering method of the present application;
[0054] Fig.14 This is a schematic diagram of the module structure of the page rendering device according to an embodiment of the present application;
[0055] Fig.15 This is a schematic diagram of the device structure of the hardware operating environment involved in the page rendering method in the embodiment of the present application.
[0056] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0057] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.
[0058] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.
[0059] The main solution of the embodiment of the present application is: receiving the user's page operation on the subsystem page, and generating a resource request according to the page operation; according to the resource request, allocating page resources to the subsystem page through a preset unified resource management server, and rendering the subsystem page through the page resources, and the unified resource management server includes at least a CDN main server and an ECS backup server.
[0060] Due to the front-end architecture of the existing customer management platform, which is independently developed by multiple subsystems and managed by the portal subsystem embedded in the tab page, the common basic components of each subsystem are independently requested from the front-end servers deployed by each of them. Due to the browser's homology policy, common resources cannot be reused, and repeated requests occupy precious concurrent requests, resulting in a large number of requests being queued and the page being stuck for too long, which in turn leads to a longer overall first drawing time of the page and slower page rendering.
[0061] Moreover, as the activity planning logic of the system becomes increasingly complex, the number of nodes and lanes in the marketing strategy canvas increases, and memory consumption gradually increases. When multiple canvases are opened at the same time and edited in parallel, the system fluency decreases when users perform operations such as dragging nodes and batch copying nodes, and even the browser memory is exhausted, the page becomes unresponsive, and the browser crashes directly.
[0062] Technical terms involved in this application:
[0063] Customer management platform: a comprehensive platform or software focused on customer operations that integrates customer data management, marketing campaign planning, customer service and support, and other functions to help companies manage and operate their customer resources more effectively.
[0064] ECS (Elastic Compute Service): is a basic cloud computing service that provides scalable virtual servers. Users can quickly start and manage cloud server instances of different sizes as needed.
[0065] CDN (Content Delivery Network): is a distributed network service that deploys node servers in multiple geographical locations to cache content closer to users, thereby speeding up content loading.
[0066] This application uses the CDN main server and the ECS backup server to perform the same resource management to achieve resource reuse between subsystem pages, thereby improving the page rendering efficiency of the customer management platform, solving the problems of front-end page freezes and poor user experience of multi-subsystem customer management platforms in the prior art, avoiding page freezes caused by conflicts in resource requests of multi-subsystem pages, and improving user experience.
[0067] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, a page rendering device, etc. The following takes a page rendering device as an example to illustrate this embodiment and the following embodiments.
[0068] Based on this, the present application embodiment provides a page rendering method, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the page rendering method of the present application.
[0069] In this embodiment, the page rendering method is applied to a customer management platform, which includes several subsystem pages, including steps S10 to S30:
[0070] Step S10, receiving a page operation of a user on a subsystem page, and generating a resource request according to the page operation;
[0071] It should be noted that the subsystem page refers to a component of the customer management platform, which is responsible for handling specific business functions. The customer management platform is a front-end architecture platform managed by embedding platform pages, including one or more independently developed subsystems. Page operations refer to the user's behavior on the page, which can be operations on the page windows of each subsystem of the customer management platform (such as adding windows, activating windows, and closing windows, etc.), or operations on components in the page windows (such as adding canvases, dragging nodes, and batch copying nodes, etc.).
[0072] It is understandable that when users operate on the subsystem page of the customer management platform, it will trigger the loading requirements of certain functions or content on the page. The system needs to identify these operations and generate corresponding resource requests based on these operations in order to obtain the necessary data or resources to respond to the user's operations.
[0073] Step S20, sending the resource request to a preset unified resource management server, the unified resource management server reads the page resource corresponding to the resource request, and returns the page resource to the customer management platform, the unified resource management server includes at least a CDN main server and an ECS backup server.
[0074] It should be noted that the unified resource management server refers to the server responsible for managing and allocating resources to ensure the rational use and efficient allocation of resources, including CDN and ECS servers that store web resources, of which CDN is the primary server and ECS is the backup server. The CDN primary server is the main server of the Content Delivery Network, used to cache and distribute content to reduce latency and increase loading speed. The ECS backup server is the backup server of the Elastic Compute Service, which can provide services when the primary server is unavailable to ensure the high availability of the system. Page resources refer to the elements that make up the page, such as HTML, CSS, JavaScript files, pictures, etc. Page rendering refers to the process of combining page resources and displaying them to users.
[0075] It is understandable that after receiving a resource request, the system needs to read the resource manager that pre-stores page resources in the unified resource management server through the unified resource management server, obtain the page resources corresponding to the resource request, and return the page resources to the system for resource allocation and page rendering.
[0076] Step S30: receiving the page resource returned by the unified resource management server, and rendering the subsystem page by using the page resource.
[0077] It can be understood that after the unified resource management server reads the pre-stored page resources, the unified resource management server will return the page resources to the system. After receiving the returned page resources, the system will allocate the page resources to the subsystem page, so as to perform page rendering of the subsystem page through the page resources, thereby ensuring efficient allocation of common basic resources between subsystem pages and fast loading of pages, without the need for each subsystem page to request its own independently deployed application server, thereby improving the efficiency of multi-subsystem page rendering.
[0078] In a feasible implementation manner, before the step of sending the resource request to a preset unified resource management server, the method further includes:
[0079] Step S201, obtaining front-end page resources;
[0080] It should be noted that front-end page resources refer to all files and data that constitute the visible part of the web page client, such as pictures, public js packages, style files, etc.
[0081] It is understandable that before the resource request is processed, the system needs to first obtain the front-end page resources, which are the basis of the user interface and user experience. These resources are obtained to ensure that the system can quickly provide the required page content when the user requests it.
[0082] Step S202, uploading the front-end page resources to the CDN master server, and sending a data backup request to the CDN master server, and the CDN master server backs up the received front-end page resources to the ECS backup server according to the data backup request.
[0083] It should be noted that both the CDN primary server and the ECS backup server have the resource file storage function. The CDN primary server refers to the main server that uses the content distribution network as the front-end page resource storage, which can store and quickly distribute content to users in different regions. The ECS backup server refers to the backup server that uses the elastic computing service as the front-end page resource storage, which is used to take over the service when the primary server is unavailable to ensure business continuity.
[0084] It can be understood that in order to improve the distribution efficiency of front-end page resources and enhance the fault tolerance of the system, the file storage of the front-end page resources is deployed to the CDN main server and the ECS backup server. After the system sends the front-end page resources to the CDN main server, the front-end page resources are stored in the CDN main server resource manager. At the same time, the system sends a data backup request to the CDN main server, instructing the CDN main server to transfer the stored front-end page resources to the ECS backup server, and create a data backup on the ECS backup server, so that the data backup can be obtained from the ECS backup server when the CDN main server fails to obtain resources.
[0085] In this implementation, by uploading the front-end page resources to the CDN main server, users can access resources nearby, reduce data transmission delays, and speed up page loading. The backup mechanism of the ECS backup server ensures that when the CDN main server is unavailable, the backup server can quickly take over to ensure uninterrupted service and enhance system stability. The customer management platform can not only provide faster resource loading speeds, but also optimize user experience and reduce operating costs while ensuring service continuity and data security.
[0086] In a feasible implementation manner, the resource request includes a static resource request, and the step of allocating page resources to the subsystem page through a preset unified resource management server according to the resource request includes:
[0087] Step S203, sending the static resource request to the CDN main server, the CDN main server reading the page static resource corresponding to the static resource request, and returning the page static resource to the customer management platform;
[0088] It should be noted that static resource requests refer to requests for resources that do not change frequently (such as pictures, style files, js files, etc.).
[0089] It can be understood that the system sends the static resource request to the CDN master server, thereby retrieving the page static resources requested by the user page operation in the CDN master server and returning the page static resources to the system. Due to the distributed architecture of the CDN master server, it can provide fast content distribution, reduce latency and improve user experience.
[0090] Step S204: if the CDN main server reads successfully, receiving the page static resource returned by the CDN main server;
[0091] It can be understood that if the page resources required for the static resource request are successfully retrieved from the CDN main server, the system will receive these page resources sent from the CDN main server to complete the rendering of the subsystem page, which can reduce data transmission time and improve page loading speed.
[0092] Step S205: If the CDN main server fails to read, the static resource request is sent to the ECS backup server, and the ECS backup server reads the backup page static resource corresponding to the static resource request and returns the backup page static resource to the customer management platform.
[0093] It is understandable that if the CDN main server cannot provide the page static resources required for the static resource request, the CDN main server will return a request response message indicating a read failure, and the system will automatically switch to the ECS backup server to retrieve the resources, send the static resource request to the ECS backup server, and read these pre-backed-up page static resources from the ECS backup server to render the subsystem page, ensuring that user requests can be met even when the main server is unavailable, thereby ensuring service continuity and reliability.
[0094] In this implementation, by intelligently and uniformly managing resource requests and allocations, not only the performance and user experience of the customer management platform are improved, but also the stability and reliability of the system are enhanced. Through the unified resource management mechanism, the platform can maintain high performance while also having the ability to respond to various emergencies, ensuring the continuous operation of the page and user satisfaction.
[0095] In a feasible implementation manner, before the step of sending the static resource request to the CDN primary server, the step further includes:
[0096] Step S2031, parsing the static resource request to obtain a request parsing result;
[0097] It is understandable that a detailed analysis is performed on static resource requests initiated by users to identify the specific content of the request, such as the requested resource type, URL, possible cache information, etc., to help the system locate and respond to user requests more accurately.
[0098] Step S2032, judging whether the subsystem page is in a preset network environment according to the request parsing result;
[0099] It should be noted that the network environment may be a network environment that may affect resource loading efficiency and user experience, such as network speed, stability, etc., and may also be a network environment with high security requirements.
[0100] It is understandable that based on the request parsing results, combined with other information (such as the user's IP address, network speed, etc.), it is determined whether the user is in a preset network environment (such as a low-speed network, a high-latency network, etc.), helping the system to take targeted optimization measures to improve resource loading efficiency and user experience.
[0101] Step S2033, if the subsystem page is in the preset network environment, execute the steps: sending the static resource request to the ECS backup server, having the ECS backup server read the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0102] It is understandable that if it is determined that the user is in a preset network environment, the system will read page resources directly from the ECS backup server instead of from the CDN main server, which can reduce data transmission delays and increase resource loading speed, especially when the CDN main server is far away from the user or the network conditions are poor.
[0103] In this implementation, by parsing user requests and judging the network environment, not only the performance of the customer management platform and user experience are improved, but also the stability and reliability of the system are enhanced. The platform can maintain high performance while also having the ability to cope with various network environments, ensuring the continuous operation of the business and user satisfaction.
[0104] In a feasible implementation manner, before and after the step of receiving the page static resource returned by the CDN master server, the step further includes:
[0105] Step S2041, determining whether there is any resource anomaly in the static resource of the page;
[0106] It should be noted that resource anomalies refer to problems such as damaged resource files, inconsistent versions, invalid links, etc. These problems may cause the resources to fail to load or display normally.
[0107] It is understandable that before allocating the page resources corresponding to the static resource request to the subsystem page, the system needs to check whether there are any abnormalities in the page resources on the CDN master server, such as file corruption, version mismatch or resource unavailability, to ensure that the resources allocated to the user are healthy and available to avoid service interruption or degradation of user experience.
[0108] Step S2042, if there is a resource anomaly, execute the following steps: sending the static resource request to the ECS standby server, having the ECS standby server read the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0109] It is understandable that if an anomaly is detected in the page resources on the CDN primary server, the system will switch to the ECS backup server to obtain resources to ensure that user requests can be met even if there is a problem with the resources on the primary server, thereby improving the system's fault tolerance and reliability.
[0110] In this implementation, by checking the health status of resources before allocating them and automatically switching to a backup server when an anomaly is found, not only is the performance of the customer management platform and user experience improved, but the stability and reliability of the system are also enhanced, allowing the platform to maintain service continuity and data consistency when faced with resource anomalies, thereby ensuring the continued operation of the business and user satisfaction.
[0111] In a feasible implementation manner, the method further includes steps S40 to S50:
[0112] Step S40, monitoring the memory usage and static resource usage of the plurality of subsystem pages;
[0113] It should be noted that memory usage refers to the amount of memory occupied by the page during operation. Static resource usage refers to the usage of static resources (such as pictures, style files, js files, etc.) in the page.
[0114] It can be understood that by monitoring the memory and resource usage of subsystem pages to evaluate the performance and resource consumption of the pages, it is possible to identify which pages consume excessive resources and take corresponding optimization measures.
[0115] Step S50, generating a memory release priority queue according to the memory usage and static resource usage;
[0116] It should be noted that the memory release priority queue refers to a list sorted according to page resource consumption, which is used to guide the system to prioritize the release of memory of which pages when memory is tight.
[0117] It can be understood that based on the monitored memory usage and static resource usage, the system will generate a priority queue for multiple subsystem pages to be released from memory. This queue will determine which pages should have priority for memory release based on the memory and resource usage of the pages, which can optimize resource allocation and improve the overall performance of the system.
[0118] Step S60, when the system memory exceeds a preset jamming threshold, the page windows of the plurality of subsystem pages are released according to the priority order of the memory release priority queue.
[0119] It should be noted that the jam threshold is a pre-set memory usage threshold. When this threshold is exceeded, the system may become jammed or unstable. This can be tested by adding windows of each subsystem page in the browser and calling components. The page window refers to the user interface window of the page in the system.
[0120] It is understandable that when the system detects that the memory usage exceeds the preset jamming threshold, in order to avoid system jamming or crashing, the system will release those page windows with higher priorities according to the order of the memory release priority queue to release memory resources.
[0121] In this implementation, by monitoring resource usage, generating a memory release priority queue, and releasing resources when memory is tight, not only the performance and stability of the customer business platform are improved, but also the user experience is optimized, allowing the platform to maintain smooth operation and data security even when resources are tight, thereby ensuring business continuity and user satisfaction.
[0122] In a feasible implementation manner, the method is applied to a unified resource management server, and the unified resource management server includes at least a CDN primary server and an ECS backup server, including steps S70 to S80:
[0123] Step S70, receiving a resource request sent by the customer management platform, wherein the resource request is generated by the customer management platform receiving a page operation of a user on a subsystem page, and the customer management platform includes several subsystem pages;
[0124] It is understandable that in order to obtain necessary page resources to complete page rendering, the unified resource management server receives resource requests triggered by user operations on the subsystem page of the customer management platform to request specific page resources required for page rendering.
[0125] Step S80, reading the page resource corresponding to the resource request, and returning the page resource to the customer management platform, and the customer management platform rendering the subsystem page through the page resource.
[0126] It is understandable that after receiving the resource request, the unified resource management server needs to find and read the corresponding page resources, and then send these resources back to the customer business platform to complete the rendering of the page.
[0127] In this implementation, by intelligently managing resource requests and allocations, not only the performance and user experience of the customer business platform are improved, but also the stability and reliability of the system are enhanced, so that the platform can maintain high performance while also having the ability to cope with various emergencies, ensuring the continuous operation of the business and user satisfaction.
[0128] This embodiment provides a page rendering method, which manages the same resources through the CDN main server and the ECS backup server to achieve resource reuse between subsystem pages, thereby improving the page rendering efficiency of the customer management platform, solving the problems of front-end page freeze and poor user experience of multi-subsystem customer management platforms in the prior art, avoiding page freezes caused by conflicts in resource requests of multi-subsystem pages, and improving user experience.
[0129] For example, in order to help understand the implementation process of the page rendering method obtained in the first embodiment of this embodiment, please refer to Figure 2 , Figure 2 The schematic diagram of the architecture of unified static resource management provided for the second embodiment of the page rendering method of this application, specifically, includes unified static resource management of CDN+ECS dual-active and web application window memory monitoring and recycling:
[0130] 1. Unified static resource management of CDN+ECS active-active
[0131] The static resources required by the front-end application (such as images, public js packages, style files, etc.) are no longer deployed in the application server. By uploading CDN+ECS dual storage media, CDN acceleration is used to solve the network latency problem of resource access to centralized data in branches across the country, and ECS downgrade is used to solve the problem of CDN unavailability in the business network scenario (in-house computer room environment), thereby improving overall availability. At the same time, through unified resource management, cross-domain problems caused by independent release routes of multiple subsystems are solved, static resource sharing and reuse are realized, and the first drawing time performance of the page window is improved.
[0132] 1) Unified resource management: such as Figure 3 As shown, Figure 3 The flowchart of unified resource uploading provided in the second embodiment of the page rendering method of this application is that the front-end applications of each subsystem managed by the portal system application no longer need to package public resources by themselves, thus reducing the packaging volume. While enjoying the CDN acceleration service, it solves the cross-domain problems between applications, realizes the sharing of public resources, and improves the efficiency of simultaneous loading of multiple systems.
[0133] like Figure 4 As shown, Figure 4 A schematic diagram of a page for obtaining resources provided in the second embodiment of the page rendering method of the present application. Developers of each subsystem obtain the CDN address and ECS address of the resource through the system. The script tag and URL of the resource can be used directly in the code.
[0134] 2) Resource request service degradation mechanism: such as Figure 5 As shown, Figure 5 The flowchart of the service downgrade logic provided for the second embodiment of the page rendering method of this application shows that when the system uploads a resource to the CDN, it will asynchronously back up the data to the ECS. When the CDN resource is unavailable, it can switch to the backup data source ECS to improve the overall availability. There are two situations in which CDN resources are unavailable: one is a specific network environment, such as the data operation room of a branch, and the other is when the resource itself is wrong, resulting in a white screen on the page, etc. The global exception monitoring mechanism is used to determine whether the resource object exists, and downgrade and retry processing is performed in its callback.
[0135] Under the condition that the webpage CDN resource availability is 99.9% and the ECS availability is 99%, when the CDN resource fails to load, the ESC is turned to retry loading the failed resource, and the availability of static resources can reach: 1-(1-99.9%)*(1-99%)=99.999%. This method can effectively reduce the probability of page blank screen caused by static resource loading failure, thereby improving system availability and user experience.
[0136] 2. Web application window memory monitoring and recovery
[0137] After transferring static resources from the application server to the unified static resource management of CDN+ECS dual active and connecting to the unified resource management system, the loading speed of independent resources of a single subsystem in the office network environment is increased to 3.39M / s, and the loading time is shortened by about 50%. At the same time, it takes less than 4s to load 7 subsystems, and the total time is shortened by 66.7%. The same resource will only be requested once.
[0138] In order to quantify the impact of the complexity of the canvas (used for drawing marketing strategies, which uses nodes and lines to graphically represent the relationship and sequence between marketing strategies) and the number of concurrently edited canvases on the system front-end performance, the following test model was designed:
[0139] First, create a single lane canvas with 50 branch nodes (multiple marketing campaign strategies can be formulated in the canvas at the same time for easy execution and comparison, and each lane corresponds to a marketing campaign), record the time when the canvas is drawn, and monitor the memory usedJSHeapSize (consumed memory) consumed by the current page and the available memory jsHeapSizeLimit (available memory) allocated by the system process from the browser through the window.performance (provided by the window attribute) interface; then create a new window and repeat the above steps until the system process memory is exhausted and the browser displays a crash page.
[0140] The test data recorded by this test model is as follows Figure 6 As shown, Figure 6 A schematic diagram of recording the test data of the correlation between page performance and the number of parallel processing canvases provided in the second embodiment of the page rendering method of the present application. Figure 7 As shown, Figure 7 A graph showing the relationship between canvas drawing completion time and memory usage provided for the second embodiment of the page rendering method of this application. As the number of parallel tasks increases, the current usedJSHeapSize / jsHeapSizeLimit (consumed memory / available memory) in the browser's performance interface is positively correlated as a whole. When the number of tasks is greater than 26, the memory is exhausted and the browser page crashes; when the proportion is greater than 70% (stuttering threshold), the time it takes to complete the canvas drawing begins to increase significantly, and the time the user waits for the rendering to complete begins to increase significantly.
[0141] Based on this test model, we can draw the following conclusions: As the number of parallel tasks increases, the current usedJSHeapSize / jsHeapSizeLimit is positively correlated. When the number of tasks is greater than 26, the memory is exhausted and the browser page crashes. When the proportion is greater than 70% (the jamming threshold), the time it takes to complete the drawing of the canvas begins to increase significantly, and the time users wait for the rendering to complete begins to increase significantly. The threshold for memory optimization is obtained by the above method.
[0142] Based on the above model conclusions, the following memory management strategy is designed:
[0143] 1) Create or reactivate a window: Figure 8 As shown, Figure 8 This is a schematic diagram of marking the lowest release priority when creating a new window provided in the second embodiment of the page rendering method of this application. Fig. 9 As shown, Fig. 9 A schematic diagram of adjusting the release priority when a non-current window is activated provided in the second embodiment of the page rendering method of the present application. When a window is newly created or reactivated, the release priority of the window is marked as the lowest.
[0144] 2) Long-term inactive windows: Fig.10 As shown, Fig.10 A schematic diagram of re-marking the release priority when polling finds an unloadable window provided in the second embodiment of the page rendering method of this application. The timer triggers the polling task of portal tab management once a minute. If the windows of the three subsystems, batch canvas, real-time canvas, and crowd package editor, have not been activated for more than 1 hour, they will be forced to refresh and release with the highest priority, waiting for memory release. The access rules for window types are made here: that is, there is no large js resource usage such as canvas on the front end, and it is a simple page, so the marking action is not performed.
[0145] 3) Trigger memory recycling: such as Fig.11 As shown, Fig.11 A schematic diagram of the release priority of the unloaded window provided for the second embodiment of the page rendering method of this application. When usedJSHeapSize / jsHeapSizeLimit (consumed memory / available memory) exceeds the jamming threshold, the window pages are released in sequence according to the release priority, and the front end completes the memory unloading until the proportion is lower than the threshold or all windows except the current window are unloaded.
[0146] This mechanism optimizes browser memory management and maintains the overall memory usage of the system near the threshold level, avoiding white screen and freezing caused by memory overflow. At the same time, it keeps the canvas drawing time within a stable time range, significantly improving the user experience.
[0147] The data statistics obtained after optimizing browser memory management are as follows Fig.12 and 13 As shown, Fig.12 A diagram showing the relationship between the optimized memory usage and the number of parallel editing canvases provided in the second embodiment of the page rendering method of this application. Fig.13The relationship between the optimized canvas drawing completion time and memory usage provided in the second embodiment of the page rendering method of this application. The monitoring of memory consumption is realized. When the consumption is below the safety threshold line, the interactive experience can be guaranteed to be smooth and not stuck. The dynamic memory release mechanism can support users to open multiple windows and edit multiple canvases in parallel without affecting the smoothness of interaction.
[0148] In this exemplary embodiment, through resource reuse, degradation + memory monitoring and active recycling, the network transmission efficiency of static resources is improved, and memory space is released in time, which solves the problems of front-end page jams and poor user experience of multi-subsystem customer management platforms in the prior art, avoids page jams caused by conflicts in multi-subsystem page resource requests, and improves user experience.
[0149] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the page rendering method of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.
[0150] This application also provides a page rendering device, please refer to Fig.14 , the page rendering device comprises:
[0151] The receiving module 10 is used to receive a page operation of a user on a subsystem page and generate a resource request according to the page operation;
[0152] The reading module 20 is used to send the resource request to a preset unified resource management server, and the unified resource management server reads the page resource corresponding to the resource request and returns the page resource to the customer management platform. The unified resource management server includes at least a CDN primary server and an ECS backup server;
[0153] The rendering module 30 is used to receive the page resource returned by the unified resource management server, and render the subsystem page through the page resource.
[0154] Optionally, the rendering module 20 is further used for:
[0155] Get front-end page resources;
[0156] The front-end page resources are uploaded to the CDN master server, and a data backup request is sent to the CDN master server. The CDN master server backs up the received front-end page resources to the ECS backup server according to the data backup request.
[0157] Optionally, the resource request includes a static resource request, and the rendering module 20 is further configured to:
[0158] Sending the static resource request to the CDN master server, the CDN master server reading the page static resource corresponding to the static resource request, and returning the page static resource to the customer management platform;
[0159] If the CDN main server reads successfully, receiving the page static resource returned by the CDN main server;
[0160] If the CDN main server fails to read, the static resource request is sent to the ECS standby server, and the ECS standby server reads the backup page static resource corresponding to the static resource request and returns the backup page static resource to the customer management platform.
[0161] Optionally, the rendering module 20 is further used for:
[0162] Parsing the static resource request to obtain a request parsing result;
[0163] According to the request parsing result, determining whether the subsystem page is in a preset network environment;
[0164] If the subsystem page is in the preset network environment, the following steps are executed: sending the static resource request to the ECS backup server, having the ECS backup server read the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0165] Optionally, the rendering module 20 is further used for:
[0166] Determine whether there is a resource anomaly in the static resources of the page;
[0167] If there is a resource anomaly, the following steps are executed: sending the static resource request to the ECS standby server, the ECS standby server reading the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
[0168] Optionally, the page rendering device further includes:
[0169] A page monitoring module 40, used to monitor the memory usage and static resource usage of the plurality of subsystem pages;
[0170] A queue generation module 50, used to generate a memory release priority queue according to the memory usage and static resource usage;
[0171] The memory release module 60 is used to release the page windows of the plurality of subsystem pages according to the priority order of the memory release priority queue when the system memory exceeds a preset jamming threshold.
[0172] Optionally, the present application also provides a page rendering device, comprising:
[0173] Request module 70, used to receive a resource request sent by a customer management platform, the resource request is generated by the customer management platform receiving a page operation of a user on a subsystem page, and the customer management platform includes several subsystem pages;
[0174] The return module 80 is used to read the page resource corresponding to the resource request and return the page resource to the customer management platform, and the customer management platform renders the subsystem page through the page resource.
[0175] The page rendering device provided by the present application adopts the page rendering method in the above embodiment, which can solve the technical problems of the front-end page freeze and poor user experience of the multi-subsystem customer management platform in the prior art. Compared with the prior art, the beneficial effects of the page rendering device provided by the present application are the same as the beneficial effects of the page rendering method provided by the above embodiment, and the other technical features in the page rendering device are the same as the features disclosed in the above embodiment method, which will not be repeated here.
[0176] The present application provides a page rendering device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the page rendering method in the first embodiment described above.
[0177] Reference below Fig.15 , which shows a schematic diagram of the structure of a page rendering device suitable for implementing an embodiment of the present application. The page rendering device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Fig.15 The page rendering device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.
[0178] like Fig.15 As shown, the page rendering device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the page rendering device are also stored. The processing device 1001, ROM1002, and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the page rendering device to communicate with other devices wirelessly or by wire to exchange data. Although the figure shows a page rendering device with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or provided instead.
[0179] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.
[0180] The page rendering device provided by the present application adopts the page rendering method in the above embodiment, which can solve the technical problems of the front-end page freeze and poor user experience of the multi-subsystem customer management platform in the prior art. Compared with the prior art, the beneficial effects of the page rendering device provided by the present application are the same as the beneficial effects of the page rendering method provided by the above embodiment, and the other technical features in the page rendering device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.
[0181] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.
[0182] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
[0183] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the page rendering method in the above-mentioned embodiment.
[0184] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination of the above.
[0185] The computer-readable storage medium may be included in the page rendering device; or may exist independently without being assembled into the page rendering device.
[0186] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by the page rendering device, the page rendering device: receives the user's page operation on the subsystem page, and generates a resource request according to the page operation; sends the resource request to a preset unified resource management server, and the unified resource management server reads the page resource corresponding to the resource request, and returns the page resource to the customer management platform, the unified resource management server includes at least a CDN main server and an ECS backup server; receives the page resource returned by the unified resource management server, and renders the subsystem page through the page resource.
[0187] Computer program code for performing the operations of the present application may be written in one or more programming languages or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, C++, and conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0188] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of boxes in the block diagram and / or flowchart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0189] The modules involved in the embodiments of the present application may be implemented by software or hardware, wherein the name of the module does not limit the unit itself in some cases.
[0190] The readable storage medium provided in this application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned page rendering method, and can solve the technical problems of front-end page freezes and poor user experience in the multi-subsystem customer management platform in the prior art. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as the beneficial effects of the page rendering method provided in the above-mentioned embodiment, and will not be repeated here.
[0191] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned page rendering method when executed by a processor.
[0192] The computer program product provided by this application can solve the technical problems of the front-end page freeze and poor user experience of the multi-subsystem customer management platform in the prior art. Compared with the prior art, the beneficial effects of the computer program product provided by this application are the same as the beneficial effects of the page rendering method provided by the above embodiment, which will not be repeated here.
[0193] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.
Claims
1. A page rendering method, characterized in that: The method is applied to a customer management platform, which includes several subsystem pages, including: Receiving a page operation of a user on a subsystem page, and generating a resource request according to the page operation; Send the resource request to a preset unified resource management server, which reads the page resource corresponding to the resource request and returns the page resource to the customer management platform. The unified resource management server includes at least a CDN primary server and an ECS backup server; The page resource returned by the unified resource management server is received, and the subsystem page is rendered using the page resource.
2. The method according to claim 1, characterized in that: Before the step of sending the resource request to the preset unified resource management server, the method further includes: Get front-end page resources; The front-end page resources are uploaded to the CDN master server, and a data backup request is sent to the CDN master server. The CDN master server backs up the received front-end page resources to the ECS backup server according to the data backup request.
3. The method according to claim 1, characterized in that: The resource request includes a static resource request, The step of sending the resource request to a preset unified resource management server, having the unified resource management server read the page resource corresponding to the resource request, and returning the page resource to the customer management platform includes: Sending the static resource request to the CDN main server, the CDN main server reading the page static resource corresponding to the static resource request, and returning the page static resource to the customer management platform; If the CDN main server reads successfully, receiving the page static resource returned by the CDN main server; If the CDN main server fails to read, the static resource request is sent to the ECS backup server, and the ECS backup server reads the backup page static resource corresponding to the static resource request and returns the backup page static resource to the customer management platform.
4. The method according to claim 3, characterized in that: Before the step of sending the static resource request to the CDN primary server, the method further includes: Parsing the static resource request to obtain a request parsing result; According to the request parsing result, determining whether the subsystem page is in a preset network environment; If the subsystem page is in the preset network environment, the following steps are executed: sending the static resource request to the ECS backup server, having the ECS backup server read the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
5. The method according to claim 3, characterized in that: After the step of receiving the static resource of the page returned by the CDN main server, the method further includes: Determine whether there is a resource anomaly in the static resources of the page; If there is a resource anomaly, the following steps are executed: sending the static resource request to the ECS standby server, the ECS standby server reading the backup page static resource corresponding to the static resource request, and returning the backup page static resource to the customer management platform.
6. The method according to claim 1, characterized in that: The method further comprises: Monitoring memory usage and static resource usage of the plurality of subsystem pages; Generate a memory release priority queue according to the memory usage and static resource usage; When the system memory exceeds a preset jamming threshold, the page windows of the plurality of subsystem pages are released according to the priority order of the memory release priority queue.
7. A page rendering method, characterized in that: The method is applied to a unified resource management server, which includes at least a CDN primary server and an ECS standby server, including: Receiving a resource request sent by a customer management platform, wherein the resource request is generated by the customer management platform receiving a page operation of a user on a subsystem page, and the customer management platform includes a plurality of subsystem pages; The page resource corresponding to the resource request is read, and the page resource is returned to the customer management platform, and the customer management platform renders the subsystem page through the page resource.
8. A page rendering device, characterized in that: The device comprises: A receiving module, used for receiving a page operation of a user on a subsystem page, and generating a resource request according to the page operation; A reading module, used for sending the resource request to a preset unified resource management server, and the unified resource management server reads the page resource corresponding to the resource request and returns the page resource to the customer management platform, wherein the unified resource management server includes at least a CDN primary server and an ECS standby server; The rendering module is used to receive the page resource returned by the unified resource management server, and perform page rendering on the subsystem page through the page resource.
9. A page rendering device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the page rendering method according to any one of claims 1 to 7.
10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the page rendering method according to any one of claims 1 to 7 are implemented.
11. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the steps of the page rendering method according to any one of claims 1 to 7 are implemented.