Page rendering method and device, electronic equipment and readable storage medium

Abstract

This invention provides a page rendering method, apparatus, electronic device, and readable storage medium, relating to the field of page rendering technology. The method includes: acquiring offline static resource packages and offline data packages corresponding to a target page; parsing the offline static resource packages and offline data packages in parallel to obtain the static resources and preloaded data corresponding to the target page; concatenating the static resources and preloaded data to obtain page data; and rendering the target page based on the page data. By preloading the page data, the page rendering speed is optimized, and the method is independent of business logic.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of page rendering, and in particular to a page rendering method and device, electronic equipment and a readable storage medium. BACKGROUND

[0002] In the current page rendering application, in order to speed up the rendering speed, the static resources of the page will be cached offline. However, the present inventors have found that the page data request loading process based on this will also occupy at least 40% of the time in the page rendering application.

[0003] Currently, in order to save page data loading time, it is often necessary to develop each page individually to reduce the data loading time of the page. The development and maintenance cost of this solution is very high and cannot be reused. SUMMARY

[0004] Therefore, the purpose of the present application is to provide a page rendering method and device, electronic equipment and a readable storage medium, which preloads page data to optimize the page rendering speed and is independent of the business.

[0005] In a first aspect, the embodiments provide a page rendering method, which comprises:

[0006] obtaining a static resource offline package and a data offline package corresponding to a target page;

[0007] parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively;

[0008] splicing the static resources and the preloaded data to obtain page data, and rendering the target page based on the page data.

[0009] In an optional implementation, the step of parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively, comprises:

[0010] while analyzing the static resources according to the static resource offline package, calling a data interface from the data offline package, and obtaining preloaded data corresponding to the target page based on the data interface.

[0011] In an optional implementation, the step of parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively, further comprises:

[0012] In response to an operation instruction of the user for the target page, triggering execution of the step of resolving the static resource offline package and the data offline package in parallel to obtain the static resource and the preloaded data corresponding to the target page respectively.

[0013] In an optional embodiment, the step of calling a data interface from the data offline package and obtaining the preloaded data corresponding to the target page based on the data interface comprises:

[0014] According to a business loading priority level, the page data in the data offline package is classified to obtain attribute data and picture data, wherein the attribute data comprises one or more of the following: basic data, a title, activity information, a label, price information, and after-sales information corresponding to the target page, and the picture data comprises a resource locator URL corresponding to a picture.

[0015] According to the attribute data, the preloaded data corresponding to the target page is determined.

[0016] In an optional embodiment, the step of rendering the target page based on the page data comprises:

[0017] Based on the resource locator URL, the picture is obtained, and the target page is rendered according to the page data and the picture.

[0018] In an optional embodiment, the step of obtaining the static resource offline package and the data offline package corresponding to the target page comprises:

[0019] The static resource of the target page is cached offline to obtain a static resource offline package.

[0020] The data offline package is downloaded from an offline package management platform, wherein in response to an operation instruction of the user for the front-end interface, the data offline package is generated by packaging the interface configuration of the target page.

[0021] In an optional embodiment, before the step of obtaining the static resource offline package and the data offline package corresponding to the target page, the method further comprises:

[0022] In response to an operation instruction of the user for each page, the target page is determined.

[0023] Alternatively,

[0024] Based on the browsing and / or clicking heat of each page, the target page is determined.

[0025] In a second aspect, an embodiment provides a page rendering device, and the device comprises:

[0026] An acquisition module acquires a static resource offline package and a data offline package corresponding to a target page;

[0027] A parallel module parallelly analyzes the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively.

[0028] A rendering module splices the static resources and the preloaded data to obtain page data, and renders the target page based on the page data.

[0029] In a third aspect, an embodiment provides an electronic device, including a memory and a processor, the memory storing a computer program capable of running on the processor, and the processor implements the steps of the method in any one of the preceding embodiments when executing the computer program.

[0030] In a fourth aspect, an embodiment provides a machine readable storage medium storing machine executable instructions, the machine executable instructions, when invoked and executed by a processor, cause the processor to implement the steps of the method in any one of the preceding embodiments.

[0031] The page rendering method and device, the electronic device and the machine readable storage medium provided by the embodiments of the present application can acquire the data offline package of the target page, perform parallel processing on the original page data loading process and the static resource analysis process, omit the data loading time in the traditional rendering process, and thus improve the rendering speed of the target page.

