A page rendering method and device, computer equipment and a storage medium

Abstract

The present disclosure provides a page rendering method and device, computer equipment and a storage medium, wherein the method comprises: generating a layer tree corresponding to a to-be-displayed page based on a hierarchical relationship and a relative position relationship between components in the to-be-displayed page; converting drawing instructions in the layer tree into target drawing data corresponding to each component respectively, and caching; calling a target callback interface, reading the target drawing data corresponding to each component from the cache in turn according to the hierarchical relationship in the layer tree, and rendering the to-be-displayed page based on the target drawing data and the relative position relationship between layers. The embodiments of the present disclosure can utilize the target callback interface provided by the system to call the target drawing data according to the hierarchical relationship of each component in the layer tree. The target callback interface is a native callback interface provided by the system rendering thread, which can maximize the use of the system rendering thread, thereby improving the rendering efficiency of the page.

Description

Technical Field

[0001] This disclosure relates to the field of page display technology, and more specifically, to a page rendering method, apparatus, computer device, and storage medium. Background Technology

[0002] Flutter is a widely used self-rendering cross-platform UI (User Interface) framework. It enables same-layer rendering, which means embedding native system pages into a self-rendering cross-platform framework.

[0003] Because co-layer rendering requires merging pages from two different UI frameworks for rendering, it is prone to performance instability issues, such as high memory consumption or low smoothness. Summary of the Invention

[0004] This disclosure provides at least one page rendering method, apparatus, computer device, and storage medium.

[0005] In a first aspect, embodiments of this disclosure provide a page rendering method, including:

[0006] Based on the hierarchical and relative positional relationships between components in the page to be displayed, a layer tree corresponding to the page to be displayed is generated; the components include system native components and cross-platform self-drawn components; the layer tree is used to represent the hierarchical and relative positional relationships between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawn components, as well as the drawing instructions corresponding to different layers;

[0007] The drawing instructions in the layer tree are converted into target drawing data corresponding to each component and cached; the target drawing data is drawing data in a target format that the rendering thread can render.

[0008] The target callback interface is invoked, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree. Based on the relative positional relationship between the target drawing data and the layers, the page to be displayed is rendered.

[0009] In one optional implementation, the step of sequentially reading the target drawing data corresponding to each component according to the hierarchical relationship in the layer tree includes:

[0010] Based on the layer tree, the target drawing data corresponding to each component is read sequentially in a top-down hierarchical order.

[0011] In one optional implementation, the step of sequentially reading the target drawing data corresponding to each component according to the hierarchical relationship in the layer tree includes:

[0012] Based on the hierarchical relationship between the layers in the layer tree, and the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, the priority order for reading the target drawing data corresponding to each component is determined.

[0013] The target drawing data corresponding to each component is read sequentially according to the reading priority order.

[0014] In one optional implementation, determining the reading priority order of the target drawing data corresponding to each component according to the hierarchical relationship between the layers in the layer tree and the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components includes:

[0015] When a first cross-platform self-drawing component exists, and the layer corresponding to the first cross-platform self-drawing component overlaps with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the first cross-platform self-drawing component is determined to be higher than the reading priority of the target drawing data corresponding to the system native component.

[0016] When there are a second cross-platform self-drawing component and a third cross-platform self-drawing component, and the layer corresponding to the second cross-platform self-drawing component is located below the layer corresponding to the system native component, and the layer corresponding to the third cross-platform self-drawing component does not overlap with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the system native component is determined to be higher than the reading priority of the target drawing data corresponding to the second cross-platform self-drawing component and the third cross-platform self-drawing component.

[0017] In one optional implementation, converting the drawing instructions in the layer tree into target drawing data corresponding to each of the components includes:

[0018] According to the target drawing mode selected by the user from multiple drawing modes, the drawing instructions in the layer tree are converted into target drawing data corresponding to each component respectively; wherein, the target format of the target drawing data corresponds to the target drawing mode selected by the user; the multiple drawing modes include image mode and texture mode.

[0019] In one optional implementation, the step of converting the drawing instructions in the layer tree into target drawing data corresponding to each of the components according to the target drawing mode selected by the user includes:

[0020] When the user selects image mode as the drawing mode, an image drawing instruction list for drawing each component is generated based on each drawing instruction in the layer tree; the image drawing instruction list contains instructions that can be executed by the image processor GPU to draw the image of each component;

[0021] The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including:

[0022] Using the target callback interface, each image drawing instruction is retrieved sequentially from the image drawing instruction list stored in the cache according to the hierarchical relationship in the layer tree, and the image drawing instructions are executed by the GPU to render the page to be displayed.

[0023] In one optional implementation, the step of converting the drawing instructions in the layer tree into target drawing data corresponding to each of the components according to the target drawing mode selected by the user includes:

[0024] When the user selects texture mode as the drawing mode, each component corresponding to the layer tree is drawn as a shared texture based on the drawing instructions in the layer tree;

[0025] The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including:

