Page rendering method and device, equipment and storage medium

Abstract

The invention provides a page rendering method and device, equipment and a storage medium, and the method comprises the steps: obtaining page data of an application page, the page data comprises page structure information and page resource data, and the page resource data comprises rich text data and native module data; the page structure data is used for indicating position information of the rich text data and the native module data in the application page; rendering the rich text data on the first rendering layer based on the page structure information through the front-end rendering container to obtain a target rich text page module; rendering the native module data on the second rendering layer based on the page structure information through the native rendering container to obtain a target native page module; and merging and displaying the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain an application page. The page rendering performance is improved, and the page rendering maintenance cost is reduced.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of terminal technology, and in particular to a page rendering method, apparatus, device and storage medium. Background Art

[0002] Currently, when a terminal device displays an application page, it is necessary to first render business scenario data related to the content displayed on the application page, and then display the rendering result on the screen, thereby completing the display of the application page.

[0003] Among them, business scenario data generally includes: text type data, interactive type data such as touch, drag and drop. In actual needs, rendering text type data often needs to achieve rendering effects such as supporting multiple text layouts and a rich selection of font styles, and rendering interactive type data often needs to achieve rendering effects such as high interactive fluency and more interactive methods. However, the relevant rendering methods cannot be compatible with the above two rendering effects at the same time, and there is a problem of low rendering performance. Summary of the invention

[0004] The present application provides a page rendering method, apparatus, device and storage medium to improve page rendering performance and reduce page rendering maintenance costs.

[0005] In a first aspect, the present application provides a page rendering method, the method comprising: obtaining page data of an application page, the page data comprising page structure information and page resource data, wherein the page resource data comprises rich text data and native module data, and the page structure data is used to indicate the location information of the rich text data and the native module data in the application page; rendering the rich text data on a first rendering layer based on the page structure information through a front-end rendering container to obtain a target rich text page module corresponding to the rich text data; rendering the native module data on a second rendering layer based on the page structure information through a native rendering container to obtain a target native page module corresponding to the native module data; merging and displaying the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain an application page.

[0006] In a second aspect, the present application provides a page rendering device, comprising: a first acquisition module, used to: acquire page data of an application page, the page data including page structure information and page resource data, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate the location information of the rich text data and the native module data in the application page; a first rendering module, used to: render the rich text data on a first rendering layer based on the page structure information through a front-end rendering container, and obtain a target rich text page module corresponding to the rich text data; a second rendering module, used to: render the native module data on a second rendering layer based on the page structure information through a native rendering container, and obtain a target native page module corresponding to the native module data; a merge display module, used to: merge and display the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain an application page.

[0007] In a third aspect, the present application provides an electronic device, comprising: a processor and a memory, the memory being used to store a computer program, the processor being used to call and run the computer program stored in the memory, and executing the method in the first aspect or its various implementations.

[0008] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program, wherein the computer program enables a computer to execute the method in the first aspect or its various implementations.

[0009] In a fifth aspect, the present application provides a computer program product, comprising computer program instructions, which enable a computer to execute the method in the first aspect or its various implementations.

[0010] In a sixth aspect, the present application provides a computer program, which enables a computer to execute the method in the first aspect or its various implementations.

[0011] Through the technical solution of the present application, the terminal device can render rich text data such as text type data through a front-end rendering container that supports multiple text layouts and can select rich font styles and other rendering effects, and can render native module data such as interactive type data through a native rendering container that supports high interactive fluency, more interactive methods and other rendering effects. In this way, the rendering advantages of the front-end rendering container and the native rendering container can be combined and their respective disadvantages can be effectively avoided, and they are compatible with multiple rendering effects, thereby improving their browsing experience and scalability. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0013] Figure 1 A schematic diagram of an application scenario provided for an embodiment of the present application;

[0014] Figure 2 A flowchart of a page rendering method provided in an embodiment of the present application;

[0015] Figure 3 A schematic diagram of a page rendering method provided in an embodiment of the present application;

[0016] Figure 4 A schematic diagram of another page rendering method provided in an embodiment of the present application;

[0017] Figure 5 A schematic diagram of another page rendering method provided in an embodiment of the present application;

[0018] Figure 6 A schematic diagram of another page rendering method provided in an embodiment of the present application;

[0019] Figure 7 A schematic diagram of another page rendering method provided in an embodiment of the present application;

[0020] Figure 8 A schematic diagram of a page rendering device 800 provided in an embodiment of the present application;

[0021] Fig. 9 A schematic block diagram of an electronic device 900 provided in an embodiment of the present application. DETAILED DESCRIPTION

[0022] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0023] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0024] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0025] As mentioned above, the relevant rendering method cannot be compatible with multiple rendering effects at the same time, and there is a problem of low rendering performance.

[0026] In order to solve the above technical problems, the inventive concept of the present application is: according to the page structure information of the application page, the rich text data and the native module data are rendered respectively by a front-end rendering container and a native rendering container supporting different rendering effects to obtain the application page.

[0027] It should be understood that the technical solution of the present application can be applied to the following scenarios, but is not limited to:

[0028] In one embodiment, the present application can be applied to a rendering scenario of an application page, for example, it can be applied to a scenario of rendering a feed details page that is a mixed arrangement of native module data and rich text data.

[0029] Among them, the application page can be an application page of a web application, an application page of a client application, or an application page of a mini program, and this application does not impose any restrictions on this.

[0030] In one embodiment, if Figure 1 As shown, the application scenario may include a terminal device 110 and a server 120, and the terminal device 110 and the server 120 may be connected via a wired network or a wireless network.

[0031] Exemplarily, the terminal device 110 can obtain page structure information and page resource data of the application page from the server 120 or locally, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate the location information of the rich text data and the native module data in the application page; thereafter, the terminal device 110 can render the above-mentioned multiple page resource data respectively through rendering containers that support different rendering effects to obtain different page modules: through the front-end rendering container, the rich text data is rendered on the first rendering layer based on the page structure information to obtain the target rich text page module corresponding to the rich text data; through the native rendering container, the native module data is rendered on the second rendering layer based on the page structure information to obtain the target native page module corresponding to the native module data; finally, the terminal device 110 can merge and display the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain the application page.

