Page rendering method, system and apparatus, and computer-readable storage medium

Abstract

Provided in the present invention are a page rendering method, system and apparatus, and a computer-readable storage medium. The method comprises: when accessing a page, a client acquiring an HTML page to be rendered and a client-side rendering script, and using the client-side rendering script to perform client side rendering on said HTML page; when a custom edge side rendering element is detected in said HTML page, the client using the custom edge side rendering element to initiate an edge side rendering request; an edge service performing edge side rendering in response to the edge side rendering request, so as to generate an edge side rendering component page, and returning the edge side rendering component page to the client; and the client using the custom edge side rendering element to mount the edge side rendering component page. By using the method, the page rendering efficiency can be improved.

Description

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

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application claims priority to the Chinese patent application filed with the State Intellectual Property Office of China on August 7, 2023, with application number CN202310989210.7 and application name “A page rendering method, system, device and computer-readable storage medium”, the entire contents of which are incorporated by reference into this application. Technical Field

[0003] The present invention belongs to the front-end field, and specifically relates to a page rendering method, system, device and computer-readable storage medium. Background Art

[0004] This section is intended to provide a background or context to embodiments of the invention that are recited in the claims. No statement herein is admitted to be prior art by inclusion in this section.

[0005] With the rapid advancement of internet technology, front-end code has become increasingly complex. However, this complexity increases the size of the client, requiring users to download more content before the page is rendered. To reduce first-page rendering time and improve user experience, the industry has explored various rendering methods, such as client-side rendering (CSR) and server-side rendering (SSR). However, these rendering methods still fall short of meeting users' ultimate pursuit of a superior experience.

[0006] With the development of edge computing, the industry has proposed edge side rendering (ESR). Taking advantage of the fact that edge computing nodes are closer to users and have shorter network latency, the page is split into dynamic and static parts. The static content is cached in the content distribution network (CDN) and quickly returned to the user. Then, a request for dynamic content is initiated on the edge computing node, and the dynamic content is then spliced ​​with the static part, thereby further improving the user's first screen loading time. In particular, it can provide a good user experience in edge areas or weak network environments, and also reduce the pressure on the original SSR server.

[0007] Currently, the industry's implementation of edge rendering is usually based on server-side rendering combined with streaming, but there is still the problem of slow rendering time.

[0008] Summary of the Invention

[0009] In response to 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-mentioned problems can be solved.

[0010] The present invention provides the following solutions.

[0011] In a first aspect, a page rendering method is provided, comprising: when a client accesses a page, obtaining an HTML page to be rendered and a client rendering script, and performing client rendering on the HTML page to be rendered using the client rendering script; when the client monitors a custom edge rendering element from the HTML page to be rendered, initiating an edge rendering request using the custom edge rendering element; an edge service performs edge rendering in response to the edge rendering request, generates an edge rendering component page, and returns the page to the client; and the client mounts the edge rendering component page using the custom edge rendering element.

[0012] In one embodiment, before the client accesses the page, it also includes: determining the source code of the client rendering component and the edge rendering component, wherein an edge rendering wrapper is used to wrap the edge rendering component; using an edge rendering conversion plug-in, replacing the edge rendering component wrapped by the edge rendering wrapper with a custom edge rendering element, compiling the replaced source code to generate an HTML page to be rendered, and compiling the client rendering component into a client rendering script; and, using the edge rendering conversion plug-in, extracting the source code of the edge rendering component and compiling it into an edge rendering script.

[0013] In one embodiment, the method further includes: deploying an HTML page to be rendered, a client rendering script, and an edge rendering script to a web server; the client accesses the web server through a request to obtain the HTML page to be rendered and the client rendering script, and the client rendering script is used by 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 by the edge service to perform edge rendering.

[0014] In one embodiment, it also includes: when the client accesses the page, requesting the HTML page to be rendered from the content delivery network (CDN); obtaining the HTML page to be rendered cached in the content delivery network (CDN), or requesting the homepage HTML file from the web server through the content delivery network (CDN).

