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

Abstract

The application provides a page rendering method, system and device and a computer readable storage medium, and the method comprises the following steps: when a client accesses a page, obtaining a to-be-rendered HTML page and a client rendering script, and rendering the to-be-rendered HTML page by using the client rendering script; when there is a custom edge rendering element in the to-be-rendered HTML page of the client, initiating an edge rendering request by using the custom edge rendering element; performing edge rendering by using an edge service in response to the edge rendering request, generating a cacheable edge rendering component page, and returning the edge rendering component page to the client; and mounting the edge rendering component page by using the custom edge rendering element. By using the above method, the page rendering efficiency can be improved.

Description

Technical Field

[0001] This invention belongs to the field of front-end development, and specifically relates to a page rendering method, system, device, and computer-readable storage medium. Background Technology

[0002] This section is intended to provide background or context for embodiments of the invention as set forth in the claims. The description herein is not an admission that it is prior art simply because it is included in this section.

[0003] With the rapid development of internet technology, front-end code has become increasingly complex. However, this complexity leads to larger client-side file sizes, requiring users to download more content before the page can be rendered. To reduce initial page load 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 methods still fall short of meeting users' demands for the ultimate user experience.

[0004] 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 static and dynamic content. Static content is cached on the Content Delivery Network (CDN) and quickly returned to the user. Then, the dynamic content is requested on the edge computing node and then concatenated with the static part. This further improves the user's first screen loading time, especially in edge areas or weak network environments, and can provide a good user experience. In addition, it reduces the pressure on the original SSR server.

[0005] Currently, the industry typically implements edge rendering by combining server-side rendering with streaming, which still results in slow rendering times. Summary of the Invention

[0006] To address the problems existing in the prior art, a page rendering method, system, apparatus, and computer-readable storage medium are proposed, which can solve the aforementioned problems.

[0007] The present invention provides the following solutions.

[0008] Firstly, a page rendering method is provided, comprising: when a client accesses a page, obtaining an HTML page to be rendered and a client-side rendering script, and using the client-side rendering script to perform client-side rendering of the HTML page to be rendered; when a custom edge rendering element exists in the HTML page to be rendered, initiating an edge rendering request using the custom edge rendering element; the edge service responds to the edge rendering request to perform edge rendering, generating a cacheable edge rendering component page and returning it to the client; and the client uses the custom edge rendering element to mount the edge rendering component page.

[0009] In one implementation, before the client accesses the page, the method further includes: determining the source code of the client-side rendering component and the edge rendering component, wherein the edge rendering component is wrapped with an edge rendering wrapper; replacing the edge rendering component wrapped with the edge rendering wrapper with a custom edge rendering element using an edge rendering conversion plugin; compiling the replaced source code to generate an HTML page to be rendered; compiling the client-side rendering component into a client-side rendering script; and extracting the source code of the edge rendering component and compiling it into an edge rendering script using the edge rendering conversion plugin.

[0010] In one implementation, the method further includes: deploying the HTML page to be rendered, the client-side rendering script, and the edge rendering script to a web server; the client accessing the web server via a request to obtain the HTML page to be rendered and the client-side rendering script, wherein the client-side rendering script is used by the client to perform client-side rendering; and the edge service accessing the web server via a request to obtain the edge rendering script, wherein the edge rendering script is used by the edge service to perform edge rendering.

[0011] In one implementation, the method further includes: when a client accesses a page, requesting an HTML page to be rendered from a content delivery network (CDN); obtaining the HTML page to be rendered cached in the content delivery network (CDN), or requesting the HTML file to be rendered from a web server through the content delivery network (CDN).

[0012] In one implementation, the method further includes: the client initiating an edge rendering request, the edge rendering request carrying a location identifier of the edge rendering component based on a custom edge rendering element; and the edge service responding to the edge rendering request by returning a cached edge rendering page component to the client if the cached edge rendering component page is found based on the location identifier.

[0013] In one implementation, the method further includes: the client initiating an edge rendering request, the edge rendering request carrying the location identifier of the edge rendering component based on a custom edge rendering element; the edge service responding to the edge rendering request, running the deployed edge rendering script, obtaining the data required for edge rendering from the backend server, generating the edge rendering component page, and returning it to the client.