[0032] The server 120 may be a single server, a server cluster consisting of multiple servers, or a cloud platform control center, but is not limited thereto. The terminal device 110 may be a mobile phone, a tablet computer, a laptop computer, or a desktop computer, but is not limited thereto.

[0033] It should be noted that Figure 1 The terminal devices and servers in the example are merely exemplary. Specifically, other numbers or types of terminal devices or servers may also be included.

[0034] In addition, the technical solution of the present application can also be executed only through a server or a terminal device. To avoid repetition, this application will not elaborate on this.

[0035] After introducing the application scenarios of the embodiments of the present application, the technical solution of the present application will be described in detail below:

[0036] Figure 2 This is a flow chart of a page rendering method provided in an embodiment of the present application. The method can be executed by the terminal device 110 in the above application scenario, but is not limited thereto. Figure 2 As shown, the method may include the following steps:

[0037] S210: Acquire page data of the application page, the page data including page structure information and page resource data, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate location information of the rich text data and the native module data in the application page;

[0038] S220: Rendering the rich text data on the first rendering layer based on the page structure information through the front-end rendering container to obtain a target rich text page module corresponding to the rich text data;

[0039] S230: Rendering the native module data on the second rendering layer based on the page structure information through the native rendering container to obtain a target native page module corresponding to the native module data;

[0040] S240: The target rich text page module of the first rendering layer and the target native page module of the second rendering layer are combined and displayed to obtain an application page.

[0041] First, the nouns involved in this application are introduced in the following embodiments:

[0042] Page resource data is data that provides the visual and interactive effects required by the application page. Among them, rich text data refers to formatted text data, such as text data with complex formats such as underline, color, size, font, picture, link or table. Native module data refers to data required or generated by components or modules that can provide user interface (UI) elements and access hardware functions such as cameras.

[0043] Page structure information refers to data that defines the layout of an application page and the relationship between elements, and can be used to indicate the location information of rich text data and native module data in the application page in the page resource data. Specifically, page structure data may include the location order information of rich text data and native module data on the application page. The page structure data may be data in text form or in image form, and this application does not limit this.

[0044] For example, the page structure information can be: (the order from top to bottom in the application page is: rich text data 1, native module data 1, rich text data 2, native module data 2, native module data 3, native module data 4; their coordinate ranges in the application page are: coordinate range 1, coordinate range 2, coordinate range 3, coordinate range 4, coordinate range 5, coordinate range 6).

[0045] Among them, the position order information of the rich text data in the page structure information is: (the rich text data in the application page includes, in order from top to bottom: rich text data 1, rich text data 2; its coordinate ranges in the application page are: coordinate range 1, coordinate range 3).

[0046] The position sequence information of the native module data in the page structure information is: (the native module data in the application page are in the order from top to bottom: native module data 1, native module data 2, native module data 3, native module data 4; their coordinate ranges in the application page are: coordinate range 2, coordinate range 4, coordinate range 5, coordinate range 6).

[0047] A rendering container refers to a component or environment used to display page resource data. By rendering the page resource data, a page module used to directly display the application page can be obtained, such as a native page module or a rich text page module.

[0048] Among them, the front-end rendering container is a rendering container that renders data based on the front-end rendering method, and can be a rendering environment built based on Web technologies such as HTML, CSS, and JavaScript. For example, it can be an H5 container. The front-end rendering method can support better text rendering effects, for example, it can support the rendering of text alignment, and also supports cross-segment copying, and has good scalability.

[0049] The native rendering container is a rendering container that renders data based on the native rendering method. It can build a rendering environment based on the native development languages ​​of specific platforms such as iOS and Android, such as Objective-C and Java. The native rendering method can support better interactive function rendering effects, and can provide better page sliding smoothness and drag and double-click operations.

[0050] Page modules include rich text page modules and native page modules. The page modules are obtained by rendering page resource data through a rendering container: the rich text page module is obtained by rendering rich text data through a front-end rendering container, and the native page module is obtained by rendering native module data through a native rendering container.

[0051] When the rendering container renders page resource data, the display view and the display data that the display view needs to be bound to can be obtained first; then, the display data can be bound to the display view, and the display view bound to the display data can be rendered to obtain a page module; the page module is displayed on a display device to obtain an application page.

[0052] Among them, the display view is responsible for rendering and displaying the page module, including multiple display elements of the page module; the display data includes the information that the display view needs to display.

[0053] In one embodiment, the terminal device may obtain the page data from a server corresponding to the terminal device or locally on the terminal device.

[0054] In one embodiment, when a terminal device renders page resource data through a rendering container, it can first use the front-end rendering container to render the rich text data on the first rendering layer according to the position sequence information of the rich text data in the application page, to obtain a target rich text page module; then, it can determine the area on the second rendering layer where the native module data needs to be rendered according to the remaining area after rendering the rich text data on the first rendering layer and the position sequence information of the native module data in the application page, and render the native module data in the area through the native rendering container to obtain the target native page module.

[0055] Alternatively, the terminal device can first use the native rendering container to render the native module data on the second rendering layer according to the position sequence information of the native module data in the application page to obtain the target native page module; then, based on the remaining area after rendering the native module data on the second rendering layer and the position sequence information of the rich text data in the application page, it can determine the area on the first rendering layer where the rich text data needs to be rendered, and render the rich text data in the area through the front-end rendering container to obtain the target rich text page module.

[0056] Alternatively, the terminal device may render the rich text data and the native module data respectively through the front-end rendering container and the native rendering container according to the position order information of the rich text data and the native module data on the application page, so as to obtain the target rich text page module and the target native page module.

[0057] It should be noted that this application does not restrict the time sequence of rendering through the front-end rendering container and the native rendering container, and determining the rendering area of ​​the rendering layer.

[0058] In the following embodiments, this application will take the example of rendering rich text data by the front-end rendering container first and then rendering native module data by the native rendering container as an example to introduce the technical solution of this application. The embodiments corresponding to other rendering orders are similar to this. To avoid repetition, this application will not elaborate on this.