[0015] In one embodiment, it also includes: the client initiates an edge rendering request, the edge rendering request carries a location identifier of the edge rendering component based on the custom edge rendering element; the edge service responds to the edge rendering request, and when the cached edge rendering component page is hit according to the location identifier, returns the cached edge rendering page component to the client.

[0016] In one embodiment, it also includes: the client initiates an edge rendering request, the edge rendering request carries the location identifier of the edge rendering component based on 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 component page, and returns it to the client.

[0017] In one embodiment, before executing the edge rendering script to generate the edge rendering page component, the method further includes: in a case where the edge service has not deployed the edge rendering script, requesting from the web server to obtain the edge rendering script corresponding to the location identifier.

[0018] In one embodiment, the method further includes: after the edge service generates the edge rendering component page, caching it in a content delivery network (CDN).

[0019] In one embodiment, 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.

[0020] In a second aspect, a page rendering system is provided, configured to execute the method according to any one of claims 1 to 9, comprising a client, configured to obtain an HTML page to be rendered and perform client-side rendering when accessing a page, wherein the HTML page to be rendered carries a custom edge rendering element; 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; an edge service is configured to perform edge rendering in response to the edge rendering request, generate an edge rendering component page, and return it to the client; the client is further configured to mount the edge rendering component page using the custom edge rendering element in the HTML page.

[0021] In a third aspect, a page rendering device is provided, comprising: 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 to enable the at least one processor to execute: the method of the first aspect.

[0022] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a program, and when the program is executed by a multi-core processor, the multi-core processor executes the method of the first aspect.

[0023] One of the advantages of the above embodiment is that it can implement edge rendering based on client rendering, which can greatly improve page rendering performance and efficiency: 1) The component resources and corresponding rendering time of the edge rendering package part are reduced during the first loading, thereby improving the first screen rendering performance; 2) Compared with the client initiating a request to the back-end server, the edge service initiating a request to the back-end server can reduce TCP connection drop and network transmission overhead; 3) The resource requirements for the edge service are small. Only when the user actually accesses the component wrapped by the edge rendering wrapper will the edge service be used for edge rendering.

[0024] Other advantages of the present invention will be explained in more detail with reference to the following description and accompanying drawings.

[0025] It should be understood that the above description is only an overview of the technical solution of the present disclosure, so that the technical means of the present disclosure can be generally understood and then implemented in accordance with the contents of the description. In order to make the above and other purposes, features and advantages of the present disclosure more clearly understood, the following examples are used to illustrate specific embodiments of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] The drawings used are briefly introduced. The drawings herein are incorporated into the specification and constitute a part of this specification. These drawings illustrate embodiments consistent with the present disclosure and are used together with the specification to illustrate the technical solutions of the present disclosure. It should be understood that the drawings only illustrate certain embodiments of the present disclosure and should not be regarded as limiting the scope of protection. For those of ordinary skill in the art, other relevant drawings can be obtained based on these drawings without inventive work. Moreover, the same reference numerals are used to represent the same components throughout the drawings. In the drawings:

[0027] FIG1 is a schematic flow chart of a page rendering method according to an embodiment of the present invention;

[0028] FIG2 is a system interaction diagram of a page rendering method according to an embodiment of the present invention;

[0029] FIG3 is a schematic diagram of a flow chart of a page rendering method according to an embodiment of the present invention;

[0030] FIG4 is a schematic diagram of a page rendering development state according to an embodiment of the present invention.

[0031] In the drawings, the same or corresponding reference numerals denote the same or corresponding parts. DETAILED DESCRIPTION

[0032] Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present disclosure are shown in the accompanying 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. Rather, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0033] In the description of the embodiments of the present disclosure, 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 the specification, and do not exclude the possibility of the presence of one or more other features, numbers, steps, actions, components, parts, or combinations thereof.

[0034] Unless otherwise specified, “ / ” means or. For example, A / B can mean A or B. “And / or” in this article is only a way to describe the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0035] The terms "first", "second", etc. are used only to distinguish the same or similar technical features for the convenience of description and should not be understood 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 embodiments of the present disclosure, unless otherwise specified, the term "plurality" means two or more than two. To clearly explain the embodiments of the present application, we will first introduce some concepts that may appear in subsequent embodiments.