[0014] In one implementation, before executing the edge rendering script to generate the edge rendering page component, the method further includes: requesting and obtaining the edge rendering script corresponding to the location identifier from the web server if the edge service has not deployed the edge rendering script.

[0015] In one implementation, the method further includes: after the edge service generates the edge rendering component page, it caches it to a content delivery network (CDN).

[0016] In one implementation, a 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.

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

[0018] Thirdly, a page rendering apparatus 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, the instructions being executed by the at least one processor to enable the at least one processor to perform: the method of the first aspect.

[0019] Fourthly, a computer-readable storage medium is provided, which stores a program that, when executed by a multi-core processor, causes the multi-core processor to execute the method of the first aspect.

[0020] One of the advantages of the above embodiments is that edge rendering can be implemented on the basis of client rendering, which can greatly improve page rendering performance and efficiency: 1) The component resources and corresponding rendering time of the edge rendering wrapper are reduced during the first load, improving the first screen rendering performance; 2) Compared with the client making a request to the backend server, the edge service makes a request to the backend server, which can reduce TCP connection reduction and network transmission overhead; 3) The resource requirements of the edge service are small. Edge rendering is only used when the user actually accesses the component wrapped by the edge rendering wrapper.

[0021] Other advantages of the present invention will be explained in more detail below with reference to the accompanying drawings.

[0022] It should be understood that the above description is merely an overview of the technical solution of this disclosure, so as to provide a general understanding of the technical means of this disclosure and to implement it in accordance with the contents of the specification. In order to make the above and other objects, features and advantages of this disclosure more apparent and understandable, specific embodiments of this disclosure are illustrated below. Attached Figure Description

[0023] The accompanying drawings are briefly described. These drawings, incorporated in and forming part of this specification, illustrate embodiments conforming to this disclosure and, together with the description, serve to illustrate the technical solutions of this disclosure. It should be understood that the drawings only illustrate certain embodiments of this disclosure and should not be considered as limiting the scope of protection. Those skilled in the art can obtain other related drawings based on these drawings without creative effort. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings:

[0024] Figure 1 This is a flowchart illustrating a page rendering method according to an embodiment of the present invention;

[0025] Figure 2 This is a system interaction diagram of a page rendering method according to an embodiment of the present invention;

[0026] Figure 3 This is a flowchart illustrating a page rendering method according to an embodiment of the present invention;

[0027] Figure 4 This is a schematic diagram of the page rendering development state according to an embodiment of the present invention.

[0028] In the accompanying drawings, the same or corresponding reference numerals indicate the same or corresponding parts. Detailed Implementation

[0029] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0030] In the description of embodiments disclosed herein, it should be understood that terms such as “comprising” or “having” are intended to indicate the presence of the disclosed features, figures, steps, behaviors, components, portions or combinations thereof in this specification, and do not exclude the possibility of the presence of one or more other features, figures, steps, behaviors, components, portions or combinations thereof.

[0031] Unless otherwise stated, " / " means "or". For example, A / B can mean A or B. In this article, "and / or" is merely a way of describing the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A alone, A and B at the same time, and B alone.

[0032] The terms "first," "second," etc., are used only for ease of description to distinguish identical or similar technical features and should not be construed as indicating or implying the relative importance or number of these technical features. Therefore, a feature defined by "first," "second," etc., may explicitly or implicitly include one or more of that feature. In the description of embodiments of this disclosure, unless otherwise stated, the term "multiple" means two or more. To clearly illustrate the embodiments of this application, some concepts that may appear in subsequent embodiments will first be introduced.

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

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

[0035] ESR (Edge Side Rendering) refers to edge rendering, which means rendering and generating HTML pages on the edge of a service.

[0036] It should also be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other. The present invention will now be described in detail with reference to the accompanying drawings and embodiments.

[0037] 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, while edge nodes deploy edge services. The page is split into static HTML and dynamic HTML. The edge service requests static HTML and returns it in a streaming manner, while at the same time it requests the local server-side rendering to obtain dynamic HTML and return it in a streaming manner.

[0038] However, existing edge rendering implementations are all based on server-side rendering. The first method, which deploys server-side rendering directly to edge nodes, has high resource requirements for edge nodes and presents operational and maintenance challenges. The second method requires corresponding modifications to the client to support streaming and also requires server resources for server-side rendering.