[0059] In one embodiment, the terminal device may first render the rich text data on the first rendering layer through the front-end rendering container based on the position sequence information of the rich text data on the application page to obtain the target rich text page module; then, the terminal device may determine the second rendering area corresponding to the native module data on the first rendering layer according to the first rendering area of ​​the target rich text page module on the first rendering layer and the position sequence information of the native module data; then, the terminal device may locate the second rendering area on the second rendering layer according to the second rendering area corresponding to the native module data on the first rendering layer; finally, the terminal device may render the native module data in the second rendering area on the second rendering layer through the native rendering container to obtain the target native page module.

[0060] The first rendering layer and the second rendering layer are of the same size, and both the first rendering layer and the second rendering layer include two rendering areas: a first rendering area and a second rendering area.

[0061] Specifically, the first rendering area on the first rendering layer corresponds to the position sequence information of the rich text data on the application page, and is the rendering area where the target rich text page module is located on the first rendering layer; the second rendering area on the second rendering layer corresponds to the position sequence information of the native module data on the application page, and is the rendering area where the target native page module is located on the second rendering layer.

[0062] Correspondingly, the second rendering area on the first rendering layer is the rendering area corresponding to the native data module on the first rendering layer, and its size and position on the first rendering layer are consistent with the size of the second rendering area on the second rendering layer and the position on the second rendering layer; the first rendering area on the second rendering layer is the rendering area corresponding to the rich text data on the second rendering layer, and its size and position on the second rendering layer are consistent with the size of the first rendering area on the first rendering layer and the position on the first rendering layer.

[0063] Specifically, after the terminal device renders the rich text data according to the position sequence information of the rich text data on the application page to obtain the target rich text page module, the terminal device can determine the area where the target rich text page module is located on the first rendering layer as the first rendering area of ​​the first rendering layer; then, the terminal device can determine other rendering areas on the first rendering layer except the first rendering area, and determine the rendering area corresponding to the native module data from the above-mentioned other rendering areas according to the position sequence information of the native module data, to obtain the second rendering area on the first rendering layer; then, the terminal device can determine the rendering area on the second rendering layer that is consistent with the size and position of the second rendering area on the first rendering layer as the second rendering area on the second rendering layer.

[0064] Furthermore, the terminal device can number the native module data according to the target numbering rule; and number the second rendering area on the second rendering layer according to the target numbering rule, that is, the rendering area on the second rendering layer that is consistent with the rendering area corresponding to the native module data on the first rendering layer; thereafter, the terminal device can render the native module data into the second rendering area on the second rendering layer that is consistent with its number according to the number of the native module data, to obtain the target native page module.

[0065] Among them, the target numbering rule can be: determine the first number of the native module data according to the module type; number the native module data with the same first number in sequence according to the order from top to bottom of the native module data indicated by the position sequence information of the native module data to determine the second number of the native module data; combine the first number and the second number to obtain the number of the native module data.

[0066] Accordingly, the above-mentioned numbering of the second rendering area on the second rendering layer according to the target numbering rule may include: determining the number of the native module data corresponding to the position sequence information corresponding to the second rendering area on the second rendering layer determined according to the target numbering rule as the number of the second rendering area on the second rendering layer. Alternatively, according to the position sequence information of the native module data, determining the correspondence between the second rendering area on the second rendering layer and the native module data; according to the correspondence, according to the numbering rule for the native module data in the target numbering rule, similarly numbering the second rendering area on the second rendering layer.

[0067] For example, Figure 3 As shown, assuming that in the order from top to bottom in the application page, the native module data includes: native module data 1, native module data 2, native module data 3, native module data 4, among which the module type of native module data 1 and native module data 4 is: typeA; the module type of native module data 2 and native module data 3 is: typeB; then the terminal device can determine that the first numbers of native module data 1, native module data 2, native module data 3, and native module data 4 are: typeA, typeB, typeB, typeA; determine that the second numbers of native module data 1, native module data 2, native module data 3, and native module data 4 are: 0, 0, 1, 1; then the terminal device can combine the above-mentioned first number and second number correspondingly, and determine that the numbers of native module data 1, native module data 2, native module data 3, and native module data 4 are: typeA-0, typeB-0, typeB-1, typeA-1.

[0068] Similarly, assuming that the second rendering area of ​​the second rendering layer (corresponding to the second rendering area of ​​the first rendering layer) includes 4 native module data rendering bits from top to bottom, and the 4 native module data rendering bits are used to render native module data 1, native module data 2, native module data 3, and native module data 4, respectively, the terminal device can determine that the 4 native module data rendering bits are numbered as: typeA-0, typeB-0, typeB-1, and typeA-1, respectively.

[0069] In this way, the rendering areas can be made to correspond to each other according to the numbering of the same rule, so that the application page that is subsequently merged and displayed can visually produce the effect of consistency in the positions of multiple page modules.

[0070] In one embodiment, before the terminal device merges and displays the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain the application page, it can also obtain the module height of the target native page module; then, through the front-end rendering container, according to the module height of the target native page module, the second rendering area on the first rendering layer is adjusted, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the correspondence between the rendering areas of the first rendering layer and the second rendering layer.

[0071] It can be understood that since the second rendering area of ​​the second rendering layer corresponds to the second rendering area of ​​the first rendering layer, and the second rendering area of ​​the second rendering layer is used to render the native module data to obtain the target native page module, therefore, before merging and displaying the target rich text page module and the target native page module, the terminal device can adjust the second rendering area on the first rendering layer according to the module height of the target native page module, so that the respective rendering areas on the first rendering layer are aligned with the respective rendering areas on the second rendering layer, thereby ensuring the normal display of each page module in the application page.