[0032] Other features and advantages of the present disclosure will be described in the following description, or can be learned from the description, or can be determined without any doubt, or can be known by implementing the above-mentioned technologies of the present disclosure.

[0033] In order to make the above-mentioned purposes, features and advantages of the present disclosure more obvious and easy to understand, the following preferred embodiments are described in detail below, and the accompanying drawings are described as follows. BRIEF DESCRIPTION OF DRAWINGS

[0034] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the following will briefly introduce the drawings needed to be used in the specific embodiments or the prior art description. Obviously, the drawings in the following description are some embodiments of the present application, and those skilled in the art can obtain other drawings according to these drawings without any creative labor.

[0035] Figure 1 A page rendering method flowchart provided by the embodiments of the present application;

[0036] Figure 2Another page rendering method flow diagram provided by the embodiment of the present application is provided.

[0037] Figure 3 A functional module diagram of a page rendering device provided by the embodiment of the present application is provided.

[0038] Figure 4 A hardware architecture diagram of an electronic device provided by the embodiment of the present application is provided. DETAILED DESCRIPTION

[0039] To make the objectives, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions of the present application will be described below in detail with reference to the drawings. Obviously, the described embodiments are some but not all of the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative work fall within the protection scope of the present application.

[0040] Nowadays, in order to save the page data loading time, the corresponding data of the page can be preloaded in the client APP, but this way requires separate development and maintenance for each page, which is relatively high in cost.

[0041] Therefore, the page rendering method, device, electronic device and readable storage medium provided by the embodiment of the present application solve the problem of high cost of separate development of each page to save the page data loading process.

[0042] To facilitate the understanding of the present embodiment, first, a page rendering method disclosed by the embodiment of the present application is described in detail. The method can be applied to a client, such as an application APP loaded in a smart device.

[0043] Figure 1 A page rendering method flow diagram provided by the embodiment of the present application is provided.

[0044] As shown in Figure 1 The method comprises the following steps:

[0045] In step S102, the corresponding static resource offline package and data offline package of the target page are obtained.

[0046] The target page can be understood as a page to be rendered. The static resource offline package includes the static resource corresponding to the target page obtained by pre-offline caching, and the data offline package includes the page data corresponding to the target page obtained by preloading.

[0047] In step S104, the static resource offline package and the data offline package are parsed in parallel to obtain the static resource and the preloaded data corresponding to the target page, respectively.

[0048] Wherein, the parallel parsing can be understood as that the static resource offline package and the data offline package are parsed independently at the same time, and the static resource and the preloaded data are obtained respectively.

[0049] In step S106, the static resource and the preloaded data are spliced to obtain page data, and the target page is rendered based on the page data.

[0050] Wherein, the static resource and the preloaded data obtained are spliced to generate page data for rendering the target page. It should be noted that the splicing method can also be understood as assembly, which can be known by those skilled in the art.

[0051] In the preferred embodiment in actual application, by obtaining the data offline package of the target page, the original page data loading process and the static resource parsing process are processed in parallel, the data loading time in the traditional rendering process is omitted, and thus the rendering speed of the target page is improved.

[0052] In some embodiments, the determination of the target page can include various cases to know which page data is preloaded, and the calculation resources are saved. Before step S102, the method further includes:

[0053] In step 1.1), the target page is determined in response to the operation instruction of the user for each page.

[0054] Exemplarily, the user can perform different preset operations on the current page of the client, such as single-point touch, long-press touch, double-point touch, and the like, and then select the page as the target page, and the preset operation is rendered for the target page. For example, the user displays the page of a vehicle A by single-point touch on the home page of the client, and then the detail page of the vehicle A is rendered.

[0055] Alternatively,

[0056] In step 1.2), the target page is determined based on the browsing heat and / or click heat of each page.

[0057] As an optional embodiment, the browsing heat and / or click heat of each page in the client can be analyzed by a prediction algorithm, and the page with higher heat is selected as the target page in advance, and the subsequent preloading operation of the target page is performed, so as to realize the accelerated rendering of the target page on the premise of saving resources.

[0058] As another optional embodiment, in order to ensure that each page can be rendered quickly, all the pages to be rendered can be taken as the target page to perform the subsequent data preloading operation.

[0059] In some embodiments, the above step S102 can be implemented by the following steps, specifically including:

[0060] Step 2.1), offline caching the static resources of the target page to obtain a static resource offline package.

