A page rendering method, system, apparatus, and computer-readable storage medium

TWI935433BActive Publication Date: 2026-08-11CHINA UNIONPAY
View PDF 4 Cites 0 Cited by

Patent Information

Application Number
TW113127517
Authority / Receiving Office
TW · TW
Patent Type
Patents
Current Assignee / Owner
Priority Date
2023-08-07
Filing Date
2024-07-23
Publication Date
2026-08-11
Estimated Expiration
2044-07-22

Smart Images

  • Figure TWG2TB001905368_001
    Figure TWG2TB001905368_001
  • Figure TWG2TB001905368_002
    Figure TWG2TB001905368_002
  • Figure TWG2TB001905368_003
    Figure TWG2TB001905368_003
Patent Text Reader

Abstract

This invention provides a page rendering method, system, apparatus, and computer-readable storage medium. The method includes: when a user accesses a page, obtaining an HTML page to be rendered and a user-side rendering script; using the user-side rendering script to render the HTML page to be rendered; when the user detects a custom edge rendering element in the HTML page to be rendered, initiating an edge rendering request using the custom edge rendering element; an edge service responding to the edge rendering request performing edge rendering, generating an edge rendering element page, and returning it to the user; and the user mounting the edge rendering element page using the custom edge rendering element. Using this method, page rendering efficiency can be improved.
Need to check novelty before this filing date? Find Prior Art

Description