[0072] Specifically, in combination with the above-mentioned embodiment of number correspondence, the terminal device may number the second rendering area on the first rendering layer, that is, the rendering area corresponding to the native module data on the first rendering layer, according to the target numbering rule, so that the second rendering area of ​​the second rendering layer and the second rendering area of ​​the first rendering layer have corresponding and consistent numbers; then, the terminal device may construct a rendering area mapping relationship according to the number of the second rendering area of ​​the second rendering layer and the number of the second rendering area of ​​the first rendering layer, in which the second rendering area of ​​the second rendering layer with the same number corresponds to the second rendering area of ​​the first rendering layer; thereafter, the terminal device may adjust the second rendering area on the first rendering layer (for example, adjust the size and position of the rendering area) based on the module height of the native page module on the second rendering layer according to the above-mentioned rendering area mapping relationship, so that each rendering area on the first rendering layer is aligned with each rendering area on the second rendering layer, thereby determining the normal display of each page module in the application page.

[0073] In one embodiment, since the target native page module is only displayed in the first rendering area on the first rendering layer and the target rich text page module is only displayed in the second rendering area on the second rendering layer, the terminal device can also make transparent the other rendering areas in the first rendering layer except the first rendering area and the other rendering areas in the second rendering layer except the second rendering area before merging and displaying the target rich text page module of the first rendering layer and the target native page module of the second rendering layer, so that the displayed application page visually is only the target native page module and the target rich text page module in a complete arrangement and combination.

[0074] Specifically, the terminal device can achieve transparency processing by setting placeholders, transparent elements, or creating blank areas in other rendering areas except the first rendering area in the first rendering layer and other rendering areas except the second rendering area in the second rendering layer.

[0075] Further, such as Figure 4 As shown, when the terminal device merges and displays the target rich text page module of the first rendering layer and the target native page module of the second rendering layer, the first rendering layer can be used as the lower layer and the second rendering layer as the upper layer (that is, the lower layer is rendered by the front-end rendering container and the upper layer is rendered by the native rendering container); then, the upper layer and the lower layer are stacked and displayed to achieve the integration of the contents corresponding to the front-end rendering container and the native rendering container, that is, the target rich text page module of the first rendering layer and the target native page module of the second rendering layer are merged and displayed.

[0076] In this way, the terminal device can display application pages with richer content and better rendering effects: compared with application pages rendered only by the H5 rendering container, this application can display more complex and better-performing interactive controls; compared with application pages rendered only by the native rendering container, this application can display plain text content of various styles, and supports cross-segment text copying and dynamic addition of complex content controls (i.e., controls corresponding to rich text data), thereby realizing an easily expandable and high-performance application page display framework.

[0077] The following is a schematic diagram to introduce the above content:

[0078] like Figure 5 As shown, the business scenario module of the terminal device can request to obtain page data; after obtaining the page data, the page resource data in the page data can be filled into the front-end rendering container and the native rendering container through the rendering framework; thereafter, the front-end rendering container can extract the rich text data in the page resource data, and render the rich text data according to the page structure information in the page data, while reserving the native rendering position, that is, the second rendering area of ​​the first rendering layer; after the front-end rendering container is rendered, the native module data can be rendered through the native rendering container; the native rendering container renders the native module data in the native rendering position, that is, the second rendering area of ​​the second rendering layer, and after obtaining the target native page module, the module height of the target native page module can be sent to the front-end rendering container; the front-end rendering container can adjust the module height or size of the target native page module and the second rendering area on the first rendering layer according to the module height of the target native page module, so that the second rendering area on the first rendering layer and the other rendering areas in the first rendering layer except the second rendering area are aligned based on the corresponding rendering areas of the first rendering layer and the second rendering layer.

[0079] The interior of the rendering framework can accommodate the front-end rendering container and the native rendering container, and the front-end rendering container and the native rendering container are laid out in upper and lower layers.

[0080] It is understandable that after the application page is displayed, when the user browses the application page, there may be user interaction, which may cause the page module to change: if the user slides the list, that is, the rich text page module changes, the content in the front-end rendering container will become longer; or, the size of the native page module in the native rendering container changes. Therefore, after the application page is displayed, the terminal device needs to adjust each rendering area on each rendering layer according to the change of the content in the rendering container, ensure that the positions of each rendering area on the first rendering layer correspond to those of each rendering area on the second rendering layer, and ensure that the content in the front-end rendering container is highly consistent with the content in the native rendering container, and there will be no misalignment.

[0081] For example, Figure 6 As shown in (a), the terminal device can first add a change listener in the front-end rendering container and the native rendering container, and specifically can add the change listener through the rendering framework; then, the change listener can be used to listen for change operations such as sliding events in the front-end rendering container, or change operations in the native rendering container; then, the rendering framework can obtain the above-mentioned change operations such as sliding events, and determine the change information in response to the change operation; then, the native rendering container or the front-end rendering container can be notified to make corresponding adjustments according to the change information.

[0082] The change listener can be understood as a tool for obtaining the change operation of the page data corresponding to the front-end rendering container or the page data corresponding to the native rendering container, which can be an application programming interface (Application Programming Interface, API). Specifically, the change operation of the page data corresponding to the rendering container and the page data change information corresponding to the change operation can be obtained.

[0083] Specifically, the terminal device can monitor the change operation of the page data corresponding to the front-end rendering container or the page data corresponding to the native rendering container in the application page through the change listener; then, the terminal device can respond to the change listener listening to the target change operation and obtain the page data change information corresponding to the target change operation; then, the terminal device can determine whether the page data change information is the change information corresponding to the target rich text page module or the change information corresponding to the target native page module, and perform corresponding processing according to the determination result:

[0084] If the page data change information is change information corresponding to the target rich text page module, the terminal device can update the second rendering area on the first rendering layer according to the change information corresponding to the target rich text page module, and send the updated second rendering area on the first rendering layer to the native rendering container. Through the native rendering container, adjust the second rendering area on the second rendering layer according to the updated second rendering area on the first rendering layer, so that the second rendering area on the adjusted second rendering layer is aligned with the second rendering area on the updated first rendering layer.

[0085] If the page data change information is change information corresponding to the target native page module, the terminal device can update the module height of the target native page module according to the change information corresponding to the target native page module, and send the updated module height of the target native page module to the front-end rendering container. The front-end rendering container adjusts the second rendering area on the first rendering layer according to the updated module height of the target native page module, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the correspondence between the rendering areas of the first rendering layer and the second rendering layer.