[0026] The target callback interface is invoked, and the shared textures corresponding to each component are read from the cache in sequence according to the hierarchical relationship in the layer tree, and the shared textures are drawn on the page to be displayed.

[0027] In one optional implementation, before calling the target callback interface and sequentially reading the target drawing data corresponding to each component from the cache according to the hierarchical relationship in the layer tree, the process includes:

[0028] If the current system version is greater than or equal to the first target system version, use the interface creation function to create the target callback interface;

[0029] The target callback interface is injected into the interface list using the function to draw the webpage view;

[0030] The method of calling the target callback interface reads the target drawing data corresponding to each component from the cache sequentially according to the hierarchical relationship in the layer tree, including:

[0031] The target callback interface provided by the interface list is called, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0032] In one optional implementation, the step of calling the target callback interface involves sequentially reading the target drawing data corresponding to each component from the cache according to the hierarchical relationship in the layer tree, including:

[0033] If the current system version is greater than or equal to the second target system version, the target callback interface is called in the system's native rendering thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0034] If the current system version is lower than the second target system version, the target callback interface is called in the platform thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0035] Secondly, embodiments of this disclosure also provide a page rendering apparatus, including:

[0036] The generation module is used to generate a layer tree corresponding to the page to be displayed based on the hierarchical relationship and relative positional relationship between the components of the page to be displayed; each component includes system native components and cross-platform self-drawing components; the layer tree is used to represent the hierarchical relationship and relative positional relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers;

[0037] The conversion module is used to convert the drawing instructions in the layer tree into target drawing data corresponding to each component, and cache them; the target drawing data is drawing data in a target format that the rendering thread can render;

[0038] The reading module is used to call the target callback interface, read the target drawing data corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and render the page to be displayed based on the relative positional relationship between the target drawing data and the layers.

[0039] Thirdly, embodiments of this disclosure also provide a computer device, including: a processor, a memory, and a bus, wherein the memory stores machine-readable instructions executable by the processor, and when the computer device is running, the processor communicates with the memory via the bus, and when the machine-readable instructions are executed by the processor, the steps of the first aspect above, or any possible implementation of the first aspect, are performed.

[0040] Fourthly, embodiments of this disclosure also provide a computer-readable storage medium storing a computer program that, when executed by a processor, performs the steps of the first aspect or any possible implementation of the first aspect.

[0041] The page rendering method provided in this embodiment can generate a layer tree including system native components and cross-platform self-drawing components during the same-layer rendering process. The target callback interface provided by the system calls the target drawing data in sequence according to the hierarchical relationship of each component in the layer tree. The target callback interface is a native callback interface provided by the system rendering thread, which can maximize the use of the system rendering thread and thus improve the rendering efficiency of the page.

[0042] In addition, the embodiments of this disclosure provide two caching methods for the generated target drawing data, including picture mode and texture mode. Picture mode, which caches drawing instructions, does not require the creation of a separate cache space, thus reducing the memory occupied. Texture mode, which shares textures, can reduce the rendering overhead of the rendering thread, resulting in a smoother interactive experience for the generated page.

[0043] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0044] To more clearly illustrate the technical solutions of the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly described below. These drawings are incorporated in and constitute a part of this specification. They illustrate embodiments conforming to this disclosure and, together with the specification, serve to explain the technical solutions of this disclosure. It should be understood that the following drawings only show some embodiments of this disclosure and should not be considered as limiting the scope. Those skilled in the art can obtain other related drawings based on these drawings without creative effort.

[0045] Figure 1 A flowchart of a page rendering method provided by an embodiment of this disclosure is shown;

[0046] Figure 2 A schematic diagram of a process for rendering a page to be displayed, provided by an embodiment of this disclosure, is shown;

[0047] Figure 3 The illustration shows a page rendering effect provided by an embodiment of this disclosure, which utilizes a same-layer rendering method.

[0048] Figure 4 This illustration shows a page rendering with another layer rendering provided by an embodiment of the present disclosure;

[0049] Figure 5 A schematic diagram of the structure of a page rendering apparatus provided in an embodiment of this disclosure is shown;

[0050] Figure 6 A schematic diagram of a computer device provided in an embodiment of this disclosure is shown. Detailed Implementation

[0051] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this disclosure, and not all of them. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely represents selected embodiments of this disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0052] Flutter is a widely used self-rendering cross-platform UI (User Interface) framework. It enables same-layer rendering, which means embedding native system pages into a self-rendering cross-platform framework.