A page rendering method, system, device and computer-readable storage medium The present invention belongs to the front-end field, and specifically relates to a page rendering method, system, device and computer-readable storage medium. With the rapid development of network technology, front-end code has become increasingly complex. However, the complexity of front-end code has led to an increase in the size of the client program, and users need to download more content to render the page. In order to reduce the first-screen rendering time and improve the user experience, the industry has explored various rendering methods, such as client-side rendering (CSR) and server-side rendering (SSR). However, these rendering methods are still difficult to meet the users' extreme pursuit of experience. With the development of edge computing, the industry has proposed edge side rendering (ESR). By taking advantage of the fact that edge computing nodes are closer to users and have shorter network latency, the page is split into static and dynamic parts. The static content is cached in the content delivery network (CDN) and quickly returned to the user, and then a request for dynamic content is initiated on the edge computing node. After that, the dynamic content is spliced with the static part, thereby further improving the user's first-screen loading time. Especially in edge areas or weak network environments, a good user experience can also be obtained. In addition, the pressure on the original SSR server is reduced. Currently, the implementation of edge rendering in the industry is usually achieved by combining data streams on the basis of server-side rendering, and there is still a problem of slow rendering time. In view of the problems existing in the above-mentioned prior art, a page rendering method, system, device and computer-readable storage medium are proposed. By using this method, device and computer-readable storage medium, the above problems can be solved. The present invention provides the following solutions. In a first aspect, a page rendering method is provided, including: when a client accesses a page, obtaining a to-be-rendered HTML page and a client rendering script, and performing client-side rendering on the to-be-rendered HTML page by using the client rendering script; when the client monitors a custom edge rendering element from the to-be-rendered HTML page, initiating an edge rendering request by using the custom edge rendering element; the edge service responds to the edge rendering request to perform edge rendering, generates an edge rendering component page and returns it to the client; the client mounts the edge rendering component page by using the custom edge rendering element. In one implementation, before the client accesses the page, it further includes: determining the source codes of the client rendering component and the edge rendering component, where the edge rendering component is wrapped by an edge rendering wrapper; through an edge rendering conversion plugin, replacing the edge rendering component wrapped by the edge rendering wrapper with a custom edge rendering element, compiling the replaced source code to generate a to-be-rendered HTML page, compiling the client rendering component into a client rendering script; and, through the edge rendering conversion plugin, extracting the source code of the edge rendering component and compiling it into an edge rendering script. In one implementation, it further includes: deploying the to-be-rendered HTML page, the client rendering script, and the edge rendering script to a web server; the client accesses the web server through a request to obtain the to-be-rendered HTML page and the client rendering script, and the client rendering script is used for the client to perform client rendering; the edge service accesses the web server through a request to obtain the edge rendering script, and the edge rendering script is used for the edge service to perform edge rendering. In one implementation, it further includes: when the client accesses the page, requesting the to-be-rendered HTML page from a content delivery network (CDN); obtaining the to-be-rendered HTML page cached in the content delivery network (CDN), or accessing the homepage HTML file requested from the web server through the content delivery network (CDN). In one implementation, it further includes: the client发起 an edge rendering request, and the edge rendering request carries the positioning identifier of the edge rendering component based on the custom edge rendering element; in response to the edge rendering request, when the edge service hits the cached edge rendering component page according to the positioning identifier, returning the cached edge rendering page component to the client. In one implementation, it further includes: the client发起 an edge rendering request, and the edge rendering request carries the positioning identifier of the edge rendering component based on the custom edge rendering element; in response to the edge rendering request, the edge service runs the deployed edge rendering script, obtains the data required for edge rendering from the backend server, generates an edge rendering component page, and returns it to the client. In one implementation, before executing the edge rendering script to generate the edge rendering page component, it further includes: in the case where the edge service has not deployed the edge rendering script, requesting and obtaining the edge rendering script corresponding to the positioning identifier from the web server. In one implementation, it further includes: after the edge service generates the edge rendering component page, caching it to the content delivery network (CDN). In one implementation, the custom edge rendering element is implemented based on the custom element API of the Web Components standard and is used to replace the edge rendering component. In a second aspect, a page rendering system is provided, configured to execute the method of any one of claims 1-9, including a client, which is configured to, when accessing a page, obtain an HTML page to be rendered and perform client-side rendering, where the HTML page to be rendered carries a custom edge rendering element; when a custom edge rendering element is parsed from the HTML page to be rendered, initiate an edge rendering request using the custom edge rendering element; an edge service, which is configured to perform edge rendering in response to the edge rendering request, generate an edge-rendered component page, and return it to the client; and the client is further configured to mount the edge-rendered component page using the custom edge rendering element in the HTML page. In a third aspect, a page rendering device is provided, including: 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 when the instructions are executed by the at least one processor, the at least one processor is enabled to execute: the method of the first aspect. In a fourth aspect, a computer-readable storage medium is provided, where the computer-readable storage medium stores a program, and when the program is executed by a multi-core processor, the multi-core processor is enabled to execute the method of the first aspect. One of the advantages of the above embodiments is that edge rendering can be implemented on the basis of client-side rendering, which can greatly improve the page rendering performance and efficiency: 1) When first loaded, the component resources of the edge rendering wrapper part and the corresponding rendering time are reduced, improving the first-screen rendering performance; 2) Compared with the client initiating a request to the backend server, the edge service initiating a request to the backend server can reduce the TCP connection reduction and network transmission overhead; 3) The resource requirements for the edge service are low. Only when the user actually accesses a component wrapped by an edge rendering wrapper will the edge service be used for edge rendering. Other advantages of the present invention will be explained in more detail in conjunction with the following description and drawings. It should be understood that the above description is only an overview of the technical solutions of the present disclosure, so as to generally understand the technical means of the present disclosure, and then implement it in accordance with the content of the specification. In order to make the above and other purposes, features, and advantages of the present disclosure more obvious and understandable, specific embodiments of the present disclosure are hereinafter exemplified. The exemplary embodiments of the present disclosure will be described in more detail below with reference to the drawings. Although the exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to be able to fully convey the scope of the present disclosure to those skilled in the art. In the description of the present disclosure embodiments, it should be understood that terms such as "including" or "having" are intended to indicate the presence of the disclosed features, numbers, steps, actions, components, parts, or combinations thereof in this specification, and do not exclude the possibility of the presence of one or more other features, numbers, steps, actions, components, parts, or combinations thereof. Unless otherwise specified, " / " means "or". For example, A / B can mean A or B; "and / or" herein is merely a description of the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. Terms such as "first", "second", etc. are only used for the convenience of description to distinguish the same or similar technical features, and should not be construed as indicating or implying the relative importance or quantity of these technical features. Thus, the features defined by "first", "second", etc. may explicitly or implicitly include one or more of such features. In the description of the present disclosure embodiments, unless otherwise specified, the meaning of the term "plural" is two or more than two. To clearly illustrate the embodiments of the present application, some concepts that may appear in subsequent embodiments will be introduced first. CSR (Client Side Rendering) refers to client-side rendering, that is, generating an html page by rendering on the client side. SSR (Server Side Rendering) refers to server-side rendering, that is, generating an html page by rendering on the server side. ESR (Edge Side Rendering) refers to edge rendering, that is, generating an html page by rendering on the edge service. In addition, it should be noted that, without conflict, the embodiments in the present invention and the features in the embodiments can be combined with each other. The present invention will be described in detail below with reference to the drawings and in combination with the embodiments. There are two existing methods for implementing edge rendering. One is to directly deploy server-side rendering to edge nodes; the other is that server-side rendering is still deployed in the local center, edge services are deployed on edge nodes, the page is split into static HTML and dynamic HTML, the edge service requests static HTML to return it in a stream, and at the same time requests local server-side rendering to obtain dynamic HTML and continue to return it in a stream. However, the existing implementations of edge rendering are all based on server-side rendering. The first method of directly deploying server-side rendering to edge nodes has high resource requirements for edge nodes and there are difficult operation and maintenance problems. The second method requires corresponding modifications on the client side to support the data stream and requires server resources for server-side rendering. Most importantly, the above methods are not applicable to projects based on client-side rendering, and these projects cannot utilize edge computing capabilities. To overcome the above problems, FIG. 1 is a flowchart of a page rendering method according to an embodiment of the present application, which is used to implement a more lightweight edge rendering. In this process, from the perspective of the device, the execution subject can be one or more electronic devices; from the perspective of the program, the execution subject can correspondingly be the program installed on these electronic devices. In this embodiment, the execution subject of the method can be the page rendering shown in the embodiment of FIG. 1. As shown in FIG. 1, the method provided in this embodiment may include the following steps: 110. When the client accesses the page, obtain the HTML page to be rendered and the client rendering script, and perform client rendering on the HTML page to be rendered according to the client rendering script; Among them, the HTML page to be rendered refers to index.html obtained by the client (browser) from the web server, which usually only contains the basic skeleton and some static resource links. The client obtains and parses the HTML page to be rendered (index.html). When monitoring the link of the JavaScript file, the client will download these JavaScript files and execute the code therein. The HTML page to be rendered (index.html) in the embodiment of the present application may include the link of the client rendering script (JavaScript script) and the custom edge rendering element. Among them, when monitoring the link of the client rendering script, the JavaScript resources required for client rendering are obtained on the client for client rendering. When monitoring the custom edge rendering element, an edge rendering request is sent to the edge service to implement the edge rendering. The following details the specific steps of the above 110. In one implementation, when the client accesses the page, it requests the HTML page to be rendered from the Content Delivery Network (CDN); obtains the HTML page to be rendered cached in the Content Delivery Network (CDN), or requests and obtains the home page HTML file from the Web server through the CDN. Referring to FIG. 2, an interactive flowchart of page rendering is exemplarily shown, which includes the specific steps of the above 110: 111. When the client accesses the page, request the HTML page to be rendered (index.html) from the Content Delivery Network (CDN); 112. If the Content Delivery Network (CDN) does not have the HTML page to be rendered cached, request the HTML page to be rendered from the Web server; 113. The Web server sends the HTML page to be rendered to the Content Delivery Network (CDN) and caches it; 114. The Content Delivery Network (CDN) returns the cached HTML page to be rendered to the client. Optionally, if the Content Delivery Network (CDN) itself has already cached the HTML page to be rendered, steps 112 and 113 above do not need to be executed. Instead, directly execute step 114 to return the cached resource that has been hit. 115. The client parses the HTML page to be rendered (index.html) and requests JavaScript resources in the Client-Side Rendering (CSR) directory from the Content Delivery Network (CDN) according to the link of the client-side rendering script (JavaScript script) included. 116. The client obtains the JavaScript resources in the Client-Side Rendering (CSR) directory from the CDN. 117. The client executes the client-side rendering script based on the JavaScript resources in the Client-Side Rendering (CSR) directory to perform client-side rendering. Step 120. When the client parses a custom edge rendering element from the HTML page to be rendered, an edge rendering request is initiated using the custom edge rendering element. Furthermore, the HTML page to be rendered (index.html) carries a custom edge rendering element. The custom edge rendering element is configured to bind to an edge rendering component. When it monitors that the HTML page to be rendered (index.html) carries the custom edge rendering element, an edge rendering request is initiated using the custom edge rendering element. In one implementation, the custom edge rendering element is implemented based on the custom element API of the Web Components standard and is used to replace the edge rendering component. The custom edge rendering element mainly has three functions: 1) Event binding, loading and executing the relevant logic of the events isomorphic to the edge rendering component. 2) Collecting the attributes passed into the edge rendering component on the client side and initiating an edge rendering request when mounting. After receiving the response from the edge service, it is mounted to the current element. 3) Monitoring attributes, and reinitiating a request and updating the component display when the attributes change. Step 130. The edge service responds to the edge rendering request to perform edge rendering, generates an edge rendering component page, and returns it to the client. In one implementation, the edge rendering request initiated by the client is based on the custom edge rendering element carrying the positioning identifier of the edge rendering component; so that the edge service responds to the edge rendering request and, in the case of hitting the cached edge rendering component page according to the positioning identifier, returns the cached edge rendering page component to the client. In one implementation, the client-initiated edge rendering request carries the positioning identifier of the edge rendering component based on the custom edge rendering element, so that the edge service responds to the edge rendering request, runs the deployed edge rendering script, obtains the data required for edge rendering from the backend server, generates the edge rendering component page, and returns it to the client. In one implementation, in the case where the edge service has not deployed the edge rendering script, before executing the edge rendering script to generate the edge rendering page component, request and obtain the edge rendering script corresponding to the positioning identifier from the web server. In one implementation, after the edge service generates the edge rendering component page, it is cached to the Content Delivery Network (CDN). Referring to FIG. 2, an interaction flowchart of page rendering is exemplarily shown, which includes the specific steps of the above 130: 131. When the edge service has not deployed the edge rendering script, the edge service requests the edge rendering script corresponding to the custom edge rendering element from the web server; 132. The edge service obtains and deploys the edge rendering script from the web server; 133. The edge service runs the deployed edge rendering script; 134. The edge service requests the data required for edge rendering from the backend server; 135. The edge service obtains the data required for edge rendering from the backend server; 136. The edge service generates the edge rendering component page according to the data required for edge rendering; 137. The edge service caches the generated edge rendering component page to the CDN; 138. The edge service returns the cached edge rendering component page to the client. Optionally, if the edge service has already deployed the edge rendering script, there is no need to execute the above 131 and 132, and it can directly start from executing 133. Optionally, if the edge service has already cached the edge rendering component page, there is no need to execute the above 131 - 137, and it can directly execute 138. Step 140. The client uses the custom edge rendering element to mount the edge rendering component page. In this way, edge rendering can be realized on the basis of client-side rendering. The above describes the page rendering process in the running state. In the following, in combination with FIGS. 3 and 4, the compilation stage in the development state before the client accesses the page is introduced in detail. As shown in FIG. 3, the compilation stage in the development state includes: 210. Determine the source code of the client-side rendering component and the edge rendering component. Among them, the edge rendering component is wrapped by an edge rendering wrapper. Specifically, in the existing client-side rendering framework development mode, for components that rely on the backend server to provide data for rendering, an edge rendering wrapper can be added to convert them into components that can perform edge rendering. As shown in Figure 4, component compA is still a client-side rendering component that performs client-side rendering on the client side, while component compB will be marked as an edge rendering component that performs edge rendering on the edge service. The following shows an example of the source code of the client-side rendering component and the edge rendering component: 220. Compile the source code through an edge rendering conversion plugin. The edge rendering conversion plugin identifies the edge rendering wrapper and performs the following operations on its source code: (1) Replace the edge rendering component wrapped by the edge rendering wrapper with a custom edge rendering element, compile the replaced source code to generate the HTML page to be rendered, and compile the client-side rendering component into a client-side rendering script. Specifically, replace the component wrapped by the edge rendering wrapper with a custom edge rendering element, and then the source code continues to follow the original client-side rendering compilation process and is compiled into index.html and the JavaScript script under the client-side rendering (CSR) directory, that is, csr / *.js in Figure 4. (2) Extract the source code of the edge rendering component and compile it into an edge rendering script. Specifically, extract the source code of the component wrapped by the edge rendering wrapper and convert it into edge rendering code, and then compile it into a JavaScript script under the edge rendering (ESR) directory. This JavaScript script runs on the nodes of the edge service, that is, esr / compB.js in Figure 4. Referring to Figure 4, it also includes: Deploy the HTML page to be rendered, the client-side rendering script, and the edge rendering script to the web server. In this way, the client accesses the web server through a request to obtain the HTML page to be rendered and the client-side rendering script. The client-side rendering script is used for the client to perform client-side rendering; The edge service accesses the web server through a request to obtain the edge rendering script. The edge rendering script is used for the edge service to perform edge rendering. By using the technical solution of the above embodiments of the present application, edge rendering can be achieved based on client-side rendering without configuring server resources for server-side rendering. Moreover, the client does not need to perform relevant modifications to the data stream, with little invasiveness, without changing the development mode of the existing client-side rendering framework, and supporting the gradual migration to edge rendering. Moreover, the solution of the above embodiments has low resource requirements for edge services and uses edge services on demand. Only when the user actually accesses the component wrapped by the edge rendering wrapper will the edge service be used for edge rendering, and the rendering result is cached in the CDN and can be reused later. In this way, the page rendering performance can be greatly improved. 1) When loading for the first time, the component resources of the edge rendering wrapper part and the corresponding rendering time are reduced, improving the first-screen rendering performance; 2) Compared with the client sending requests to the backend server, the edge service sending requests to the backend server can reduce TCP connection reduction and network transmission overhead. Furthermore, the product after edge service rendering is an html page. In the case of also writing it into the CDN cache, subsequent access does not require requesting the server again or executing js again, which can not only improve the client access time but also greatly reduce the pressure on the backend server. In the description of this specification, the descriptions of reference terms such as "some possible implementation manners", "some embodiments", "examples", "specific examples", or "some examples" mean that the specific features, structures, materials, or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic expressions of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described can be combined in a suitable manner in any one or more embodiments or examples. In addition, without contradiction, those skilled in the art can combine and combine the different embodiments or examples and the features of the different embodiments or examples described in this specification. Regarding the method flowchart of the embodiments of the present application, certain operations are described as different steps executed in a certain order. Such a flowchart is illustrative rather than restrictive. Certain steps described herein can be grouped together and executed in a single operation, certain steps can be divided into multiple sub-steps, and certain steps can be executed in a different order than shown herein. Each step shown in the flowchart can be implemented in any way by any circuit structure and / or tangible mechanism (for example, software running on a computer device, hardware (such as logic functions implemented by a processor or chip), etc., and / or any combination thereof). Based on the same technical concept, an embodiment of the present invention further provides a page rendering system for executing the page rendering method provided in any of the above embodiments. The page rendering system at least includes: A client, which is used to obtain the HTML page to be rendered and perform client-side rendering when accessing a page. The HTML page to be rendered carries custom edge rendering elements. When custom edge rendering elements are parsed from the HTML page to be rendered, an edge rendering request is initiated using the custom edge rendering elements; An edge service, which is used to perform edge rendering in response to the edge rendering request, generate an edge-rendered component page, and return it to the client; The client is also used to mount the edge-rendered component page using the custom edge rendering elements in the HTML page. Referring to FIG. 2, the system may further include a web server, a CDN, and a backend server, and can implement each process of the foregoing method embodiments and achieve the same effects and functions, which will not be elaborated here. According to some embodiments of the present application, there is provided a page rendering device according to an embodiment of the present application, which is used to execute the page rendering method shown in FIG. 1. The device 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 method of the foregoing embodiments. According to some embodiments of the present application, there is provided a non-volatile computer storage medium for the page rendering method, on which computer-executable instructions are stored, and the computer-executable instructions are configured to execute: the method of the foregoing embodiments when run by a processor. Computer-readable media include permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. The information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette tapes, magnetic disk magnetic tape storage or other magnetic storage devices, or any other non-transmission media that can be used to store information accessible by a computing device. In addition, although the operations of the method of the present invention are described in a specific order in the drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step for execution, and / or one step may be decomposed into multiple steps for execution. Each embodiment in this application is described in a progressive manner. For the same or similar parts between the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for the embodiments of the device, equipment, and computer-readable storage medium, since they are basically similar to the method embodiments, their descriptions are simplified, and the relevant parts can refer to the partial descriptions of the method embodiments. The device, equipment, and computer-readable storage medium provided in the embodiments of this application correspond one-to-one with the method. Therefore, the device, equipment, and computer-readable storage medium also have beneficial technical effects similar to those of the corresponding method. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the device, equipment, and computer-readable storage medium will not be elaborated here. Although the spirit and principle of the present disclosure have been described with reference to several specific implementation manners above, it should be understood that the present disclosure is not limited to the disclosed specific implementation manners, and the division of each aspect does not mean that the features in these aspects cannot be combined. The present disclosure aims to cover various modifications and equivalent arrangements included within the spirit and scope of the appended patent claims. 110~140: Steps 210, 220: Steps Other features and effects of the present invention will be clearly presented in the embodiments with reference to the drawings, where: FIG. 1 is a flowchart of a page rendering method according to an embodiment of the present invention; FIG. 2 is a system interaction diagram of a page rendering method according to an embodiment of the present invention; FIG. 3 is a flowchart of a page rendering method according to an embodiment of the present invention; FIG. 4 is a schematic diagram of a page rendering development state according to an embodiment of the present invention. 110~140: Steps