[0086] The target change operation may be a change operation corresponding to a change in the sliding position or height of the page data in the front-end rendering container, or may be a change operation corresponding to a layout change of the page data in the native container.

[0087] The page data change information may be specific values ​​of the page module's position, height or size whose layout needs to be changed. For example, it may be specific values ​​of the module height, module size or position of the page module that needs to be adjusted after the target change operation, but is not limited to this.

[0088] In addition, if corresponding adjustments are made directly upon detecting a change operation, it will easily lead to multiple adjustments. Therefore, the terminal device may pre-store the size and position information of each page module before the change operation is performed; thereafter, after detecting the change operation, the size and position information of the page module after adjustment according to the change information corresponding to the change operation may be determined, and a judgment may be made as to whether the adjusted size and position information are consistent with the above-mentioned pre-stored size and position information before the change operation. If they are inconsistent, the terminal device may adjust the page module according to the change information; if they are consistent, the terminal device may not adjust the page module according to the change information.

[0089] For example, Figure 6 As shown in (b), the terminal device can monitor the content layout changes of the native rendering container through the change listener; if the layout change of the native page module is monitored, the current size of the native page module (i.e., the size adjusted according to the change) is obtained; and the current size is compared with the previous size (i.e., the size before the change is pre-stored); if it is determined that the size has changed, the second rendering area on the first rendering layer is adjusted according to the above current size through the front-end rendering container, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the corresponding rendering areas of the first rendering layer and the second rendering layer.

[0090] For example, Figure 6As shown in (c), the terminal device can monitor the change information corresponding to the front-end rendering container through the change listener; if the change of the rich text page module is monitored, the position information of the second rendering area on the first rendering layer, which is the native rendering position on the front-end rendering container, is obtained, and the native rendering container is notified of the position information, and at the same time, it is determined whether there is a change between the position information and the position information before the above-mentioned change information occurs; if there is a change, the second rendering area on the second rendering layer is adjusted according to the second rendering area on the first rendering layer after the above-mentioned change through the native rendering container; otherwise, no adjustment is made.

[0091] It is understandable that the creation of page modules requires the consumption of processing resources of the terminal device and is relatively time-consuming. Moreover, when the user browses the application page, as the user slides down the application page, some page modules may not be displayed on the display device (for example, the screen) of the terminal device, and may be redisplayed on the display device later. Therefore, the terminal device can recycle and reuse the page modules that are not displayed on the display device, thereby reducing memory usage and processing resource usage, and improving the response speed and smoothness of displaying the application page.

[0092] Specifically, in combination with the above introduction to the page module, the terminal device can first separate the display view and display data from the page module that is not displayed on the display device; then, the terminal device can set up two cache pools: a first cache pool and a second cache pool, the first cache pool can be used to store the display view and display data, and the second cache pool can be used to store the display view; wherein, the terminal device can determine to store the above-mentioned separated display view and / or display data in the first cache pool or the second cache pool according to the amount of data already stored in the cache pool; in addition, when storing through the cache pool, the module type can be stored in association with the separated display view and / or display data according to the module type of the page module.

[0093] Among them, the cache pool can be understood as a storage unit or a storage container, which can be a local storage unit of the terminal device or a cloud storage unit of the terminal device, and this application does not impose any restrictions on this.

[0094] The following is an introduction to the recycling process for the page module:

[0095] In one embodiment, the terminal device can determine the first display view of the first page module and the first display data bound to the first display view in response to the first page module not being displayed on the display device used to display the application page, the page module including: a native page module or a rich text page module; then, the terminal device can determine the first module type corresponding to the first page module, the module type including: a rich text module type or a native module type; finally, the first display view bound to the first display data can be associated with the first module type and stored in the cache pool.

[0096] Specifically, Figure 7 As shown in (a), after the rendering container determines that the first page module exits the screen, that is, is not displayed on the display device for displaying the application page, it can first be determined whether the first cache quantity of the display view in the first cache pool is less than the first quantity threshold: if the first cache quantity is less than the first quantity threshold, the first display view bound to the first display data is associated with the first module type and stored in the first cache pool; if the first cache quantity is greater than or equal to the first quantity threshold, the second display view with the earliest storage time in the first cache pool and the second display data bound to the second display view are separated, and the second display view after the second display data is separated and the second module type corresponding to the second display view are moved to the second cache pool (that is, the oldest data in the first cache pool is moved out); and the first display view bound to the first display data is associated with the first module type and stored in the first cache pool.

[0097] Among them, before moving the second display view after separating the second display data and the second module type corresponding to the second display view to the second cache pool, the terminal device can first determine whether the second cache quantity of the display view in the second cache pool is less than the second quantity threshold: if the second cache quantity is less than the second quantity threshold, the second display view after separating the second display data and the second module type corresponding to the second display view are moved to the second cache pool; otherwise, the second display view and the second module type bound to the second display data with the earliest storage time in the first cache pool are directly deleted.

[0098] The following is an introduction to the reuse process of display views in the cache pool:

[0099] In one embodiment, Figure 7 As shown in (b), the page module management of the terminal device can obtain the operation of the display device to display the third page module; then, the terminal device can determine the third module type and third display data corresponding to the third page module in response to the display device about to display the third page module; then, the terminal device can search the first cache pool for the third module type and the third display view associated with the third module type and bound with the third display data:

[0100] If the third module type and the third display view associated with the third module type and bound with the third display data are found in the first cache pool (i.e., the third module type and the third display view associated with the third module type and bound with the third display data are hit in the first cache pool), the third display view bound with the third display data is rendered to obtain and display the third page module;

[0101] If the third module type and the third display view associated with the third module type and bound with the third display data are not found in the first cache pool, the third module type is searched in the second cache pool:

[0102] If the third module type is found from the second cache pool (i.e., the third module type is hit in the second cache pool), the third display view associated with the third module type in the second cache pool is obtained; the third display data is bound to the third display view associated with the third module type; the third display view bound with the third display data is rendered to obtain and display the third page module.