[0061] The static resources can be understood as the infrastructure of the page. By pre-offline caching the static resources of the page, the page can be quickly rendered.

[0062] Step 2.2), downloading a data offline package from an offline package management platform, wherein the data offline package is packaged by the interface configuration of the target page in response to an operation instruction of the user for the front-end interface.

[0063] It should be noted that the front-end interface can include a web front-end. The user can write code instructions for the front-end interface to implement related offline configurations. After the front-end interface code is submitted, the hook triggers the CI to generate an offline package configuration (map.json) including data pre-storage, and uploads it to the offline package management platform.

[0064] In some embodiments, in order to better implement the parallel parsing step of the offline package, step S104 further includes:

[0065] Step 3.1), while parsing the static resources according to the static resource offline package, calling a data interface from the data offline package, and based on the data interface, obtaining preloaded data corresponding to the target page.

[0066] The data interface can include a resource location identifier URL, i.e., the URL is used to obtain the preloaded data corresponding to the page.

[0067] In some embodiments, step S104 further includes triggering in response to an operation instruction of the user for the target page.

[0068] For example, the static resources corresponding to the target page and the data are pre-cached in the corresponding offline package, as described in the foregoing embodiments. When the user takes a preset operation, such as single-point touch, on the target page, the parallel parsing of the offline package is triggered, and the quick rendering of the target page is realized.

[0069] In step 3.1) of the foregoing embodiments, the data interface is called from the data offline package, and the preloaded data corresponding to the target page is obtained based on the data interface. It can also be implemented by the following steps, including:

[0070] Step 4.1), classifying the page data in the data offline package according to the business loading priority level to obtain attribute data and picture data.

[0071] The attribute data includes one or more of the following: basic data corresponding to the target page, a title, activity information, a label, price information, and after-sales information. The picture data can include a uniform resource locator (URL) corresponding to the picture.

[0072] The inventor has found that, because the static resource parsing time is limited, the data parsing time in parallel with the static resource should not be too long, otherwise the page rendering time will be lengthened. Therefore, the embodiment of the present application can classify the data loaded in parallel with the static resource according to the business loading priority.

[0073] Step 4.2), determining the preloaded data corresponding to the target page according to the attribute data.

[0074] As an optional embodiment, the preloaded data is the attribute data, which is relatively fast to load and relatively important for business display. As another optional embodiment, data that is more matched with the current business and has a higher loading priority can be selected from the attribute data as the preloaded data. For example, if the user is currently on the purchase side of the client, the price is relatively high in loading priority.

[0075] In some embodiments, the rendering of the target page based on the page data in step S106 can include:

[0076] Step 5.1), obtaining the picture based on the uniform resource locator (URL), and rendering the target page based on the page data and the picture.

[0077] If all or a preset number of page corresponding data are not included in the preloaded data, in order to ensure the rendering effect of the target page, the picture can be obtained based on the URL before the page data is spliced and the page is rendered.

[0078] As shown in Figure 2 The embodiment of the present application also provides a page rendering method. The embedded browser webview starts loading and starts performing parallel operations. Operation branch one: the client APP parses the static resources in the static resource offline package, compiles the static resources through syntax analysis script Parse script, and executes and initiates data requests through evaluation script Evaluate script. Operation branch two: the client APP parses the offline data package and starts loading data until the data request loading is completed. The client APP intercepts the data request and obtains the completed data, splices the data with the static resources, and returns the embedded browser webview to complete the page rendering.

[0079] For the client APP of IOS, the page rendering method comprises: an embedded browser webview starts loading, the APP reads relevant interface configurations in an offline package configuration (map.json) according to a current page URL, splices and initiates a request to perform parallel operation according to interface URLs and relevant parameters in the configurations, the webview initiates a data request through js.sdk, and the APP returns relevant requests through js.sdk after data loading is completed.

[0080] For the client APP of Android, the page rendering method comprises: an embedded browser webview starts loading, the APP reads relevant interface configurations in an offline package configuration (map.json) according to a current page URL, splices and initiates a request to perform parallel operation according to interface URLs and relevant parameters in the configurations, the webview intercepts a request through shouldintercept request, and the APP returns relevant requests through js.sdk after data loading is completed.

[0081] As shown in Figure 3 The embodiment of the application further provides a page rendering device 200, and the device comprises:

[0082] An acquisition module 201 acquires a static resource offline package and a data offline package corresponding to a target page;

