Front-end page rendering method, cloud service page rendering method and device

Abstract

This specification provides a front-end page rendering method, a cloud service page rendering method, and an apparatus. The front-end page rendering method is applied to a browser client and includes: receiving a front-end element document and a resource configuration document of a target front-end page from a server, wherein the resource configuration document includes resource identifiers of multiple front-end resources used for rendering the target front-end page; loading the resource content of the multiple front-end resources in parallel from the server based on the resource identifiers; parsing and executing the front-end element document according to the order of the multiple front-end resources and their resource content to render the target front-end page, wherein the order of the multiple front-end resources is determined based on the dependencies between them. This effectively solves the problem of long loading chains caused by dependencies between resources, shortens the overall loading time, improves the front-end page rendering speed, and enhances the user experience.

Claims

1. A front-end page rendering method, applied to a browser client, comprising: Receive a front-end element document and a resource configuration document of a target front-end page from a server, wherein the resource configuration document includes resource identifiers for a plurality of front-end resources used to render the target front-end page; Based on the resource identifiers of the multiple front-end resources, the resource content of the multiple front-end resources is loaded from the server in parallel. The front-end element document is parsed and executed based on the resource content of the multiple front-end resources in the order of the multiple front-end resources, and the target front-end page is rendered. The order of the multiple front-end resources is determined based on the dependency relationship between the multiple front-end resources.

2. The method according to claim 1, after loading the resource content of the plurality of front-end resources from the server based on the resource identifiers of the plurality of front-end resources, further comprising: The resource content of the multiple front-end resources is recorded in the local cache on the browser client.

3. The method according to claim 2, further comprising, before loading the resource content of the plurality of front-end resources from the server based on the resource identifiers of the plurality of front-end resources: Based on the resource identifiers of the plurality of front-end resources, query whether the local cache records the resource content of the first front-end resource, wherein the first front-end resource is at least one of the plurality of front-end resources; The method of loading the resource content of the multiple front-end resources in parallel from the server based on the resource identifiers of the multiple front-end resources includes: If not, then the resource content of the first front-end resource is loaded from the server based on the resource identifier of the first front-end resource.

4. The method according to claim 3, after querying whether the local cache records the resource content of the first front-end resource based on the resource identifiers of the plurality of front-end resources, further comprising: If so, retrieve the resource content of the first front-end resource from the local cache; The front-end element document is parsed and executed based on the resource content of the multiple front-end resources in the order of the multiple front-end resources, and the target front-end page is rendered. The order of the multiple front-end resources is determined based on the dependency relationship between the multiple front-end resources.

5. The method according to claim 2, after recording the resource content of the plurality of front-end resources to the local cache on the browser client, further comprising: When the target indicator reaches the preset indicator threshold, the resource content recorded in the local cache is cleared. The target indicator includes at least one of the following: number of retrievals, data volume, and current time. The preset indicator threshold includes at least one of the following: preset number of retrievals threshold, preset data volume threshold, and preset time period.

6. The method according to any one of claims 1-5, wherein loading the resource content of the plurality of front-end resources in parallel from the server based on the resource identifiers of the plurality of front-end resources comprises: Based on the resource identifiers of the multiple front-end resources, a resource content request for the multiple front-end resources is generated and sent to the server; Receive resource content from the plurality of front-end resources from the server.

7. A cloud service page rendering method, applied to a browser client, comprising: Receive a front-end element document and a resource configuration document of a cloud service page from a server, wherein the resource configuration document includes resource identifiers for multiple front-end resources used to render the cloud service page; Based on the resource identifiers of the multiple front-end resources, the resource content of the multiple front-end resources is loaded from the server in parallel. The cloud service page is rendered by parsing and executing the front-end element document based on the resource content of the multiple front-end resources in the order of the multiple front-end resources, wherein the order of the multiple front-end resources is determined based on the dependency relationship between the multiple front-end resources.

8. A front-end page rendering device, applied to a browser client, comprising: The first receiving module is configured to receive a front-end element document and a resource configuration document of a target front-end page from a server, wherein the resource configuration document includes resource identifiers for a plurality of front-end resources used to render the target front-end page; The first loading module is configured to load the resource content of the multiple front-end resources from the server based on the resource identifiers of the multiple front-end resources; The first rendering module is configured to parse and execute the front-end element document based on the resource content of the multiple front-end resources in the order of the multiple front-end resources, and render the target front-end page, wherein the order of the multiple front-end resources is determined based on the dependency relationship between the multiple front-end resources.

9. A cloud service page rendering device, applied to a browser client, comprising: The second receiving module is configured to receive a front-end element document and a resource configuration document of a cloud service page from a server, wherein the resource configuration document includes resource identifiers for multiple front-end resources used to render the cloud service page. The second loading module is configured to load the resource content of the multiple front-end resources from the server in parallel based on the resource identifiers of the multiple front-end resources; The second rendering module is configured to parse and execute the front-end element document based on the resource content of the multiple front-end resources in the order of the multiple front-end resources, and render the cloud service page, wherein the order of the multiple front-end resources is determined based on the dependency relationship between the multiple front-end resources.

10. A computing device, comprising: Memory and processor; The memory is used to store computer programs / instructions, and the processor is used to execute the computer programs / instructions, which, when executed by the processor, implement the steps of the method according to any one of claims 1 to 7.

11. A computer-readable storage medium storing a computer program / instructions that, when executed by a processor, implement the steps of the method according to any one of claims 1 to 7.

12. A computer program product comprising a computer program / instructions that, when executed by a processor, implement the steps of the method according to any one of claims 1 to 7.

Images