[0036] CSR (Client Side Rendering) refers to client-side rendering, which means rendering and generating HTML pages on the client.

[0037] SSR (Server Side Rendering) refers to server-side rendering, which means rendering and generating HTML pages on the server.

[0038] ESR (Edge Side Rendering) refers to edge rendering, which is to render and generate HTML pages on edge services.

[0039] It should also be noted that, in the absence of conflict, the embodiments and features of the embodiments of the present invention may be combined with each other. The present invention will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0040] There are two existing methods for implementing edge rendering. One is to deploy server-side rendering directly to edge nodes. The other is to still deploy server-side rendering in the local center, deploy edge services on edge nodes, split the page into static HTML and dynamic HTML, and request the edge service to return static HTML in streaming format, while requesting the local server-side rendering to obtain dynamic HTML and continue to return it in streaming format.

[0041] However, existing edge rendering implementations are all based on server-side rendering. The first method, which deploys server-side rendering directly to edge nodes, requires large resources and is difficult to maintain. The second method requires the client to be modified to support streaming and requires server resources for server-side rendering.

[0042] The most important thing is that the above methods are not applicable to projects based on client rendering, which cannot take advantage of edge computing capabilities.

[0043] To overcome the above problems, Figure 1 is a flow chart of a page rendering method according to an embodiment of the present application, which is used to achieve lighter-weight edge rendering. In this process, from the device perspective, the execution subject can be one or more electronic devices; from the program perspective, 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 in the embodiment shown in Figure 1.

[0044] As shown in FIG1 , the method provided in this embodiment may include the following steps:

[0045] 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;

[0046] The HTML page to be rendered is the index.html file that the client (browser) retrieves from the web server. It usually only contains a basic skeleton and some static resource links. The client obtains and parses the HTML page to be rendered (index.html). When it detects a link to a JavaScript file, the client downloads the JavaScript file and executes the code within it.

[0047] The HTML page to be rendered (index.html) in the embodiment of the present application may include a link to a client-side rendering script (JavaScript script) and a custom edge rendering element. When a link to a client-side rendering script is detected, the JavaScript resources required for client-side rendering are obtained on the client side for client-side rendering. When a custom edge rendering element is detected, an edge rendering request is initiated to the edge service to implement the edge rendering.

[0048] The specific steps of the above 110 are described in detail below. In one embodiment, when the client accesses a 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 the homepage HTML file from the web server through CDN access.

[0049] 2 , an interactive flow chart of page rendering is exemplarily shown, which includes the specific steps of the above 110 :

[0050] 111. When the client accesses the page, it requests the HTML page to be rendered (index.html) from the content delivery network (CDN);

[0051] 112. If the content delivery network (CDN) does not cache the HTML page to be rendered, request the HTML page to be rendered from the web server;

[0052] 113. The web server sends the HTML page to be rendered to the content delivery network (CDN) and caches it.

[0053] 114. The content delivery network (CDN) returns the cached HTML page to be rendered to the client.

[0054] Optionally, if the content delivery network (CDN) itself has cached the HTML page to be rendered, there is no need to perform the above steps 112 and 113, and step 114 can be directly performed to return the cached resource that is hit.

[0055] 115. The client parses the HTML page to be rendered (index.html), and requests the 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);

[0056] 116. The client obtains JavaScript resources in the client-side rendering (CSR) directory from the CDN;

[0057] 117. The client executes the client rendering script based on the JavaScript resources in the client rendering (CSR) directory to perform client rendering.

[0058] Step 120: When the client parses the custom edge rendering element from the HTML page to be rendered, it initiates an edge rendering request using the custom edge rendering element;

[0059] Furthermore, the HTML page to be rendered (index.html) carries a custom edge rendering element. The custom edge rendering element is configured to be bound to the edge rendering component, and when the HTML page to be rendered (index.html) carries the custom edge rendering element, the custom edge rendering element is used to initiate an edge rendering request.

[0060] In one embodiment, 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.