[0103] If the third module type is not found in the second cache pool, the terminal device can use the view creator to create a third display view (specifically, it can be created based on the page resource data corresponding to the third page module); then, bind the third display data to the third display view created above; render the third display view bound to the third display data to obtain and display the third page module.

[0104] The following describes the process of rendering the third display view bound with the third display data, and obtaining and displaying the third page module in combination with the above embodiment:

[0105] In one embodiment, before rendering the third display view bound with the third display data, the terminal device may first determine the display positions of the third page module and the fourth page module that needs to be continuously displayed in the current application page in the application page;

[0106] Then, the terminal device may determine the rendering layer where the third page module is located according to the third module type of the third page module: if the third module type is a rich text module type, the rendering layer where the third page module is located is determined to be the first rendering layer; if the third module type is a native module type, the rendering layer where the third page module is located is determined to be the second rendering layer;

[0107] Then, the terminal device may adjust the rendering area corresponding to the fourth page module according to the display position of the fourth page module in the application page: if the fourth page module is a rich text page module, then according to the display position of the fourth page module in the application page, the position of the rendering area corresponding to the fourth page module in the second rendering area on the first rendering layer is updated through the front-end rendering container, and the rendering area corresponding to the fourth page module after the updated position is sent to the native rendering container, and the second rendering area in the second rendering layer is adjusted through the native rendering container according to the rendering area corresponding to the fourth page module after the updated position; if the fourth page module is a native page module, then according to the display position of the fourth page module in the application page, the position of the fourth page module is updated, and the updated position of the fourth page module is sent to the front-end rendering container, and the second rendering area on the first rendering layer is adjusted through the front-end rendering container according to the updated position of the fourth page module, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the corresponding rendering areas of the first rendering layer and the second rendering layer.

[0108] In addition, the terminal device can determine the rendering area of ​​the third page module on the rendering layer according to the display position of the third page module in the application page: if the rendering layer where the third page module is located is the first rendering layer, the rendering area corresponding to the display position in the first rendering area on the first rendering layer is determined as the rendering area where the third page module is located on the first rendering layer; if the rendering layer where the third page module is located is the second rendering layer, the rendering area corresponding to the display position in the second rendering area on the second rendering layer is determined as the rendering area where the third page module is located on the second rendering layer.

[0109] Then, the terminal device can use the rendering container to render the third display view bound to the third display data to the rendering area where the third page module is located on the rendering layer, and obtain and display the third page module: if the third module type is a rich text module type, the third display view bound to the third display data is rendered to the rendering area where the third page module is located in the first rendering area on the first rendering layer through the front-end rendering container; if the third module type is a native module type, the third display view bound to the third display data is rendered to the rendering area where the third page module is located in the second rendering area on the second rendering layer through the native rendering container.

[0110] Through the above embodiment, the terminal device can store the display views bound to the display data and the display views not bound to the display data respectively through two cache pools (the first cache pool and the second cache pool), thereby achieving more refined storage and reducing unnecessary memory usage and data redundancy.

[0111] Moreover, by associating and storing the module type and the display view bound to the display data or the display view not bound to the display data, the corresponding display view can be quickly found from the cache pool according to the module type, thereby improving the response speed of page display.

[0112] It should be noted that all the above technical solutions can be combined in any way to form optional embodiments of the present application, which will not be described one by one here.

[0113] It should be noted that in the specific implementation of this application, related data such as page data, change operations, change information and page templates are involved. When the embodiments of this application are applied to specific products or technologies, user permission, consent or authorization is required, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards of relevant countries and regions.

[0114] Figure 8 A schematic diagram of a page rendering device 800 provided in an embodiment of the present application.

[0115] like Figure 8 As shown, the device 800 includes: a first acquisition module 801, a first rendering module 802, a second rendering module 803, a merged display module 804, a second acquisition module 805, a first adjustment module 806, a change monitoring module 807, a third acquisition module 808, a judgment update module 809, a first determination module 810, a second determination module 811, an associated storage module 812, a third determination module 813, a data search module 814 and a judgment acquisition module 815.

[0116] In one embodiment, a first acquisition module 801 is used to: acquire page data of an application page, the page data including page structure information and page resource data, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate location information of the rich text data and the native module data in the application page; a first rendering module 802 is used to: render the rich text data on a first rendering layer based on the page structure information through a front-end rendering container, and obtain a target rich text page module corresponding to the rich text data; a second rendering module 803 is used to: render the native module data on a second rendering layer based on the page structure information through a native rendering container, and obtain a target native page module corresponding to the native module data; a merged display module 804 is used to: merge and display the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain an application page.

[0117] In one embodiment, the page structure data includes position sequence information of rich text data and native module data on the application page; the first rendering module 802 is specifically used to: render the rich text data on the first rendering layer based on the position sequence information of the rich text data through the front-end rendering container to obtain the target rich text page module; the second rendering module 803 is specifically used to: determine the second rendering area corresponding to the native module data on the first rendering layer according to the first rendering area of ​​the target rich text page module on the first rendering layer and the position sequence information of the native module data; locate the second rendering area on the second rendering layer according to the second rendering area corresponding to the native module data on the first rendering layer, wherein the second rendering layer is the same size as the first rendering layer; render the native module data in the second rendering area on the second rendering layer through the native rendering container to obtain the target native page module.

[0118] In one embodiment, the second acquisition module 805 is used to: acquire the module height of the target native page module; the first adjustment module 806 is used to: adjust the second rendering area on the first rendering layer according to the module height of the target native page module through the front-end rendering container, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the correspondence between the first rendering layer and the second rendering layer.