Claims

1. A page rendering method, comprising: When a user accesses a page, the system obtains the HTML page to be rendered and the user-side rendering script, and uses the user-side rendering script to render the HTML page to be rendered. When the user detects a custom edge rendering element in the HTML page to be rendered, it initiates an edge rendering request using the custom edge rendering element. The edge service responds to the edge rendering request by performing edge rendering, generating an edge rendering element page, and returning it to the user. The user uses the custom edge rendering element to mount the edge rendering element page. The custom edge rendering element is implemented based on the custom element API of the Web Components standard, used to replace the edge rendering element and collect the attributes passed to the edge rendering element on the user. When the attributes change, the display of the edge rendering element is updated. Before the user accesses the page, the system further includes: determining the source code of the user-side rendering element and the edge rendering element, wherein the edge rendering element is wrapped with an edge rendering wrapper. The edge rendering conversion plugin replaces the edge rendering element wrapped by the edge rendering wrapper with the custom edge rendering element, compiles the replaced source code to generate the HTML page to be rendered, and compiles the client-side rendering element into the client-side rendering script; and, through the edge rendering conversion plugin, extracts the source code of the edge rendering element and compiles it into the edge rendering script.

2. The method according to claim 1 further includes: Deploy the HTML page to be rendered, the client-side rendering script, and the edge rendering script to the web server; The client requests access to the web server to obtain the HTML page to be rendered and the client-side rendering script, which is used by the client to perform client-side rendering; the edge service requests access to the web server to obtain the edge rendering script, which is used by the edge service to perform edge rendering.