[0061] This custom edge rendering element has three main functions:

[0062] 1) Event binding, loading and executing the event-related logic of the edge rendering component isomorphic;

[0063] 2) The client collects the attributes passed to the edge rendering component, initiates an edge rendering request when mounting, and mounts it to the current element after receiving the response from the edge service;

[0064] 3) Monitor attributes, re-initiate request and update component display when attributes change.

[0065] Step 130: The edge service performs edge rendering in response to the edge rendering request, generates an edge rendering component page, and returns it to the client;

[0066] In one embodiment, an edge rendering request initiated by a client carries a location identifier of an edge rendering component based on a custom edge rendering element; so that the edge service responds to the edge rendering request and returns a cached edge rendering page component to the client when a cached edge rendering component page is hit according to the location identifier.

[0067] In one embodiment, the edge rendering request initiated by the client carries the location 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.

[0068] In one embodiment, when the edge service does not deploy the edge rendering script, before executing the edge rendering script to generate the edge rendering page component, the edge rendering script corresponding to the location identifier is requested from the web server.

[0069] In one embodiment, after the edge service generates the edge rendering component page, it caches it in a content delivery network (CDN).

[0070] 2 , an interactive flow chart of page rendering is exemplarily shown, which includes the specific steps of the above 130 :

[0071] 131. If the edge service does not deploy the edge rendering script, the edge service requests the edge rendering script corresponding to the custom edge rendering element from the web server;

[0072] 132. The edge service obtains and deploys the edge rendering script from the web server;

[0073] 133. The edge service runs the deployed edge rendering script;

[0074] 134. The edge service requests the data required for edge rendering from the backend server;

[0075] 135. The edge service obtains the data required for edge rendering from the backend server;

[0076] 136. Edge service generates edge rendering component page based on the data required for edge rendering

[0077] 137. The edge service caches the generated edge rendering component page to the CDN

[0078] 138. The edge service returns the cached edge rendering component page to the client.

[0079] Optionally, if the edge service has already deployed the edge rendering script, there is no need to execute the above 131 and 132, and the process can start directly from 133.

[0080] Optionally, if the edge service has cached the edge rendering component page, there is no need to execute the above 131-137, and 138 can be directly executed.

[0081] Step 140: The client mounts the edge rendering component page using the custom edge rendering element.

[0082] In this way, edge rendering can be achieved based on client rendering.

[0083] The above describes the page rendering process in the running state. In the following, combined with Figures 3 and 4, the compilation stage in the development state before the client accesses the page is described in detail.

[0084] As shown in Figure 3, the development compilation phase includes:

[0085] 210. Determine the source code of the client rendering component and the edge rendering component, wherein the edge rendering component is wrapped using an edge rendering wrapper;

[0086] Specifically, within the existing client-side rendering framework development model, components that rely on backend servers to provide data for rendering can be converted into edge-rendering components by adding an edge rendering wrapper. As shown in Figure 4, component compA remains a client-side rendered component, while component compB is marked as an edge-rendering component that performs edge rendering on the edge service.

[0087] An example of the source code of the client rendering component and the edge rendering component is shown below:

[0088] 220. Compile the source code through the edge rendering conversion plug-in.

[0089] The edge rendering conversion plug-in recognizes the edge rendering wrapper and performs the following actions on its source code:

[0090] (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 an HTML page to be rendered, and compile the client rendering component into a client rendering script;

[0091] Specifically, the component wrapped by the edge rendering wrapper is replaced 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 JavaScript scripts in the client-side rendering (CSR) directory, namely csr / *.js in Figure 4.

[0092] (2) Extract the source code of the edge rendering component and compile it into an edge rendering script.

[0093] Specifically, the source code of the component wrapped by the edge rendering wrapper is extracted and converted into edge rendering code, which is then compiled into a JavaScript script in the edge rendering (ESR) directory. This JavaScript script runs on the edge service node, namely esr / compB.js in Figure 4.

[0094] Referring to FIG4 , the process also includes: deploying the HTML page to be rendered, the client rendering script, and the edge rendering script to the web server.

[0095] In this way, the client accesses the web server through a request to obtain the HTML page to be rendered and the client rendering script, which is used by the client to perform client rendering;

[0096] The edge service accesses the web server through a request to obtain the edge rendering script, which is used by the edge service to perform edge rendering.

[0097] Utilizing the technical solutions of the aforementioned embodiments of this application, edge rendering can be implemented on top of client-side rendering, eliminating the need to configure server resources for server-side rendering. Furthermore, the client does not require any modifications for streaming, resulting in minimal intrusion and no changes to the development model of existing client-side rendering frameworks, supporting the gradual migration of edge rendering.

[0098] Furthermore, the solution in the above embodiment requires minimal resources from edge services, using them on demand. Edge services are only used for edge rendering when a user actually accesses a component wrapped by an edge rendering wrapper, and the rendered results are cached in the CDN for subsequent reuse.

[0099] This significantly improves page rendering performance. 1) During initial load, the component resources and rendering time required for edge rendering are reduced, improving initial rendering performance. 2) Compared to clients initiating requests to backend servers, having edge services initiate requests to backend servers reduces TCP disconnects and network transmission overhead.

[0100] Furthermore, the product rendered by the edge service is an HTML page. If it is also written into the CDN cache, subsequent access does not require re-requesting the server or re-executing JS. This not only improves the client access time but also significantly reduces the pressure on the backend server.

[0101] In the description of this specification, the description with reference to the terms "some possible implementation methods", "some embodiments", "examples", "specific examples", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations 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 any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art can combine and combine different embodiments or examples described in this specification and the features of different embodiments or examples without contradiction.

[0102] About the method flow chart of the embodiment of the present application, some operations are described as the different steps performed in a certain order.Such flow chart belongs to illustrative and non-restrictive.Some steps described in this article can be grouped together and performed in a single operation, some steps can be divided into multiple sub-steps and can be performed in a different order than shown in this article.The various steps shown in the flow chart can be realized in any way by any circuit structure and / or tangible mechanism (for example, by the software, hardware (for example, the logical function realized by processor or chip) etc. running on computer equipment and / or its any combination).

[0103] 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.

[0104] The page rendering system includes at least:

[0105] The client is used to obtain the HTML page to be rendered and perform client-side rendering when accessing the page. The HTML page to be rendered carries the custom edge rendering element; when the custom edge rendering element is parsed from the HTML page to be rendered, the custom edge rendering element is used to initiate an edge rendering request;

[0106] Edge service, used to perform edge rendering in response to edge rendering requests, generate edge rendering component pages, and return them to the client;

[0107] The client is also used to mount the edge rendering component page using the custom edge rendering element in the HTML page.

[0108] Referring to FIG2 , the system may further include a web server, a CDN, and a back-end server, and may implement the various processes of the aforementioned method embodiment and achieve the same effects and functions, which will not be described in detail here.

[0109] According to some embodiments of the present application, a page rendering device according to an embodiment of the present application is provided, which is used to execute the page rendering method shown in Figure 1, and the device includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of the above embodiment.

[0110] According to some embodiments of the present application, a non-volatile computer storage medium of a page rendering method is provided, on which computer executable instructions are stored. The computer executable instructions are configured to execute the method of the above embodiment when executed by a processor.

[0111] Computer-readable media include permanent and non-permanent, removable and non-removable media that can be implemented using any method or technology to store information. 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 cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. Furthermore, although the operations of the present method are described in a particular order in the accompanying drawings, this does not require or imply that the operations must be performed in that particular order, or that all illustrated operations must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into a single step, and / or a single step may be broken down into multiple steps.

[0112] The various embodiments in this application are described in a progressive manner. Similar parts between the various embodiments can be referred to in conjunction with each other. Each embodiment focuses on the differences from other embodiments. In particular, the descriptions of the apparatus, device, and computer-readable storage medium embodiments are simplified because they are generally similar to the method embodiments. For relevant parts, please refer to the descriptions of the method embodiments.