[0039] Most importantly, the above methods are not applicable to client-based rendering projects, as these projects cannot utilize edge computing capabilities.

[0040] To overcome the above problems, Figure 1 This is a flowchart illustrating a page rendering method according to an embodiment of this application, used to achieve lighter-weight edge rendering. In this process, from a device perspective, the executing entity can be one or more electronic devices; from a program perspective, the executing entity can correspondingly be a program mounted on these electronic devices. In this embodiment, the executing entity of the method can be... Figure 1 Page rendering in the illustrated embodiment.

[0041] like Figure 1 As shown, the method provided in this embodiment may include the following steps:

[0042] 110. When the client accesses the page, it obtains the HTML page to be rendered and the client rendering script, and performs client rendering of the HTML page to be rendered according to the client rendering script;

[0043] The HTML page to be rendered refers to the index.html file that the client (browser) obtains from the web server. It typically contains only a basic skeleton and some static resource links. The client obtains and parses this HTML page (index.html). When it detects links to JavaScript files, it downloads these JavaScript files and executes the code within them.

[0044] The HTML page (index.html) to be rendered in this embodiment may contain links to client-side rendering scripts (JavaScript scripts) and custom edge rendering elements. Specifically, 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 exists in the HTML page to be rendered, an edge rendering request is initiated to the edge service to achieve the edge rendering.

[0045] The specific steps of 110 above are described in detail below. In one embodiment, when a client accesses a page, it requests an HTML page to be rendered from a Content Delivery Network (CDN); obtains the HTML page to be rendered cached in the Content Delivery Network (CDN), or requests the HTML file to be rendered from a web server through the CDN.

[0046] refer to Figure 2 An example is shown in the interactive flowchart of page rendering, which includes the specific steps of 110 above:

[0047] 111. When a client accesses a page, it requests the HTML page (index.html) to be rendered from the Content Delivery Network (CDN).

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

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

[0050] 114. A Content Delivery Network (CDN) returns a cached, unrendered HTML page to the client.

[0051] Alternatively, if the content delivery network (CDN) itself has already cached the HTML page to be rendered, then there is no need to perform steps 112 and 113 above; you can directly perform step 114 to return the cached resources that have been hit.

[0052] 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) based on the links to the included client-side rendering scripts (JavaScript scripts);

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

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

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

[0056] Furthermore, the HTML page to be rendered (index.html) carries a custom edge rendering element. This custom edge rendering element is configured to bind to the edge rendering component, and when the HTML page to be rendered (index.html) carries the custom edge rendering element, an edge rendering request is initiated using this custom edge rendering element.

[0057] In one implementation, a 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.

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

[0059] 1) Event binding: Load and execute the relevant logic for events that are isomorphic to the edge rendering component;

[0060] 2) Collect the attributes passed to the edge rendering component on the client side, initiate an edge rendering request during mounting, and mount it to the current element after receiving the response from the edge service;

[0061] 3) Listen for properties, and when a property changes, re-initiate a request and update the component display.

[0062] Step 130: The edge service responds to the edge rendering request, performs edge rendering, generates the edge rendering component page, and returns it to the client;

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

[0064] In one implementation, the edge rendering request initiated by the client carries the location identifier of the edge rendering component based on a custom edge rendering element. This enables the edge service to respond to the edge rendering request, run the deployed edge rendering script, obtain the data required for edge rendering from the backend server, generate the edge rendering component page, and return it to the client.

[0065] In one implementation, if the edge rendering script is not deployed on the edge service, 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.

[0066] In one implementation, after the edge service generates the edge-rendered component page, it caches it to a content delivery network (CDN).

[0067] refer to Figure 2 An example is shown in the interactive flowchart of page rendering, which includes the specific steps of the above 130:

[0068] 131. If the edge service has not deployed an edge rendering script, the edge service requests the edge rendering script corresponding to the custom edge rendering element from the web server.

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

[0070] 133. Edge rendering scripts deployed for edge service execution;

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

[0072] 135. Edge services obtain the data required for edge rendering from the backend server;

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

[0074] 137. The edge service caches the generated edge rendering component pages to the CDN.

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

[0076] Alternatively, if the edge service has already deployed the edge rendering script, then there is no need to execute steps 131 and 132 above; you can start directly from step 133.

[0077] Optionally, if the edge service has already cached the edge rendering component page, then there is no need to execute steps 131-137 above; you can directly execute step 138.