[0053] In common Flutter framework implementations of same-layer rendering, one approach is to use a VirtualDisplay to first draw the system's native view onto the VirtualDisplay. The Flutter framework then retrieves the rendering texture data from the VirtualDisplay and composites it with its internal widget tree. This rendering method suffers from poor stability in terms of memory usage and smoothness. Another approach is Hybrid Composition, where the cross-platform Flutter UI is drawn to an ImageReader. The ImageReader then reads the cross-platform Flutter UI output, converts it into a cross-platform FlutterImageView, and embeds it into the system's native page. This method performs poorly on older systems (e.g., Android versions below 10). A third approach is using TextureLayer, where the system's native page is drawn to a Buffer provided by a SurfaceTexture Canvas before being output to the cross-platform Flutter framework for rendering. This method also suffers from poor stability in terms of memory usage and smoothness on older systems. Another method is to use a hole-cutting technique to place the system's native view, PlatformView, below the cross-platform view, FlutterView, and make the corresponding position in FlutterView transparent, thus making PlatformView visible from FlutterView. However, this method does not support effects such as semi-transparency, masks, or various filters, and its applicable scenarios are limited.

[0054] In summary, the usual same-layer rendering method is prone to poor performance stability issues, such as high memory consumption or low smoothness.

[0055] Based on this, this disclosure provides a page rendering method. During the same-layer rendering process, a layer tree including system native components and cross-platform self-drawn components can be generated. The target drawing data is called sequentially according to the hierarchical relationship of each component in the layer tree using the target callback interface provided by the system. The target callback interface is a native callback interface provided by the system rendering thread, which can maximize the use of the system rendering thread and thus improve the page rendering efficiency.

[0056] The deficiencies of the above solutions and the proposed solutions are the result of the inventors' practical experience and careful research. Therefore, the discovery process of the above problems and the solutions proposed in this disclosure below should be considered as the inventors' contributions to this disclosure.

[0057] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0058] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0059] To facilitate understanding of this embodiment, a page rendering method disclosed in this disclosure will first be described in detail. The page rendering method provided in this disclosure is generally executed by a computer device with certain computing power.

[0060] The following describes the page rendering method provided in this embodiment, taking the server as the execution subject as an example.

[0061] See Figure 1 The diagram shows a flowchart of a page rendering method provided in an embodiment of this disclosure. The method includes steps S101 to S103, wherein:

[0062] S101: Based on the hierarchical and relative positional relationships among the components of the page to be displayed, generate a layer tree corresponding to the page to be displayed; each component includes system native components and cross-platform self-drawing components; the layer tree is used to represent the hierarchical and relative positional relationships between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers.

[0063] In this embodiment, the hierarchical and relative positional relationships of the components on the page to be displayed can be preset according to display requirements. In one implementation, a component tree containing each component and its hierarchical and relative positional relationships can be generated, such as... Figure 2 As shown.

[0064] Here, the system native component can be an Android system native component. The cross-platform self-drawn component can be a Flutter component. Flutter is a widely used cross-platform user interface (UI) framework. Developers typically use Flutter to develop web pages, and pages implemented using Flutter are called cross-platform Flutter pages. The system native component is used to embed into the cross-platform page FlutterView, enabling the system native component and the cross-platform self-drawn component to be rendered at the same layer in the cross-platform Flutter page.

[0065] Here, same-layer rendering essentially transforms the cross-platform self-drawn component tree FlutterWidgetTree into the system's native UI NativeViewTree according to the hierarchical and relative positional relationships between components, rendering the page to be displayed. The hierarchical relationship of each component in the cross-platform self-drawn component tree FlutterWidgetTree corresponds to the hierarchical relationship of each component in the page to be displayed; the relative positional relationship of each component in the cross-platform self-drawn component tree FlutterWidgetTree corresponds to the relative positional relationship of each component in the page to be displayed. The cross-platform self-drawn component tree FlutterWidgetTree can represent the UI tree in the cross-platform page FlutterView, and the native UI NativeViewTree can represent the UI tree in the system's native page. Based on the hierarchical and relative positional relationships between the components in the cross-platform self-drawn component tree FlutterWidgetTree, a layer tree LayerTree can be generated. Each layer in the layer tree LayerTree can correspond to a cross-platform Flutter page. The hierarchical relationships between layers in the LayerTree can be consistent with the hierarchical relationships between components in the cross-platform FlutterWidgetTree. Similarly, the relative positions of layers in the LayerTree and components in the cross-platform FlutterWidgetTree can be consistent. Finally, based on the LayerTree, it is converted into the system's nativeViewTree, and the page to be displayed is rendered.

[0066] like Figure 2The flowchart illustrating a rendering process for a page to be displayed shows that the component tree can include system native components, a system native view placeholder PlatformViewLink, and multiple cross-platform self-drawn components FlutterWidget. These cross-platform self-drawn components FlutterWidget can include Widget1, Widget2, Widget3, and Widget4. The cross-platform root component can be located below a system native component. The system native view placeholder PlatformViewLink and the multiple cross-platform self-drawn components FlutterWidget can be located below the cross-platform root component, i.e., child components of the cross-platform root component. Specifically, the system native view placeholder PlatformViewLink is a placeholder for the system native view PlatformView within the cross-platform self-drawn component FlutterWidget, indicating that a system native view PlatformView is embedded in the cross-platform self-drawn component tree FlutterWidgetTree. The system native view placeholder PlatformViewLink can represent a component, which can be represented here as a system native view placeholder component PlatformViewLinkWidget. After a series of transformations, the system native view placeholder component PlatformViewLinkWidget can ultimately create a cross-platform mutable view, FlutterMutatorView, which is added to the cross-platform view FlutterView. The first cross-platform self-drawing component, FlutterWidget, which overlaps with and is located within the system native view placeholder PlatformViewLink, will be drawn onto the corresponding native component, FlutterFunctorView, on the upper-level cross-platform drawing surface. The second cross-platform self-drawing component, FlutterWidget, located below the system native view placeholder PlatformViewLink, and the third cross-platform self-drawing component, FlutterWidget, which does not overlap with and is located above the system native view placeholder PlatformViewLink, will be drawn onto the corresponding native component, FlutterFunctorView, on the lower-level cross-platform drawing surface. This embeds the system native view PlatformView into the cross-platform Flutter page to be displayed.