[0119] In one embodiment, the change monitoring module 807 is used to: monitor the change operation of the page data corresponding to the front-end rendering container or the page data corresponding to the native rendering container in the application page through the change listener; the third acquisition module 808 is used to: in response to the change listener monitoring the target change operation, obtain the page data change information corresponding to the target change operation; the judgment update module 809 is used to: if the page data change information is the change information corresponding to the target rich text page module, then according to the change information corresponding to the target rich text page module, update the second rendering area on the first rendering layer, and send the updated second rendering area on the first rendering layer to the native rendering container, through the native rendering container, according to The second rendering area on the updated first rendering layer adjusts the second rendering area on the second rendering layer; if the page data change information is the change information corresponding to the target native page module, the module height of the target native page module is updated according to the change information corresponding to the target native page module, and the updated module height of the target native page module is sent to the front-end rendering container, and the second rendering area on the first rendering layer is adjusted by the front-end rendering container according to the updated module height of the target native page module, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the corresponding rendering areas of the first rendering layer and the second rendering layer.

[0120] In one embodiment, a first determination module 810 is used to: in response to the first page module not being displayed on a display device for displaying an application page, determine a first display view of the first page module and first display data bound to the first display view, the page module including: a native page module or a rich text page module; a second determination module 811 is used to: determine a first module type corresponding to the first page module, the module type including: a rich text module type or a native module type; an associated storage module 812 is used to: associate the first display view bound to the first display data with the first module type and store them in a cache pool.

[0121] In one embodiment, the cache pool includes a first cache pool and a second cache pool; the associated storage module 812 is specifically used to: determine whether the first cache quantity of the display view in the first cache pool is less than a first quantity threshold; if the first cache quantity is less than the first quantity threshold, associate the first display view bound to the first display data with the first module type and store it in the first cache pool; if the first cache quantity is greater than or equal to the first quantity threshold, separate the second display view with the earliest storage time in the first cache pool and the second display data bound to the second display view, move the second display view after the second display data is separated and the second module type corresponding to the second display view to the second cache pool; and associate the first display view bound to the first display data with the first module type and store it in the first cache pool.

[0122] In one embodiment, the third determination module 813 is used to: in response to the display device about to display the third page module, determine the third module type and the third display data corresponding to the third page module; the data search module 814 is used to: search the third module type and the third display view associated with the third module type and bound with the third display data from the first cache pool; the judgment acquisition module 815 is used to: if the third module type and the third display view associated with the third module type and bound with the third display data are found from the first cache pool, render the third display view bound with the third display data to obtain and display the third page module; if the third module type and the third display view associated with the third module type and bound with the third display data are not found from the first cache pool, search the third module type from the second cache pool; if the third module type is found from the second cache pool, obtain the third display view associated with the third module type in the second cache pool; bind the third display data to the third display view associated with the third module type; render the third display view bound with the third display data to obtain and display the third page module.

[0123] It should be understood that the device embodiment and the method embodiment may correspond to each other, and similar descriptions may refer to the method embodiment. To avoid repetition, they will not be described here. Specifically, Figure 8 The device 800 shown can execute the above method embodiments, and the above and other operations and / or functions of each module in the device 800 are respectively for implementing the corresponding processes in the above methods, which will not be repeated here for the sake of brevity.

[0124] The above describes the device 800 of the embodiment of the present application from the perspective of the functional module in conjunction with the accompanying drawings. It should be understood that the functional module can be implemented in hardware form, can be implemented by instructions in software form, and can also be implemented by a combination of hardware and software modules. Specifically, the steps of the method embodiment in the embodiment of the present application can be completed by the hardware integrated logic circuit and / or software form instructions in the processor, and the steps of the method disclosed in the embodiment of the present application can be directly embodied as a hardware decoding processor to perform, or a combination of hardware and software modules in the decoding processor to perform. Optionally, the software module can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. The storage medium is located in a memory, and the processor reads the information in the memory, and completes the steps in the above method embodiment in conjunction with its hardware.

[0125] Fig. 9 A schematic block diagram of an electronic device 900 provided in an embodiment of the present application.

[0126] like Fig. 9 As shown, the electronic device 900 may include:

[0127] The memory 910 and the processor 920, the memory 910 is used to store the computer program and transmit the program code to the processor 920. In other words, the processor 920 can call and run the computer program from the memory 910 to implement the method in the embodiment of the present application.

[0128] For example, the processor 920 may be configured to execute the above method embodiments according to instructions in the computer program.

[0129] In some embodiments of the present application, the processor 920 may include but is not limited to:

[0130] General-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.

[0131] In some embodiments of the present application, the memory 910 includes but is not limited to:

[0132] Volatile memory and / or non-volatile memory. Among them, the non-volatile memory can be read-only memory (ROM), programmable ROM (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM) or flash memory. The volatile memory can be random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SL DRAM) and direct memory bus random access memory (DR RAM).

[0133] In some embodiments of the present application, the computer program may be divided into one or more modules, which are stored in the memory 910 and executed by the processor 920 to complete the method provided by the present application. The one or more modules may be a series of computer program instruction segments capable of completing specific functions, and the instruction segments are used to describe the execution process of the computer program in the electronic device.

[0134] like Fig. 9 As shown, the electronic device may also include:

[0135] The transceiver 930 may be connected to the processor 920 or the memory 910 .

[0136] The processor 920 may control the transceiver 930 to communicate with other devices, specifically, to send information or data to other devices, or to receive information or data sent by other devices. The transceiver 930 may include a transmitter and a receiver. The transceiver 930 may further include an antenna, and the number of antennas may be one or more.

[0137] It should be understood that the various components in the electronic device are connected via a bus system, wherein the bus system includes not only a data bus but also a power bus, a control bus and a status signal bus.

[0138] The present application also provides a computer storage medium on which a computer program is stored, and when the computer program is executed by a computer, the computer can perform the method of the above method embodiment. In other words, the present application embodiment also provides a computer program product containing instructions, and when the instructions are executed by a computer, the computer can perform the method of the above method embodiment.

[0139] When software is used for implementation, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instruction is loaded and executed on a computer, the computer can be made to perform the corresponding flow in each method in the embodiment of the present application in whole or in part, and generate the functions that can be realized by each method in the embodiment of the present application. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instruction can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instruction can be transmitted from a website site, computer, server or data center by wired (such as coaxial cable, optical fiber, digital subscriber line (Digital Subscriber Line, DSL)) or wireless (such as infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, a data center, etc. that contains one or more available media integrations. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a digital video disc (DVD)), or a semiconductor medium (eg, a solid state disk (SSD)).