[0078] Step 140: The client uses a custom edge rendering element to mount the edge rendering component page.

[0079] In this way, edge rendering can be achieved on top of client-side rendering.

[0080] The above text describes the runtime page rendering process. The following text will combine... Figure 3 and Figure 4 Before detailing how the client accesses the page, let's look at the compilation phase in development mode.

[0081] like Figure 3 As shown, the compilation phase in development mode includes:

[0082] 210. Determine the source code of the client-side rendering component and the edge rendering component, and wrap the edge rendering component with an edge rendering wrapper;

[0083] Specifically, in the existing client-side rendering framework development model, components that rely on data provided by a backend server for rendering can be transformed into components capable of edge rendering by adding an edge rendering wrapper. For example... Figure 4 As shown, 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.

[0084] Below is an example of the source code for the client-side rendering component and the edge rendering component:

[0085]

[0086] 220. Compile the source code using the edge rendering conversion plugin.

[0087] The edge rendering conversion plugin identifies the edge rendering wrapper and performs the following actions on its source code:

[0088] (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;

[0089] 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, compiling into index.html and the JavaScript scripts in the client-side rendering (CSR) directory, that is... Figure 4 csr / *.js.

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

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

[0092] refer to Figure 4 It also includes: deploying the HTML page to be rendered, the client-side rendering script, and the edge rendering script to the web server.

[0093] In this way, the client can access the web server by making a request 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.

[0094] This enables the edge service to access the web server via a request to obtain the edge rendering script, which is then used by the edge service to perform edge rendering.

[0095] By utilizing the technical solutions of the above embodiments of this application, edge rendering can be achieved on the basis of client-side rendering without configuring server resources for server-side rendering. Furthermore, the client does not require any modifications for streaming, resulting in minimal invasiveness, not altering the existing client-side rendering framework's development model, and supporting a gradual migration to edge rendering.

[0096] Furthermore, the above embodiments have low resource requirements for edge services, using them only on demand. Edge rendering is only performed when a user actually accesses a component wrapped by an edge rendering wrapper, and the rendering results are cached on a CDN for reuse.

[0097] This significantly improves page rendering performance. 1) It reduces the component resources and rendering time of the edge rendering wrapper during the initial load, improving the performance of the first screen rendering; 2) Compared to the client sending requests to the backend server, sending requests from the edge service to the backend server reduces TCP connection drops and network transmission overhead.

[0098] Furthermore, the output of edge service rendering is an HTML page. By also writing it into the CDN cache, subsequent accesses do not need to request the server again or execute JavaScript again. This not only improves client access time but also significantly reduces the pressure on the backend server.

[0099] In the description of this specification, the references to terms such as "some possible implementations," "some embodiments," "examples," "specific examples," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0100] Regarding the method flowcharts of embodiments of this application, certain operations are described as different steps performed in a certain order. Such flowcharts are illustrative and not restrictive. Some steps described herein may be grouped together and performed in a single operation, some steps may be divided into multiple sub-steps, and some steps may be performed in an order different from that shown herein. The various steps shown in the flowcharts may be implemented in any way by any circuit structure and / or tangible mechanism (e.g., software running on a computer device, hardware (e.g., logic functions implemented by a processor or chip), and / or any combination thereof).

[0101] Based on the same technical concept, embodiments of the present invention also provide a page rendering system for executing the page rendering method provided in any of the above embodiments.

[0102] A page rendering system includes at least:

[0103] The client is used to obtain the HTML page to be rendered and perform client-side rendering when the page is accessed. 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.

[0104] Edge services are used to respond to edge rendering requests, perform edge rendering, generate cacheable edge rendering component pages, and return them to the client;

[0105] The client-side application is also used to mount edge rendering component pages using custom edge rendering elements in HTML pages.

[0106] refer to Figure 2 The system may also include a web server, CDN, and backend server, and can implement the various processes of the aforementioned method embodiments to achieve the same effect and function, which will not be elaborated here.

[0107] According to some embodiments of this application, a page rendering apparatus according to an embodiment of this application is provided for performing... Figure 1 The page rendering method shown 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, the instructions being executed by the at least one processor to enable the at least one processor to perform the method of the above embodiments.