[0067] The generated layer tree can be used to represent the hierarchical and relative positional relationships between layers corresponding to system native components and layers corresponding to cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers. The hierarchical relationship here can represent the superior-inferior relationship between layers corresponding to system native components and layers corresponding to cross-platform self-drawing components. The relative positional relationship here can represent the relative position between layers corresponding to system native components and layers corresponding to cross-platform self-drawing components, such as relative orientation and overlap. The drawing instructions here can be drawing instructions in an intermediate organizational form. Drawing instructions are used to indicate information such as the size, shape, and position of layers. In practical implementation, the drawing instructions corresponding to the layers can be converted into target drawing data for rendering.

[0068] S102: Convert the drawing instructions in the layer tree into target drawing data corresponding to each of the components, and cache them; the target drawing data is drawing data in a target format that the rendering thread can render.

[0069] Here, before rendering, the drawing instructions in the layer tree can be converted into target drawing data corresponding to each component, i.e., drawing data in the target format that the rendering thread can render, according to the target drawing mode selected by the user from multiple drawing modes. The target format of the target drawing data here corresponds to the target drawing mode selected by the user. Multiple drawing modes can include picture mode and texture mode.

[0070] In one implementation, when the user selects image mode as the drawing mode, an image drawing instruction list for drawing each component can be generated based on the various drawing instructions in the layer tree; that is, a set of image drawing instructions for drawing each component. This image drawing instruction list contains instructions that can be executed by the Graphics Processing Unit (GPU) for drawing the images of each component.

[0071] In one implementation, when the user selects texture mode as the drawing mode, the components corresponding to the layer tree can be drawn as a shared texture based on the drawing instructions in the layer tree.

[0072] Here, Picture mode rasterizes the layer tree corresponding to the Flutter page implemented with non-system native controls into a list of image drawing instructions. The native rendering thread executes the drawing instructions in the image drawing instruction list to draw the Flutter page. This eliminates the need to create a separate rendering surface or buffer, significantly reducing the memory usage of graphics. Furthermore, the UI thread and GPU thread can be selectively merged into a single thread, further streamlining the rendering pipeline. Texture mode, on the other hand, draws the layer tree corresponding to the Flutter page implemented with non-system native controls as a texture on the GPU thread. The native rendering thread then directly draws the texture onto the rendering surface. This mode maximizes the utilization of the GPU thread, reduces the rendering overhead of the native rendering thread, and results in smoother page display. Picture mode uses less memory, while Texture mode offers superior smoothness. Users can choose the appropriate mode based on their actual needs.

[0073] The generated target drawing data can be cached. Here, the DrawFunctorManager module can be used to manage the cached list of image drawing instructions, shared textures, and their lifecycles.

[0074] S103: Call the target callback interface, read the target drawing data corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and render the page to be displayed based on the relative positional relationship between the target drawing data and the layer.

[0075] The target callback interface here can be a system-provided callback interface or a custom callback interface. In one implementation, before calling the target callback interface and sequentially reading the target drawing data corresponding to each component from the cache according to the hierarchical relationship in the layer tree, it can be determined whether the current system version is greater than the first target system version. Here, the system can refer to the Android system. When the Android system version is less than Android 12, the Android system source code can provide a rendering thread drawing callback interface, namely the GLFunctor interface, which the native rendering thread can call back to and read the data in the interface.

[0076] In Android systems with versions greater than or equal to Android 12, the callback function `callDrawGLFunction`, which the GLFunctor interface depends on, is deprecated in Android 12. This means the system no longer provides the GLFunctor interface. The system only exposes the `drawWebViewFunctor` function, which is used for drawing the WebView.

[0077] Here, the `create_functor` function can be used to create the target interface function; then, the `drawWebViewFunctor` function can be used to inject the target callback function into the `DisplayList` interface list. Using the target callback interfaces provided by the interface list, the target drawing data for each component is read from the cache sequentially according to the hierarchical relationship in the layer tree.

[0078] When the target rendering data is a list of image rendering instructions, the target callback interface can be used to retrieve each image rendering instruction from the cached image rendering instruction list in sequence according to the hierarchical relationship in the layer tree, and then execute the image rendering instructions through the image processor GPU to render the page to be displayed.