3. The method according to claim 1 further includes: When the user accesses the page, it requests the HTML page to be rendered from the Content Delivery Network (CDN); The HTML page to be rendered is retrieved from the cached content delivery network (CDN), or the homepage HTML file is retrieved from the web server via the content delivery network (CDN).

4. The method according to claim 1 further includes: The user terminal initiates the edge rendering request, which is based on the positioning identifier of the edge rendering element carried by the custom edge rendering element; The edge service responds to the edge rendering request and, if the cached edge rendering element page is hit according to the location identifier, returns the cached edge rendering page element to the user terminal.

5. The method according to claim 1 further includes: The user terminal initiates the edge rendering request, which is based on the positioning identifier of the edge rendering element carried by the custom edge rendering element; The edge service responds to the edge rendering request, runs the deployed edge rendering script, obtains the data required for edge rendering from the backend server, generates the edge rendering element page, and returns it to the user client.

6. The method according to request item 5, wherein, Before executing the edge rendering script to generate the edge rendering page element, the method further includes: if the edge rendering script is not deployed in the edge service, requesting and obtaining the edge rendering script corresponding to the location identifier from the web server.

7. The method according to claim 1 further includes: After the edge service generates the edge rendering element page, it caches it on the content delivery network (CDN).

8. A page rendering system configured to perform the method as described in any one of requests 1-7, comprising: The client-side is used to obtain the HTML page to be rendered and perform client-side rendering when accessing a page, wherein the HTML page to be rendered carries custom edge rendering elements. When the custom edge rendering element is parsed from the HTML page to be rendered, an edge rendering request is initiated using the custom edge rendering element; the edge service is used to respond to the edge rendering request by performing edge rendering, generating an edge rendering element page, and returning it to the user terminal; the user terminal is also used to mount the edge rendering element page using the custom edge rendering element in the HTML page.

9. A page rendering apparatus, comprising: At least one processor; And a memory communicatively connected to at least one processor; wherein the memory stores instructions executable by at least one processor, the instructions being executed by at least one processor to enable at least one processor to perform: the method as described in any one of claims 1-7.

10. A computer-readable storage medium storing a program that, when executed by a multi-core processor, causes the multi-core processor to perform the method as described in any one of claims 1-7.

Citation Information

Patent Citations

  • Static resource loading method, device, apparatus, and readable storage medium

    CN109254804A

  • Page rendering method based on low-code platform, electronic equipment and storage medium

    CN116382684A

  • Page processing method, device, apparatus and storage medium

    TW202141300A

  • Apparatus and methods for enhanced content control, consumption and delivery in a content distribution network

    US20210120315A1