[0108] According to some embodiments of this application, a non-volatile computer storage medium is provided for a page rendering method, having stored thereon computer-executable instructions configured to execute when run by a processor: the method of the above embodiments.

[0109] Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can store information using any method or technology. 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, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device. Furthermore, although the operations of the method of the invention are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all of the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0110] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the descriptions of the apparatus, device, and computer-readable storage medium embodiments are simplified because they are substantially similar to the method embodiments; relevant details can be found in the descriptions of the method embodiments.

[0111] The apparatus, device, and computer-readable storage medium provided in the embodiments of this application are one-to-one corresponding to the method. Therefore, the apparatus, device, and computer-readable storage medium also have similar beneficial technical effects as their corresponding methods. 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.

[0112] While the spirit and principles of this disclosure have been described above with reference to several specific embodiments, it should be understood that this disclosure is not limited to the disclosed specific embodiments, and the division of aspects does not imply that features in these aspects cannot be combined. This 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, characterized in that, include: During the compilation phase, the source code of the edge rendering component is wrapped with an edge rendering wrapper; The source code containing the edge rendering wrapper is compiled by the edge rendering transformation plugin to generate an HTML page to be rendered containing custom edge rendering elements that can be run on the client, as well as an edge rendering script that can be run on the edge service. During the runtime phase, when the client accesses the page, it obtains the HTML page to be rendered and the client-side rendering script, and uses the client-side rendering script to render the HTML page to be rendered. When a custom edge rendering element exists in the HTML page to be rendered on the client, an edge rendering request is initiated using the custom edge rendering element. The edge service responds to the edge rendering request by performing edge rendering, generating a cacheable edge rendering component page and returning it to the client; The client uses the custom edge rendering element to mount the edge rendering component page.

2. The method according to claim 1, characterized in that, Before the client accesses the page, it also includes: The source code of the client-side rendering component and the edge rendering component is determined, wherein the edge rendering component is wrapped with an edge rendering wrapper; The edge rendering conversion plugin replaces the edge rendering component wrapped by the edge rendering wrapper with the custom edge rendering element; the replaced source code is compiled to generate the HTML page to be rendered; and the client-side rendering component is compiled into a client-side rendering script; and... The edge rendering conversion plugin extracts the source code of the edge rendering component and compiles it into an edge rendering script.

3. The method according to claim 1, characterized in that, Also 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 rendering script, and the client rendering script is used by the client to perform client 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.

4. The method according to claim 3, characterized in that, Also includes: When the client accesses the page, it requests the HTML page to be rendered from the Content Delivery Network (CDN); The HTML page to be rendered can be retrieved from the cached content delivery network (CDN), or the HTML file to be rendered can be retrieved from the web server via the content delivery network (CDN).

5. The method according to claim 1, characterized in that, Also includes: The client initiates the edge rendering request, which is based on the positioning identifier of the edge rendering component carried by the custom edge rendering element; In response to an edge rendering request, the edge service returns the cached edge rendering page component to the client if the cached edge rendering component page is found based on the location identifier.

6. The method according to claim 3, characterized in that, Also includes: The client initiates the edge rendering request, which is based on the positioning identifier of the edge rendering component carried by the custom edge rendering element; In response to an edge rendering request, the edge service 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.

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

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

9. The method according to claim 1, characterized in that, The custom edge rendering element is implemented based on the custom element API of the WebComponents standard and is used to replace the edge rendering component.

10. A page rendering system, characterized in that, Configured to perform the method as described in any one of claims 1-9, comprising: The compilation module is used during the development phase to wrap the source code of the edge rendering component with an edge rendering wrapper; the edge rendering transformation plugin compiles the source code containing the edge rendering wrapper to generate an HTML page to be rendered containing custom edge rendering elements that can be run on the client, as well as an edge rendering script that can run on the edge service. The client is used during runtime to obtain the HTML page to be rendered and perform client-side rendering when a page is accessed. The HTML page to be rendered carries a custom edge rendering element. When the custom edge rendering element exists in the HTML page to be rendered, an edge rendering request is initiated using the custom edge rendering element. An edge service is used to perform edge rendering in response to the edge rendering request, generate a cacheable edge rendering component page, and return it to the client; The client is also used to mount the edge rendering component page using the custom edge rendering element in the HTML page.

11. A page rendering apparatus, characterized in that, 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, 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-9.

12. 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-9.

Images