[0079] When the target drawing data is in texture mode, the target callback interface can be used to read the shared textures corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and draw the shared textures on the page to be displayed.

[0080] In the process of sequentially reading the target rendering data (including image rendering instruction lists or shared textures) corresponding to each component from the cache according to the hierarchical relationship in the layer tree, in one implementation, the reading priority of each component can be determined according to the hierarchical relationship between layers in the layer tree, as well as the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components. Then, the target rendering data corresponding to each component is read sequentially according to the reading priority.

[0081] When a first cross-platform self-drawing component exists, and the layer corresponding to the first cross-platform self-drawing component overlaps with the layer corresponding to the system native component but is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the first cross-platform self-drawing component is determined to be higher than the reading priority of the target drawing data corresponding to the system native component. When a second cross-platform self-drawing component and a third cross-platform self-drawing component exist, and the layer corresponding to the second cross-platform self-drawing component is located below the layer corresponding to the system native component, and the layer corresponding to the third cross-platform self-drawing component does not overlap with the layer corresponding to the system native component but is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the system native component is determined to be higher than the reading priority of the target drawing data corresponding to the second and third cross-platform self-drawing components.

[0082] In other words, the reading priority of the target drawing data of the first cross-platform self-drawing component, whose corresponding layer overlaps with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, is higher than the reading priority of the target drawing data corresponding to the system native component; the reading priority of the target drawing data corresponding to the system native component is higher than the reading priority of the target drawing data of the second cross-platform self-drawing component, whose corresponding layer is located below the layer corresponding to the system native component, and the reading priority of the target drawing data of the third cross-platform self-drawing component, whose corresponding layer does not overlap with the layer corresponding to the system native component and is located above the layer corresponding to the system native component.

[0083] For example Figure 2 In the diagram, Layer 1, Layer 2, Layer 3, and Layer 4 all represent layers corresponding to cross-platform self-drawn components. Layer 1, Layer 2, Layer 3, and Layer 4 can be located in the root layer of the LayerTree. The root layer is the layer corresponding to the cross-platform root component. If the root layer is not in... Figure 2 The layer tree is shown; where layer 2 and layer 3 are located above the placeholder of the system native component view corresponding to the system native view PlatformView (which can be regarded as a layer), and overlap with the placeholder of the system native component view corresponding to the system native view PlatformView; layer 3 is located below the placeholder of the system native component view corresponding to the system native view PlatformView; layer 4 is located above the placeholder of the system native component view corresponding to the system native view PlatformView, and overlaps with the placeholder of the system native component view corresponding to the system native view PlatformView. Figure 2In this implementation, the reading priority of the target drawing data of the cross-platform self-drawing components corresponding to Layer 2 and Layer 3 is higher than that of the target drawing data of the system native view PlatformView. The reading priority of the target drawing data of the system native view PlatformView is higher than that of the target drawing data of the cross-platform self-drawing components corresponding to Layer 1 and Layer 4. In one embodiment, the reading priority of the target drawing data of the cross-platform self-drawing components corresponding to Layer 2 and Layer 3 can be the same; that is, the target drawing data of the cross-platform self-drawing component corresponding to Layer 2 can be read first, or the target drawing data of the cross-platform self-drawing component corresponding to Layer 3 can be read first. The reading priority of the target drawing data of the cross-platform self-drawing components corresponding to Layer 2 and Layer 3 can also be based on a preset reading priority, which will not be detailed here. Similarly, the reading priority of the target drawing data of the cross-platform self-drawing components corresponding to Layer 1 and Layer 4 can be the same; that is, the target drawing data of the cross-platform self-drawing component corresponding to Layer 1 can be read first, or the target drawing data of the cross-platform self-drawing component corresponding to Layer 4 can be read first. The reading priority of the target drawing data of the cross-platform self-drawing components corresponding to Layer 1 and Layer 4 can also be based on a preset reading priority, which will not be detailed here.

[0084] In one implementation, when reading the target drawing data corresponding to each component sequentially according to the hierarchical relationship in the layer tree, the target drawing data corresponding to each component can also be read sequentially from the upper layer to the lower layer according to the hierarchical relationship between the layers in the layer tree.

[0085] In other words, the reading priority of the target drawing data of the component whose layer is located above it is higher than the reading priority of the target drawing data of the component whose layer is located below it.

[0086] Here, after reading the target drawing data corresponding to each component according to the reading priority, the page to be displayed can be rendered in turn based on the target drawing data, and finally a cross-platform Flutter page embedded with the system native group PlatformView is obtained.