[0140] Those of ordinary skill in the art will appreciate that the modules and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0141] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the module is only a logical function division. There may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or modules, which can be electrical, mechanical or other forms.

[0142] The modules described as separate components may or may not be physically separated, and the components displayed as modules may or may not be physical modules, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of this embodiment. For example, each functional module in each embodiment of the present application may be integrated into a processing module, or each module may exist physically separately, or two or more modules may be integrated into one module.

[0143] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A page rendering method, characterized in that: include: Acquire page data of an application page, the page data including page structure information and page resource data, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate location information of the rich text data and the native module data in the application page; Rendering the rich text data on a first rendering layer based on the page structure information through a front-end rendering container to obtain a target rich text page module corresponding to the rich text data; Rendering the native module data on the second rendering layer based on the page structure information through the native rendering container to obtain a target native page module corresponding to the native module data; The target rich text page module of the first rendering layer and the target native page module of the second rendering layer are merged and displayed to obtain the application page.

2. The method according to claim 1, characterized in that The page structure data includes position sequence information of the rich text data and the native module data on the application page; The method of rendering the rich text data on a first rendering layer based on the page structure information through a front-end rendering container to obtain a target rich text page module corresponding to the rich text data includes: Rendering the rich text data on the first rendering layer based on the position sequence information of the rich text data through the front-end rendering container to obtain the target rich text page module; Correspondingly, the rendering of the native module data on the second rendering layer based on the page structure information through the native rendering container to obtain the target native page module corresponding to the native module data includes: Determine, according to the first rendering area of ​​the target rich text page module on the first rendering layer and the position sequence information of the native module data, a second rendering area corresponding to the native module data on the first rendering layer; Locating a second rendering area on the second rendering layer according to the second rendering area corresponding to the native module data on the first rendering layer, wherein the second rendering layer has the same size as the first rendering layer; The native module data is rendered in a second rendering area on the second rendering layer through the native rendering container to obtain the target native page module.

3. The method according to claim 2, characterized in that Before merging and displaying the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain the application page, the method further includes: Obtaining the module height of the target native page module; Through the front-end rendering container, according to the module height of the target native page module, the second rendering area on the first rendering layer is adjusted so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the correspondence between the first rendering layer and the second rendering layer.

4. The method according to claim 2, characterized in that: After merging and displaying the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain the application page, the method further includes: Monitor the change operation of the page data corresponding to the front-end rendering container or the page data corresponding to the native rendering container in the application page through the change listener; In response to the change listener listening to the target change operation, obtaining page data change information corresponding to the target change operation; If the page data change information is change information corresponding to the target rich text page module, then according to the change information corresponding to the target rich text page module, the second rendering area on the first rendering layer is updated, and the updated second rendering area on the first rendering layer is sent to the native rendering container, and the second rendering area on the second rendering layer is adjusted according to the updated second rendering area on the first rendering layer through the native rendering container; If the page data change information is change information corresponding to the target native page module, the module height of the target native page module is updated according to the change information corresponding to the target native page module, and the updated module height of the target native page module is sent to the front-end rendering container, and the second rendering area on the first rendering layer is adjusted by the front-end rendering container according to the updated module height of the target native page module, so that the second rendering area on the first rendering layer and other rendering areas in the first rendering layer except the second rendering area are aligned based on the correspondence between the first rendering layer and the second rendering layer.

5. The method according to any one of claims 1 to 4, characterized in that: Also includes: In response to a first page module not being displayed on a display device for displaying the application page, determining a first display view of the first page module and first display data bound to the first display view, the page module comprising: a native page module or a rich text page module; Determine a first module type corresponding to the first page module, where the module type includes: a rich text module type or a native module type; The first presentation view bound with the first presentation data is associated with the first module type and stored in a cache pool.

6. The method according to claim 5, characterized in that The cache pool includes a first cache pool and a second cache pool; The storing the first display view bound with the first display data in association with the first module type in a cache pool includes: Determine whether the first cache quantity of the display view in the first cache pool is less than a first quantity threshold; If the first cache quantity is less than the first quantity threshold, the first display view bound with the first display data is associated with the first module type and stored in the first cache pool; If the first cache quantity is greater than or equal to the first quantity threshold, the second display view with the earliest storage time in the first cache pool and the second display data bound to the second display view are separated, and the second display view after the second display data is separated and the second module type corresponding to the second display view are moved to the second cache pool; and the first display view bound to the first display data is associated with the first module type and stored in the first cache pool.

7. The method according to claim 6, characterized in that The method further comprises: In response to the display device about to display a third page module, determining a third module type and third display data corresponding to the third page module; searching the first cache pool for the third module type and a third presentation view associated with the third module type and bound with the third presentation data; If the third module type and the third display view associated with the third module type and bound to the third display data are found in the first cache pool, the third display view bound to the third display data is rendered to obtain and display the third page module; If the third module type and the third display view associated with the third module type and bound with the third display data are not found in the first cache pool, searching the second cache pool for the third module type; If the third module type is found from the second cache pool, the third display view associated with the third module type in the second cache pool is obtained; the third display data is bound to the third display view associated with the third module type; the third display view bound with the third display data is rendered to obtain and display the third page module.

8. A page rendering device, characterized in that: include: A first acquisition module is used to: acquire page data of an application page, wherein the page data includes page structure information and page resource data, wherein the page resource data includes rich text data and native module data, and the page structure data is used to indicate location information of the rich text data and the native module data in the application page; A first rendering module is used to: render the rich text data on a first rendering layer based on the page structure information through a front-end rendering container to obtain a target rich text page module corresponding to the rich text data; A second rendering module is used to: render the native module data on a second rendering layer based on the page structure information through a native rendering container to obtain a target native page module corresponding to the native module data; The merging and displaying module is used to merge and display the target rich text page module of the first rendering layer and the target native page module of the second rendering layer to obtain the application page.

9. An electronic device, characterized in that: include: processor; as well as A memory, configured to store executable instructions of the processor; The processor is configured to perform the method of any one of claims 1 to 7 by executing the executable instructions.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images