[0113] The apparatus, device and computer-readable storage medium provided in the embodiments of the present application correspond one-to-one to the method. Therefore, the apparatus, device and computer-readable storage medium also have similar beneficial technical effects as the corresponding method. Since the beneficial technical effects of the method have been described in detail above, the beneficial technical effects of the apparatus, device and computer-readable storage medium will not be repeated here.

[0114] Although the spirit and principles of the present disclosure have been described above with reference to several specific embodiments, it should be understood that the present disclosure is not limited to the specific embodiments disclosed, and the division into various aspects does not mean that the features of these aspects cannot be combined. The present disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. A page rendering method, wherein: include: When a client accesses a page, the HTML page to be rendered and the client rendering script are obtained, and the client rendering script is used to perform client rendering on the HTML page to be rendered; When the client monitors a custom edge rendering element from the HTML page to be rendered, initiating an edge rendering request using the custom edge rendering element; The edge service performs edge rendering in response to the edge rendering request, generates an edge rendering component page and returns it to the client; The client mounts the edge rendering component page using the custom edge rendering element.

2. The method according to claim 1, wherein: Before the client accesses the page, it also includes: Determining source code of a client rendering component and an edge rendering component, wherein the edge rendering component is wrapped by an edge rendering wrapper; By using an edge rendering conversion plug-in, the edge rendering component wrapped by the edge rendering wrapper is replaced with the custom edge rendering element, the replaced source code is compiled to generate the HTML page to be rendered, and the client rendering component is compiled into a client rendering script; and Through the edge rendering conversion plug-in, the source code of the edge rendering component is extracted and compiled into an edge rendering script.

3. The method according to claim 1, wherein: Also includes: Deploy the HTML page to be rendered, the client rendering script, and the edge rendering script to the web server; The client accesses the web server by requesting to obtain the HTML page to be rendered and the client rendering script, wherein the client rendering script is used by the client to perform client rendering; The edge service accesses the web server by requesting to obtain the edge rendering script, and the edge rendering script is used by the edge service to perform edge rendering.

4. The method according to claim 1, wherein: Also includes: When the client accesses a page, it requests the HTML page to be rendered from a content delivery network (CDN); The HTML page to be rendered is obtained from the cache in the content delivery network (CDN), or the home page HTML file is obtained from the Web server through the content delivery network (CDN).

5. The method according to claim 1, wherein: Also includes: The client initiates the edge rendering request, where the edge rendering request carries a location identifier of the edge rendering component based on the custom edge rendering element; The edge service responds to the edge rendering request and returns the cached edge rendering page component to the client when the cached edge rendering component page is hit according to the location identifier.

6. The method according to claim 2, wherein: Also includes: The client initiates the edge rendering request, where the edge rendering request carries a location identifier of the edge rendering component based on the custom edge rendering element; The edge service responds to the edge rendering request, runs the deployed edge rendering script, obtains data required for edge rendering from the backend server, generates the edge rendering component page, and returns it to the client.

7. The method according to claim 6, wherein: Before executing the edge rendering script to generate the edge rendering page component, the method further includes: In the case that the edge service has not deployed the edge rendering script, the edge rendering script corresponding to the location identifier is requested from the web server.

8. The method according to claim 1, wherein: Also includes: After the edge service generates the edge rendering component page, it caches it to a content delivery network (CDN).

9. The method according to claim 1, wherein: 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.

10. A page rendering system, wherein: is configured to perform the method according to any one of claims 1 to 9, comprising The client is used to obtain the HTML page to be rendered and perform client rendering when accessing the page, wherein the HTML page to be rendered carries a custom edge rendering element; 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; An edge service, configured to perform edge rendering in response to the edge rendering request, generate an edge rendering component page, and return the page to the client; The client is further used to mount the edge rendering component page using the custom edge rendering element in the HTML page.

11. A page rendering device, wherein: include: 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, and the instructions are executed by at least one processor to enable the at least one processor to execute: the method as described in any one of claims 1-9.

12. A computer-readable storage medium storing a program, wherein when the program is executed by a multi-core processor, the multi-core processor executes the method according to any one of claims 1 to 9.

Images