[0087] In one implementation, the UI thread can be used to place the system native view placeholder `PlatformViewLink` into the cross-platform self-drawn component tree `FlutterWidgetTree`, generating a layer tree containing the system native view placeholder `PlatformViewLink` and the cross-platform self-drawn component `FlutterWidget`. Then, the `ExternalViewEmbedder` in the `RasterThread` is used to layer each layer according to the hierarchical relationship between the layers in the layer tree, resulting in Flutter pages above the layers corresponding to the system native components and Flutter pages below the layers corresponding to the system native components. Each layer represents a Flutter page, i.e., a cross-platform function view `FlutterFunctorView`. Target drawing data corresponding to each layer is generated according to the hierarchical relationship between the layers. The target drawing data can include a list of image drawing instructions generated in image mode for drawing each component, or a shared texture generated in texture mode. The generated target drawing data is then cached.

[0088] The DrawFunctorManager module can be used to manage a cached list of image drawing commands, shared textures, and their lifecycles.

[0089] Finally, in the native rendering thread RenderThread provided by the system, the target callback interface can be used to read the target drawing data corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and the page to be displayed can be rendered based on the target drawing data. In this way, the view PlatformView corresponding to the native system component is embedded into the cross-platform Flutter page to be displayed.

[0090] In one implementation, relevant functions in the RasterThread can be merged into the RenderThread, such as the rasterization process of the LayerTree and the process of caching target drawing data. This can eliminate the RasterThread and further simplify the rendering pipeline.

[0091] In one implementation, it can also be determined whether the current system version is lower than the second target system version. If the current system version is greater than or equal to the second target system version, the target callback interface is called in the system's native rendering thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree. If the current system version is lower than the second target system version, the target callback interface is called in the platform thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0092] In practice, in Android systems, when the system version is less than 5.0, there is no rendering thread RenderThread. Therefore, the rendering process can be implemented in the platform thread PlatformThread.

[0093] In this embodiment of the disclosure, the native component FlutterFunctorView corresponding to the cross-platform drawing surface inherits from the system native view and can be seamlessly embedded into the native view. Therefore, during the interaction process, there will be no desynchronization between the Flutter page and the system native page, which can be well applied to the same-layer rendering scenario.

[0094] Figure 3 A page rendering screenshot at the same layer is provided. Figure 3 The view corresponding to the map in the middle is the view rendered by the system's native components. Figure 1 ,See Figure 2 Heshi Figure 3 This is the view rendered by a cross-platform self-drawn component. The view rendered by a system native component is embedded in the viewport. Figure 1 ,See Figure 2 Heshi Figure 3 The lower layer of the corresponding view.

[0095] Figure 4 Another page rendering with the same layer is provided. Figure 4 The views corresponding to the target image and background image are rendered by cross-platform self-drawn components, while the search results page is rendered by system native components. The view rendered by the system native components is embedded in an intermediate layer between the target image and the background image.

[0096] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0097] Based on the same inventive concept, this disclosure also provides a page rendering device corresponding to the page rendering method. Since the principle of the device in this disclosure for solving the problem is similar to the page rendering method described above in this disclosure, the implementation of the device can refer to the implementation of the method, and the repeated parts will not be described again.

[0098] Reference Figure 5 The diagram shown is a structural schematic of a page rendering apparatus provided in an embodiment of this disclosure. The apparatus includes:

[0099] The generation module 501 is used to generate a layer tree corresponding to the page to be displayed based on the hierarchical relationship and relative positional relationship between the components of the page to be displayed; each component includes system native components and cross-platform self-drawing components; the layer tree is used to represent the hierarchical relationship and relative positional relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers;

[0100] The conversion module 502 is used to convert the drawing instructions in the layer tree into target drawing data corresponding to each of the components, and cache them; the target drawing data is drawing data in a target format that the rendering thread can render;

[0101] The reading module 503 is used to call the target callback interface, read the target drawing data corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and render the page to be displayed based on the relative positional relationship between the target drawing data and the layer.

[0102] In one alternative implementation, the reading module 503 is specifically used for:

[0103] Based on the layer tree, the target drawing data corresponding to each component is read sequentially in a top-down hierarchical order.

[0104] In one alternative implementation, the reading module 503 is specifically used for:

[0105] Based on the hierarchical relationship between the layers in the layer tree, and the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, the priority order for reading the target drawing data corresponding to each component is determined.

[0106] The target drawing data corresponding to each component is read sequentially according to the reading priority order.

[0107] In one alternative implementation, the reading module 503 is specifically used for:

[0108] When a first cross-platform self-drawing component exists, and the layer corresponding to the first cross-platform self-drawing component overlaps with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the first cross-platform self-drawing component is determined to be higher than the reading priority of the target drawing data corresponding to the system native component.

[0109] When there are a second cross-platform self-drawing component and a third cross-platform self-drawing component, and the layer corresponding to the second cross-platform self-drawing component is located below the layer corresponding to the system native component, and the layer corresponding to the third cross-platform self-drawing component does not overlap with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the system native component is determined to be higher than the reading priority of the target drawing data corresponding to the second cross-platform self-drawing component and the third cross-platform self-drawing component.

[0110] In one optional implementation, the conversion module 502 is specifically used for:

[0111] According to the target drawing mode selected by the user from multiple drawing modes, the drawing instructions in the layer tree are converted into target drawing data corresponding to each component respectively; wherein, the target format of the target drawing data corresponds to the target drawing mode selected by the user; the multiple drawing modes include image mode and texture mode.

[0112] In one optional implementation, the conversion module 502 is specifically used for:

[0113] When the user selects image mode as the drawing mode, an image drawing instruction list for drawing each component is generated based on each drawing instruction in the layer tree; the image drawing instruction list contains instructions that can be executed by the image processor GPU to draw the image of each component.

[0114] The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including:

[0115] Using the target callback interface, each image drawing instruction is retrieved sequentially from the image drawing instruction list stored in the cache according to the hierarchical relationship in the layer tree, and the image drawing instructions are executed by the GPU to render the page to be displayed.

[0116] In one optional implementation, the conversion module 502 is specifically used for:

[0117] When the user selects texture mode as the drawing mode, each component corresponding to the layer tree is drawn as a shared texture based on the drawing instructions in the layer tree;

[0118] The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including:

[0119] The target callback interface is invoked, and the shared textures corresponding to each component are read from the cache in sequence according to the hierarchical relationship in the layer tree, and the shared textures are drawn on the page to be displayed.

[0120] In an optional implementation, before calling the target callback interface and sequentially reading the target drawing data corresponding to each component from the cache according to the hierarchical relationship in the layer tree, the device further includes:

[0121] Create a module to create a target callback interface using an interface creation function when the current system version is greater than or equal to the first target system version;

[0122] The injection module is used to inject the target callback interface into the interface list using the webpage view drawing function;

[0123] Read module 503, specifically used for:

[0124] The target callback interface provided by the interface list is called, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0125] In one alternative implementation, the reading module 503 is specifically used for:

[0126] If the current system version is greater than or equal to the second target system version, the target callback interface is called in the system's native rendering thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0127] If the current system version is lower than the second target system version, the target callback interface is called in the platform thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

[0128] The processing flow of each module in the device and the interaction flow between each module can be referred to the relevant descriptions in the above method embodiments, and will not be detailed here.

[0129] Based on the same technical concept, this disclosure also provides a computer device. (See also...) Figure 6 The diagram shows the structure of a computer device 600 provided in this embodiment of the present disclosure, including a processor 601, a memory 602, and a bus 603. The memory 602 stores execution instructions and includes main memory 6021 and external memory 6022. The main memory 6021, also called internal memory, is used to temporarily store computational data in the processor 601 and data exchanged with external memory 6022 such as a hard disk. The processor 601 exchanges data with the external memory 6022 through the main memory 6021. When the computer device 600 is running, the processor 601 and the memory 602 communicate through the bus 603, causing the processor 601 to execute the following instructions:

[0130] Based on the hierarchical and relative positional relationships between components in the page to be displayed, a layer tree corresponding to the page to be displayed is generated; the components include system native components and cross-platform self-drawn components; the layer tree is used to represent the hierarchical and relative positional relationships between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawn components, as well as the drawing instructions corresponding to different layers;

[0131] The drawing instructions in the layer tree are converted into target drawing data corresponding to each component and cached; the target drawing data is drawing data in a target format that the rendering thread can render.

[0132] The target callback interface is invoked, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree. Based on the relative positional relationship between the target drawing data and the layers, the page to be displayed is rendered.

[0133] This disclosure also provides a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the page rendering method described in the above method embodiments. The storage medium can be a volatile or non-volatile computer-readable storage medium.

[0134] This disclosure also provides a computer program product carrying program code. The program code includes instructions that can be used to execute the steps of the page rendering method described in the above method embodiments. For details, please refer to the above method embodiments, which will not be repeated here.

[0135] The aforementioned computer program product can be implemented through hardware, software, or a combination thereof. In one optional embodiment, the computer program product is specifically embodied in a computer storage medium; in another optional embodiment, the computer program product is specifically embodied in a software product, such as a software development kit (SDK), etc.

[0136] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here. In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, devices, and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or units may be electrical, mechanical, or other forms.

[0137] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0138] In addition, the functional units in the various embodiments of this disclosure can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0139] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a processor-executable, non-volatile, computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0140] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A page rendering method, characterized in that, include: Based on the hierarchical and relative positional relationships between components in the page to be displayed, a layer tree corresponding to the page to be displayed is generated; The components include system native components and cross-platform self-drawing components; the layer tree includes the system native components and the cross-platform self-drawing components, used to represent the hierarchical relationship and relative positional relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers; The drawing instructions in the layer tree are converted into target drawing data corresponding to each component and cached; the target drawing data is drawing data in a target format that the rendering thread can render. The target callback interface is invoked, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree. Based on the relative positional relationship between the target drawing data and the layers, the page to be displayed is rendered.

2. The method according to claim 1, characterized in that, The step of sequentially reading the target drawing data corresponding to each component according to the hierarchical relationship in the layer tree includes: Based on the layer tree, the target drawing data corresponding to each component is read sequentially in a top-down hierarchical order.