[0083] A parallel module 202 performs parallel analysis on the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively;

[0084] A rendering module 203 splices the static resources and the preloaded data to obtain page data, and renders the target page based on the page data.

[0085] In some embodiments, the parallel module 202 is further specifically configured to call a data interface from the data offline package while performing parallel analysis on the static resource offline package to obtain preloaded data corresponding to the target page based on the data interface.

[0086] In some embodiments, the parallel module 202 is further specifically configured to trigger the step of performing parallel analysis on the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page, respectively, in response to an operation instruction of a user for the target page.

[0087] In some embodiments, the parallel module 202 is further configured to classify the page data in the data offline package according to a service loading priority level, to obtain attribute data and picture data, wherein the attribute data comprises one or more of the following: basic data corresponding to the target page, a title, activity information, a label, price information, and after-sales information, and the picture data comprises a resource locator URL corresponding to a picture; and the preloading data corresponding to the target page is determined according to the attribute data.

[0088] In some embodiments, the rendering module 203 is further configured to obtain the picture based on the resource locator URL, and render the target page according to the page data and the picture.

[0089] In some embodiments, the obtaining module 201 is further configured to cache static resources of a target page offline to obtain a static resource offline package, and download a data offline package from an offline package management platform, wherein the data offline package is generated by packaging interface configurations of the target page in response to an operation instruction of a user on the front-end interface.

[0090] In some embodiments, the obtaining module 201 is further configured to determine a target page in response to an operation instruction of a user on each page before obtaining the static resource offline package and the data offline package corresponding to the target page, or determine the target page based on the browsing heat and / or click heat of each page.

[0091] Figure 4 A hardware architecture schematic diagram of the electronic device 300 is provided for the embodiments of the present application. As shown in the figure, the electronic device 300 comprises a machine readable storage medium 301 and a processor 302, and can further comprise a non-volatile storage medium 303, a communication interface 304, and a bus 305; wherein the machine readable storage medium 301, the processor 302, the non-volatile storage medium 303, and the communication interface 304 complete communication with each other through the bus 305. The processor 302 can execute the page rendering method described in the above embodiments by reading and executing machine executable instructions of page rendering in the machine readable storage medium 301. Figure 4

[0092] The machine readable storage medium mentioned herein can be any electronic, magnetic, optical, or other physical storage device, and can contain or store information such as executable instructions, data, etc. For example, the machine readable storage medium can be a RAM (Random Access Memory), a volatile memory, a non-volatile memory, a flash memory, a storage drive (such as a hard disk drive), any type of storage disk (such as an optical disk, a DVD, etc.), or similar storage medium, or a combination thereof. ​

[0093] The non-volatile media can be a non-volatile memory, a flash memory, a storage drive (such as a hard disk drive), any type of storage disk (such as an optical disk, a DVD, etc.), or similar non-volatile storage media, or a combination thereof.

[0094] It can be understood that the specific operation methods of the function modules in the embodiments can refer to the detailed description of the corresponding steps in the above method embodiments, which will not be repeated here.

[0095] The computer readable storage medium provided by the embodiments of the present application stores a computer program, and the computer program code can implement the page rendering method described in any of the above embodiments when executed. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0096] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described system and device can refer to the corresponding process in the foregoing method embodiments, which will not be repeated here.

[0097] In addition, in the description of the embodiments of the present application, unless otherwise explicitly specified and limited, the terms "mounting", "connecting", "connecting" should be understood in a broad sense, for example, it can be fixedly connected, or it can be detachably connected, or integrally connected; it can be mechanically connected, or it can be electrically connected; it can be directly connected, or it can be indirectly connected through an intermediate medium, or it can be the communication inside two elements. For those skilled in the art, the specific meaning of the above terms in the present application can be understood according to the specific circumstances.

[0098] In the description of the present application, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a particular orientation, be constructed and operated in a particular orientation, therefore it cannot be understood as a limitation of the present application. In addition, the terms "first", "second", "third" are only for the purpose of description, and cannot be understood as indicating or implying relative importance.

[0099] Finally, it should be noted that the above-described embodiments are merely specific embodiments of the present application, which are used to illustrate the technical solutions of the present application, but not to limit the present application, the protection scope of the present application is not limited thereto, although the present application is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art within the technical range disclosed by the present application, the technical solutions recorded in the foregoing embodiments can still be modified or easily thought of changes, or equivalent replacement of part of the technical features, and these modifications, changes or replacements do not make the corresponding technical solutions deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be covered in the protection scope of the present application.