3. The method according to claim 1, characterized in that, The step of sequentially reading the target drawing data corresponding to each component according to the hierarchical relationship in the layer tree includes: Based on the hierarchical relationship between the layers in the layer tree, and the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, the priority order for reading the target drawing data corresponding to each component is determined. The target drawing data corresponding to each component is read sequentially according to the reading priority order.

4. The method according to claim 3, characterized in that, The step of determining the priority order for reading target drawing data for each component based on the hierarchical relationship between the layers in the layer tree and the overlap relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components includes: When a first cross-platform self-drawing component exists, and the layer corresponding to the first cross-platform self-drawing component overlaps with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the first cross-platform self-drawing component is determined to be higher than the reading priority of the target drawing data corresponding to the system native component. When there are a second cross-platform self-drawing component and a third cross-platform self-drawing component, and the layer corresponding to the second cross-platform self-drawing component is located below the layer corresponding to the system native component, and the layer corresponding to the third cross-platform self-drawing component does not overlap with the layer corresponding to the system native component and is located above the layer corresponding to the system native component, the reading priority of the target drawing data corresponding to the system native component is determined to be higher than the reading priority of the target drawing data corresponding to the second cross-platform self-drawing component and the third cross-platform self-drawing component.

5. The method according to claim 1, characterized in that, The step of converting the drawing instructions in the layer tree into target drawing data corresponding to each of the components includes: According to the target drawing mode selected by the user from multiple drawing modes, the drawing instructions in the layer tree are converted into target drawing data corresponding to each component respectively; wherein, the target format of the target drawing data corresponds to the target drawing mode selected by the user; the multiple drawing modes include image mode and texture mode.

6. The method according to claim 5, characterized in that, The step of converting the drawing instructions in the layer tree into target drawing data corresponding to each component according to the target drawing mode selected by the user includes: When the user selects image mode as the drawing mode, an image drawing instruction list for drawing each component is generated based on each drawing instruction in the layer tree; the image drawing instruction list contains instructions that can be executed by the image processor GPU to draw the image of each component; The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including: Using the target callback interface, each image drawing instruction is retrieved sequentially from the image drawing instruction list stored in the cache according to the hierarchical relationship in the layer tree, and the image drawing instructions are executed by the GPU to render the page to be displayed.

7. The method according to claim 5, characterized in that, The step of converting the drawing instructions in the layer tree into target drawing data corresponding to each component according to the target drawing mode selected by the user includes: When the user selects texture mode as the drawing mode, each component corresponding to the layer tree is drawn as a shared texture based on the drawing instructions in the layer tree; The method of calling the target callback interface, according to the hierarchical relationship in the layer tree, sequentially reads the target drawing data corresponding to each component from the cache, and renders the page to be displayed based on the target drawing data, including: The target callback interface is invoked, and the shared textures corresponding to each component are read from the cache in sequence according to the hierarchical relationship in the layer tree, and the shared textures are drawn on the page to be displayed.

8. The method according to claim 1, characterized in that, Before calling the target callback interface and sequentially reading the target drawing data corresponding to each component from the cache according to the hierarchical relationship in the layer tree, the process includes: If the current system version is greater than or equal to the first target system version, use the interface creation function to create the target callback interface; The target callback interface is injected into the interface list using the function to draw the webpage view; The method of calling the target callback interface reads the target drawing data corresponding to each component from the cache sequentially according to the hierarchical relationship in the layer tree, including: The target callback interface provided by the interface list is called, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

9. The method according to claim 1, characterized in that, The method of calling the target callback interface reads the target drawing data corresponding to each component from the cache sequentially according to the hierarchical relationship in the layer tree, including: If the current system version is greater than or equal to the second target system version, the target callback interface is called in the system's native rendering thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree. If the current system version is lower than the second target system version, the target callback interface is called in the platform thread, and the target drawing data corresponding to each component is read from the cache in sequence according to the hierarchical relationship in the layer tree.

10. A page rendering apparatus, characterized in that, include: The generation module is used to generate a layer tree corresponding to the page to be displayed based on the hierarchical relationship and relative positional relationship between the components of the page to be displayed; Each component includes system native components and cross-platform self-drawing components; the layer tree includes the system native components and the cross-platform self-drawing components, used to represent the hierarchical relationship and relative positional relationship between the layers corresponding to the system native components and the layers corresponding to the cross-platform self-drawing components, as well as the drawing instructions corresponding to different layers; The conversion module is used to convert the drawing instructions in the layer tree into target drawing data corresponding to each component, and cache them; the target drawing data is drawing data in a target format that the rendering thread can render; The reading module is used to call the target callback interface, read the target drawing data corresponding to each component from the cache in sequence according to the hierarchical relationship in the layer tree, and render the page to be displayed based on the relative positional relationship between the target drawing data and the layers.

11. A computer device, characterized in that, include: The computer device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the computer device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, they perform the steps of the page rendering method as described in any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page rendering method as described in any one of claims 1 to 9.

Images