Claims

1. A method of rendering a page, the method comprising: The method comprises: acquiring a static resource offline package and a data offline package corresponding to a target page; parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page respectively; splicing the static resources and the preloaded data to obtain page data, and rendering the target page based on the page data; The step of acquiring a static resource offline package and a data offline package corresponding to a target page comprises: offline caching static resources of the target page to obtain a static resource offline package; wherein the static resources are the basic framework of the target page; downloading a data offline package from an offline package management platform, wherein the data offline package is generated by packaging the interface configuration of the target page in response to an operation instruction of a user for a front-end interface; in response to an operation instruction of a user for the target page, triggering the step of parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page respectively; The step of parallelly analyzing the static resource offline package and the data offline package to obtain static resources and preloaded data corresponding to the target page respectively comprises: while analyzing the static resources according to the static resource offline package, calling a data interface from the data offline package, and obtaining preloaded data corresponding to the target page based on the data interface; Operation branch one and operation branch two perform parallel operations; wherein the operation branch one: the client APP analyzes the static resources in the static resource offline package, compiles the static resources through syntax analysis script Parse script, and executes and initiates a data request through evaluation script Evaluate script; the operation branch two: the client APP analyzes the offline data package and starts loading data until the data request is loaded; the client APP intercepts the data request and obtains the loaded data at the same time, splices the data and the static resources, and returns the embedded browser webview to complete page rendering.

2. The method of claim 1, wherein, The step of calling a data interface from the data offline package and obtaining preloaded data corresponding to the target page based on the data interface comprises: classifying page data in the data offline package according to a business loading priority level to obtain attribute data and picture data, wherein the attribute data comprises one or more of the following: basic data, a title, activity information, a label, price information, and after-sales information corresponding to the target page, and the picture data comprises a resource locator URL corresponding to a picture; determining the preloaded data corresponding to the target page according to the attribute data.

3. The method of claim 2, wherein, The step of rendering the target page based on the page data comprises: obtaining the picture based on the resource locator URL, and rendering the target page according to the page data and the picture.

4. The method of claim 1, wherein, Before the step of acquiring a static resource offline package and a data offline package corresponding to a target page, the method further comprises: determining the target page in response to an operation instruction of a user for each page; or, Determine the target page based on the browsing heat and / or click heat of each page.

5. A page rendering apparatus characterized by comprising: The device comprises: An acquisition module acquires a static resource offline package and a data offline package corresponding to a target page. A parallel module analyzes the static resource offline package and the data offline package in parallel to obtain static resources and preloaded data corresponding to the target page, respectively. A rendering module splices the static resources and the preloaded data to obtain page data and renders the target page based on the page data. The acquisition module caches static resources of a target page offline to obtain a static resource offline package, wherein the static resources are the basic framework of the target page; and downloads a data offline package from an offline package management platform, wherein the data offline package is generated by packaging the interface configuration of the target page in response to an operation instruction of a user on a front-end interface. The parallel module triggers the execution of the steps of analyzing the static resource offline package and the data offline package in parallel to obtain static resources and preloaded data corresponding to the target page in response to an operation instruction of a user on the target page; the steps of analyzing the static resource offline package and the data offline package in parallel to obtain static resources and preloaded data corresponding to the target page comprise: calling a data interface from the data offline package and obtaining preloaded data corresponding to the target page based on the data interface while analyzing static resources according to the static resource offline package; and operation branch one and operation branch two perform parallel operations; wherein operation branch one: a client-side APP analyzes static resources in the static resource offline package, compiles the static resources through syntax analysis scripts (Parse script), and executes and initiates a data request through evaluation scripts (Evaluate script); and operation branch two: the client-side APP analyzes the offline data package and starts loading data until the data request is loaded; the client-side APP intercepts the data request and obtains the loaded data at the same time, splices the data and the static resources, and returns the data to an embedded browser (webview) to complete page rendering.

6. An electronic device comprising a memory, a processor, the memory having stored therein a computer program executable on the processor, characterized in that, The processor executes the computer program to implement the steps of the method of any one of claims 1 to 4.

7. A machine-readable storage medium, characterized in that, The machine-readable storage medium stores machine-executable instructions, which, when invoked and executed by the processor, cause the processor to implement the steps of the method of any one of claims 1 to 4.

Images