Page rendering method and device, electronic equipment and storage medium

Abstract

This application discloses a page rendering method, apparatus, electronic device, and storage medium, comprising: obtaining a first component memory canvas of a component at the same layer and a second component memory canvas of a component at a different layer; initializing a first rendering task implementation class based on the first component memory canvas using a rendering context object; initializing a second rendering task implementation class based on the second component memory canvas; creating a first rendering task and a second rendering task for the component at the same layer and the component at a different layer, respectively; rendering the first rendering task using a rendering process based on the first rendering task implementation class to obtain a first rendering result and writing it to a first cache; rendering the second rendering task using a rendering process based on the second rendering task implementation class to obtain a second rendering result and writing it to a second cache; and reading the first rendering result and the second cache result from the first cache and the second cache, respectively, to obtain the display result of the page to be rendered. This application can improve rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of computers, and more specifically to a page rendering method, apparatus, electronic device, and storage medium. Background Technology

[0002] In existing technologies, when rendering application pages that include both in-layer and non-in-layer components, two different rendering processes are often used: in-layer components are rendered using the same-layer rendering process, and non-in-layer components are rendered using a different-layer component rendering process. Specifically, the rendering process involves switching between the two rendering processes, which incurs significant performance overhead, resulting in low rendering efficiency. Summary of the Invention

[0003] This application provides a page rendering method, apparatus, electronic device, and storage medium, which can improve the problem of low rendering efficiency in the prior art.

[0004] This application provides a page rendering method for rendering a page to be rendered in an application. The page to be rendered includes components at the same layer and components at different layers. The method includes: obtaining a first component memory canvas of the components at the same layer and obtaining a second component memory canvas of the components at different layers; initializing a first rendering task implementation class based on the first component memory canvas using a rendering context object; initializing a second rendering task implementation class based on the second component memory canvas using the rendering context object; creating a first rendering task for the components at the same layer and creating a second rendering task for the components at different layers, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process executes rendering based on the order of the task list. When the rendering process executes the first rendering task, it renders the first rendering task in a unified rendering plane based on the implementation class of the first rendering task to obtain a first rendering result, and writes the first rendering result into the first cache corresponding to the memory canvas of the first component; when the rendering process executes the second rendering task, it renders the second rendering task in the unified rendering plane based on the implementation class of the second rendering task to obtain a second rendering result, and writes the second rendering result into the second cache corresponding to the memory canvas of the second component; the first rendering result is read from the first cache, and the second cache result is read from the second cache to obtain the display result of the page to be rendered.

[0005] This application provides a page rendering apparatus for rendering a page to be rendered in an application, wherein the page to be rendered includes components at the same layer and components at different layers, and the apparatus includes:

[0006] The memory canvas acquisition unit is used to acquire the first component memory canvas of the same layer component and the second component memory canvas of the non-same layer component.

[0007] The task initialization unit is used to initialize a first rendering task implementation class based on the first component's memory canvas using the rendering context object; and to initialize a second rendering task implementation class based on the second component's memory canvas using the rendering context object.

[0008] A task creation unit is used to create a first rendering task for the same-layer component and a second rendering task for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process can execute rendering based on the order of the task list.

[0009] The first rendering unit is configured to, when the rendering process executes the first rendering task, use the rendering process to render the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtain a first rendering result, and write the first rendering result into the first cache corresponding to the first component memory canvas;

[0010] The second rendering unit is used to render the second rendering task in the unified rendering plane by the rendering process based on the implementation class of the second rendering task when the rendering process executes the second rendering task, to obtain the second rendering result, and to write the second rendering result into the second cache corresponding to the memory canvas of the second component.

[0011] The display unit is configured to read the first rendering result from the first cache and the second cache result from the second cache to obtain the display result of the page to be rendered.

[0012] In one implementation, the memory canvas acquisition unit includes:

[0013] A detection creation subunit is used to create a detection object and associate the detection object with the identity identifier of the component in the same layer;

[0014] An instance receiving subunit is used to receive the component instance of the same-layer component sent by the application container using the detection object when the same-layer component is added to the rendering tree.

[0015] The first memory subunit is used to obtain the memory canvas of the first component based on the component instance of the same layer component using the detection object.

[0016] In one embodiment, the device further includes:

[0017] The first determination unit is used to determine whether a component is a component in the same layer based on the component's type identifier.

[0018] In one embodiment, the memory canvas acquisition unit further includes:

[0019] The view traversal subunit is used to traverse the view tree based on the identity of the non-same-layer component to find the component instance of the non-same-layer component;

[0020] The second memory subunit is used to obtain the memory canvas of the second component based on the component instance of the non-same-layer component.

[0021] In one embodiment, the device further includes:

[0022] The second determination unit is used to determine whether a component is a non-same-layer component based on the component's type identifier.

[0023] In one embodiment, the device further includes:

[0024] A rendering context creation unit is used to create the rendering context object using the rendering engine.

[0025] In one embodiment, the device further includes:

[0026] A unified rendering surface creation unit is used to create the unified rendering surface using the rendering engine and associate the unified rendering surface with the rendering context object.

[0027] In the page rendering method provided in this application embodiment, a first component memory canvas of components at the same layer and a second component memory canvas of components at different layers are obtained. A first rendering task implementation class is initialized based on the first component memory canvas using a rendering context object; a second rendering task implementation class is initialized based on the second component memory canvas using the same rendering context object. A first rendering task is created for components at the same layer, and a second rendering task is created for components at different layers. The first and second rendering tasks are recorded in a task list, and the rendering process executes the rendering tasks according to the task order in the task list. When the first rendering task is executed by the rendering process, the rendering process renders the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtains a first rendering result, and writes the first rendering result to the first cache of the first component memory canvas. When the second rendering task is executed by the rendering process, the same rendering process renders the second rendering task in the unified rendering plane based on the second rendering task implementation class, obtains a second rendering result, and writes the second rendering result to the second cache of the second component memory canvas. The first and second rendering results are read from the first and second caches respectively to obtain the display result of the page to be rendered.

[0028] In this embodiment, the first rendering task corresponding to the same-layer component and the second rendering task corresponding to the non-same-layer component are recorded in the same task list and executed by the same rendering process in the order of the task list. This realizes the rendering process of the same-layer component and the non-same-layer component using the same rendering process, avoids the switching between the two sets of processes, and improves rendering efficiency. Attached Figure Description

[0029] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0030] Figure 1a This is a schematic diagram illustrating an application scenario of the page rendering method provided in this application;

[0031] Figure 1b This is a flowchart illustrating the page rendering method provided in an embodiment of this application;

[0032] Figure 1c The diagram illustrates the specific process of obtaining the component's memory canvas.

[0033] Figure 2 This is a flowchart illustrating a specific embodiment of the page rendering method provided in this application;

[0034] Figure 3 This is a schematic diagram of a page rendering apparatus provided in one embodiment of this application;

[0035] Figure 4 This is a schematic diagram of the structure of the electronic device provided in the embodiments of this application. Detailed Implementation

[0036] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0037] This application provides a page rendering method, apparatus, electronic device, and storage medium.

[0038] Specifically, the page rendering device can be integrated into an electronic device, such as a terminal or server. The terminal can be a mobile phone, tablet, smart Bluetooth device, laptop, desktop computer, etc. The server can be a single server, a server cluster consisting of multiple servers, or a cloud server.

[0039] In some embodiments, the page rendering apparatus may also be integrated into multiple electronic devices, such as multiple servers, with multiple servers implementing the page rendering method of this application.

[0040] In some embodiments, the terminal can also be used as a server to implement some or all of the functions of a server.

[0041] Please see details Figure 1a The method provided in this application embodiment may include: obtaining a first component memory canvas of a component at the same layer and obtaining a second component memory canvas of a component at a different layer; initializing a first rendering task implementation class based on the first component memory canvas using a rendering context object; initializing a second rendering task implementation class based on the second component memory canvas using a rendering context object; creating a first rendering task for the component at the same layer and creating a second rendering task for the component at a different layer, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process executes rendering based on the order of the task list; when the rendering process executes the first rendering task, rendering the first rendering task based on the first rendering task implementation class in a unified rendering plane to obtain a first rendering result, and writing the first rendering result into a first cache corresponding to the first component memory canvas; when the rendering process executes the second rendering task, rendering the second rendering task based on the second rendering task implementation class in a unified rendering plane to obtain a second rendering result, and writing the second rendering result into a second cache corresponding to the second component memory canvas; reading the first rendering result from the first cache and reading the second cache result from the second cache to obtain the display result of the page to be rendered.

[0042] In the above method, the first rendering task corresponding to the same layer component and the second rendering task corresponding to the non-same layer component are recorded in the same task list and executed by the same rendering process according to the order of the task list. This realizes the rendering process of same layer components and non-same layer components using the same rendering process, avoids the switching between two sets of processes, and improves rendering efficiency.

[0043] It is understood that in the embodiments of this application, data such as user information are involved. When the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0044] The following sections provide detailed descriptions of each example. It should be noted that the sequence numbers of the following embodiments are not intended to limit the preferred order of the embodiments.

[0045] In this embodiment, a page rendering method is provided for rendering a page of an application to be rendered, wherein the page to be rendered includes components at the same layer and components at different layers. For example... Figure 1b As shown, the specific process of this method may include the following steps 110 to 160:

[0046] 110. Obtain the first component memory canvas of the same layer component and the second component memory canvas of the non-same layer component.

[0047] The application can be a mobile application, desktop application, web application, or mini-program. It should be understood that the specific type of application should not be construed as a limitation of this application. For ease of description, this application embodiment will use a mini-program as an example.

[0048] Components at the same layer are those that are rendered directly using the container's rendering mechanism. Taking a mini-program as an example, the container for a mini-program refers to the application that hosts the mini-program. This application can be a browser or other native applications. If the container for a mini-program is a browser, then the rendering mechanism of the container's environment can be: using standard web technologies such as HTML and CSS in a web environment.

[0049] Non-same-layer components are those that do not directly depend on the container's rendering mechanism, but instead complete the rendering work through an intermediate layer. Continuing with the WeChat Mini Program example, the intermediate layer can be a custom rendering engine or an intermediate layer implemented based on Canvas technology.

[0050] A page to be rendered refers to a page whose structure, style, and behavior have been defined, but which has not yet been fully processed and displayed by the application's runtime environment. A page to be rendered may include at least one component at the same level and at least one component at a different level.

[0051] A component memory canvas refers to a region in memory allocated to a component at runtime to store its current visual state information. This visual state information can include the component's visual attributes (such as color, shape, and position) and possible buffered data (such as image pixel data). Each component has its own corresponding component memory canvas. For ease of explanation, let's denote the component memory canvas of components at the same level as the first component memory canvas, and the component memory canvas of components at different levels as the second component memory canvas.

[0052] For each of at least one sibling component, its corresponding first component memory canvas can be obtained in the same way. The specific process of obtaining the first component memory canvas of a sibling component will be described in detail below.

[0053] Accordingly, for each of the at least one non-same-layer components, its corresponding second component memory canvas can be obtained in the same way. The method for obtaining the second component memory canvas of the non-same-layer components will be described in detail below.

[0054] Optionally, in one implementation, the step "obtaining the first component memory canvas of the same-layer component" may specifically include the following steps A1 to A3:

[0055] A1. Create a detection object and associate the detection object with the identity identifier of the component in the same layer.

[0056] The role of the detection object is to receive notifications from the mini-program's container. The notification content can specifically be related to state changes of components within the same layer. Optionally, the detection object can be created by registering a callback function. Specifically, when the state of a component within the same layer changes (e.g., when a component is added to the render tree), the aforementioned callback function can be triggered.

[0057] The identity identifier of a component in the same layer can be a unique identifier that represents that component. Associating a detection object with the identity identifier of a component in the same layer allows the mini-program's container to promptly notify the detection object associated with that component when the state of the component in the same layer changes.

[0058] Optionally, in one embodiment, prior to step A1, the present application embodiment may further include:

[0059] Based on the component's type identifier, a component is identified as a sibling component.

[0060] The type identifier is an identifier that represents the category of the component. Optionally, the type identifier can be represented by the symbol isEmbed. Based on the component's type identifier, it can be determined whether the component is a sibling component or a non-sibling component. If the component is determined to be a sibling component, steps A1 to A3 are then executed.

[0061] A2. When the same-layer component is added to the rendering tree, the detection object is used to receive the component instance of the same-layer component sent by the application container.

[0062] The render tree is an important data structure used by applications to determine which parts of a page need to be displayed and how they should be displayed. It determines which elements on the page need to be drawn and the style and layout of those elements.

[0063] An application container refers to the runtime environment of an application, which may include a virtual machine, rendering engine, APIs, etc. In this embodiment, the application container specifically refers to the application that hosts the mini-program.

[0064] A component instance is used to store relevant information about the corresponding component. Component instances can run in the application container's memory. Optionally, this relevant information may include: component identifier, component type, component state, methods provided by the component, etc.

[0065] When a sibling component is added to the render tree, it means that the component is ready to participate in rendering. The application container recognizes the component and, according to a pre-set detection mechanism, sends a notification to the associated detection object. The component instance, as part of the notification, is passed to the detection object by the application container, giving the detection object the ability to directly access the sibling component.

[0066] A3. Using the detection object based on the component instance of the same layer component, obtain the memory canvas of the first component.

[0067] The detected object can obtain the memory canvas by calling a setting method through a component instance. In this embodiment, the setting method can be an interface of the WeChat Mini Program platform's customized kernel; it is not a method universally present in all environments. This method is provided by the Mini Program platform to support more complex and efficient component rendering needs. Let's name the setting method called by the component instance of a component at the same layer the `getEmbedSurface` method.

[0068] In the above implementation, for components in the same layer, a detection object can be created and associated with the identity identifier of the component in the same layer. When the component in the same layer is added to the rendering tree, the detection object is used to receive the component instance of the component in the same layer, and the component instance is used to call the getEmbedSurface method to obtain the component memory canvas corresponding to the component in the same layer.

[0069] Optionally, in one implementation, the step "obtaining the second component memory canvas of the non-same-layer component" may specifically include the following steps B1 to B2:

[0070] B1. Traverse the view tree based on the identity identifier of the non-same-layer component to find the component instance of the non-same-layer component.

[0071] A view tree is a hierarchical representation of the visual elements in an application. Traversing a view tree means starting from the root node and recursively visiting every node in the view tree until a component instance that matches the identity of a non-sibling component is found.

[0072] Optionally, in one implementation, prior to step B1, the present application embodiment may further include: determining a component as a non-same-layer component based on the component's type identifier.

[0073] The type identifier is an identifier that represents the category of the component. Optionally, the type identifier can be represented by the symbol isEmbed. Based on the component's type identifier, it can be determined whether the component is a sibling component or a non-sibling component. If it is determined that the component is a non-sibling component, then steps B1 to B2 are executed.

[0074] B2. Based on the component instance of the non-same-layer component, obtain the memory canvas of the second component.

[0075] The memory canvas can be obtained by calling a setting method using a component instance. In this embodiment, the setting method may be an interface of the WeChat Mini Program platform's customized kernel; it is not a method universally present in all environments. This method is provided by the Mini Program platform to support more complex and efficient component rendering needs. In this embodiment, the setting method called by the component instance of a component at the same level can be different from the setting method called by the component instance of a component at a different level. Let's name the setting method called by the component instance of a component at a different level the getView method.

[0076] In the above implementation, for non-same-layer components, the view tree can be traversed based on the identity of the non-same-layer component to find the component instance of the non-same-layer component, and the component memory canvas of the non-same-layer component can be obtained by calling the getView method using the component instance of the non-same-layer component.

[0077] Optionally, in one specific implementation, the corresponding component memory canvas can be obtained for a component through methods such as... Figure 1c The method shown is as follows:

[0078] S1. Get the type identifier of the component.

[0079] S2. Based on the category identifier, determine whether the component is a component in the same layer. If yes, proceed to step S3; otherwise, proceed to step S6.

[0080] S3. Create a detection object and associate the detection object with the identity identifier of the component in the same layer.

[0081] S4. When the same-layer component is added to the rendering tree, the component instance of the same-layer component sent by the application container is received using the detection object.

[0082] S5. Using the detection object based on the component instance of the same layer component, obtain the memory canvas of the first component.

[0083] Steps S3 to S5 are the same as steps A1 to A3 above, and will not be repeated here.

[0084] S6. Traverse the view tree based on the identity identifier of the non-same-layer component to find the component instance of the non-same-layer component.

[0085] S7. Based on the component instance of the non-same-layer component, obtain the memory canvas of the second component.

[0086] Steps S6 to S7 are the same as steps B1 to B2 above, and will not be described again here.

[0087] S8, Associated rendering context.

[0088] By associating the first component memory canvas of the same-layer component and the second component memory canvas of the non-same-layer component with the rendering context, preparations can be made for subsequent rendering steps, further improving rendering efficiency.

[0089] Prior to step 110, this embodiment of the application may further include: obtaining the identity identifier and type identifier of the same-layer component, and obtaining the identity identifier and type identifier of the non-same-layer component.

[0090] Both the component's identity and type identifier can be obtained from the UI view tree corresponding to the component. Each component has a specific location within the UI view tree. By traversing the UI view tree, each component can be accessed, and its identity can be directly obtained based on its location. Optionally, by traversing the UI view tree, the component's type can be identified based on its position in the tree. This is because each component carries metadata about its type, such as its class name and tag name.

[0091] 120. Using the rendering context object, initialize the first rendering task implementation class based on the first component's memory canvas; using the rendering context object, initialize the second rendering task implementation class based on the second component's memory canvas.

[0092] A rendering context object is responsible for managing and coordinating rendering-related operations. These operations include drawing state management, resource management, and API provisioning. Drawing state management includes managing states such as color, font, and transformation matrices; resource management includes managing textures and buffers; and the API is the interface used to execute specific drawing commands. For example, in HTML5 Canvas, CanvasRenderingContext2D is the rendering context object used for 2D drawing.

[0093] The rendering task implementation class is used to implement the rendering logic of the corresponding component. Each component has its own corresponding rendering task implementation class. This class encapsulates the necessary operations related to the rendering task to ensure that the rendering process is efficient and easy to manage. Specifically, the first rendering task implementation class is used to implement the rendering logic of the component corresponding to the first component's memory canvas; the second rendering task implementation class is used to implement the rendering logic of the component corresponding to the second component's memory canvas.

[0094] Specifically, the first rendering task implementation class is initialized based on the first component's memory canvas using the rendering context object. This includes defining a new class named "First Rendering Task Implementation Class," which can receive the rendering context object and the first component's memory canvas as parameters and provides necessary interfaces to configure and execute rendering logic. Optionally, the initialization of the first rendering task implementation class may include setting drawing states such as color, font, and transformation matrix; configuring resources such as textures and buffers; and binding it to the first component's memory canvas. The first rendering task implementation class can implement the rendering of text, shapes, and images of components at the same layer as the first component's memory canvas.

[0095] Specifically, the second rendering task implementation class is initialized based on the second component's memory canvas using the rendering context object. This includes defining a new class named "Second Rendering Task Implementation Class," which can receive the rendering context object and the second component's memory canvas as parameters and provides necessary interfaces to configure and execute rendering logic. Optionally, the initialization operations of the second rendering task implementation class may include: setting drawing states such as color, font, and transformation matrix; configuring resources such as textures and buffers; and binding it to the second component's memory canvas. The second rendering task implementation class can implement the rendering of text, shapes, and images of non-same-layer components corresponding to the second component's memory canvas.

[0096] Optionally, in one implementation, the page rendering method provided in this application embodiment can be implemented by the same rendering engine. Accordingly, before step 120, this application embodiment may further include: creating the rendering context object using the rendering engine.

[0097] Both rendering of components at the same layer and rendering of components at different layers can be achieved using the same rendering engine. For ease of description, let's refer to the rendering engine mentioned above as the hybrid rendering engine. Continuing with the example above, let's take a mini-program as an example. When the mini-program starts, the mini-program container initializes the hybrid rendering engine mentioned above.

[0098] In the above embodiment, compared with the prior art, which uses the same-layer rendering engine to render components of the same layer and uses a different-layer rendering engine to render components of different layers, this embodiment can avoid switching between different rendering engines and further improve rendering efficiency.

[0099] Optionally, in one implementation, after the step "creating the rendering context object using the rendering engine", the method provided in this application embodiment may further include:

[0100] The unified rendering surface is created using the rendering engine, and then associated with the unified rendering surface and the rendering context object.

[0101] A rendering surface refers to the location corresponding to the rendering process. In this embodiment, both components on the same layer and components on different layers can perform rendering operations on the same rendering surface. The aforementioned rendering surface is named the unified rendering surface.

[0102] Associating a uniform rendering surface with a specific rendering context object ensures that all drawing commands executed through that rendering context object apply to the specified rendering surface (i.e., the uniform rendering surface). This association can be accomplished via API calls, informing the hybrid rendering engine which rendering surface should be the target of the current drawing.

[0103] 130. Create a first rendering task for the same-layer component and a second rendering task for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process executes rendering based on the order of the task list.

[0104] The hybrid rendering engine creates corresponding rendering tasks for each component, creating multiple rendering tasks in total, and storing these tasks in a task list. The rendering process of the hybrid rendering engine then executes these multiple rendering tasks sequentially based on the order of the task list.

[0105] In the process of creating multiple rendering tasks, the hybrid rendering engine creates a first rendering task for a component on the same layer in this embodiment and a second rendering task for a component on a different layer in this embodiment. The first rendering task, the second rendering task, and the rendering tasks corresponding to other components are recorded together in a task list, waiting for the rendering process to execute them sequentially.

[0106] 140. When the rendering process executes the first rendering task, it uses the rendering process to render the first rendering task in a unified rendering plane based on the implementation class of the first rendering task, obtains the first rendering result, and writes the first rendering result into the first cache corresponding to the memory canvas of the first component.

[0107] The first rendering task implementation class is the class that implements the rendering logic of the component corresponding to the first component's memory canvas. When the rendering process executes the first rendering task in the order of the task list, it can render the first rendering task within the unified rendering plane based on the rendering logic of the first rendering task implementation class, thereby obtaining the rendering result; this rendering result is recorded as the first rendering result. The rendering process writes the first rendering result into the first cache corresponding to the first component's memory canvas.

[0108] 150. When the rendering process executes the second rendering task, it uses the rendering process to render the second rendering task in the unified rendering surface based on the implementation class of the second rendering task, obtains the second rendering result, and writes the second rendering result into the second cache corresponding to the memory canvas of the second component.

[0109] The second rendering task implementation class is the class that implements the rendering logic of the component corresponding to the second component's memory canvas. When the rendering process executes the second rendering task in the order of the task list, it can render the second rendering task within the unified rendering plane based on the rendering logic of the second rendering task implementation class, thereby obtaining the rendering result; this rendering result is recorded as the second rendering result. The rendering process writes the second rendering result into the second cache corresponding to the second component's memory canvas.

[0110] 160. Read the first rendering result from the first cache and read the second cache result from the second cache to obtain the display result of the page to be rendered.

[0111] Optionally, the first rendering result can be read from the first cache by executing the UI refresh method of the component at the same layer; and the second rendering result can be read from the second cache by executing the UI refresh method of the component at a different layer. The UI refresh method refers to one or more methods defined within the corresponding component, which are responsible for triggering the redrawing or updating of the corresponding component. Optionally, the UI refresh method can check if there is new data to be displayed, and then call the corresponding drawing API to update the visual representation of the component. After the visual representations of both the component at the same layer and the component at a different layer have been updated, the display result of the page to be rendered can be obtained.

[0112] In the embodiments of this application, steps 130 to 160 described above can be executed for each same-layer component and each non-same-layer component until the rendering of all components is completed or until the components are destroyed.

[0113] In the page rendering method provided in this application embodiment, a first component memory canvas of components at the same layer and a second component memory canvas of components at different layers are obtained. A first rendering task implementation class is initialized based on the first component memory canvas using a rendering context object; a second rendering task implementation class is initialized based on the second component memory canvas using the same rendering context object. A first rendering task is created for components at the same layer, and a second rendering task is created for components at different layers. The first and second rendering tasks are recorded in a task list, and the rendering process executes the rendering tasks according to the task order in the task list. When the first rendering task is executed by the rendering process, the rendering process renders the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtains a first rendering result, and writes the first rendering result to the first cache of the first component memory canvas. When the second rendering task is executed by the rendering process, the same rendering process renders the second rendering task in the unified rendering plane based on the second rendering task implementation class, obtains a second rendering result, and writes the second rendering result to the second cache of the second component memory canvas. The first and second rendering results are read from the first and second caches respectively to obtain the display result of the page to be rendered. In this embodiment, the first rendering task corresponding to the same-layer component and the second rendering task corresponding to the non-same-layer component are recorded in the same task list and executed by the same rendering process in the order of the task list. This realizes the rendering process of the same-layer component and the non-same-layer component using the same rendering process, avoiding the switching between the two sets of processes.

[0114] The embodiments of this application can improve rendering efficiency.

[0115] In this embodiment, the method of this application embodiment will be described in detail. The page rendering method provided in this application embodiment can be executed by an electronic device. In this embodiment, the electronic device is a terminal device as an example for description, such as... Figure 2 As shown, the specific process of a page rendering method is as follows:

[0116] 201. Based on the component's type identifier, determine if a component is a component in the same layer.

[0117] 202. Create a detection object and associate the detection object with the identity identifier of the component in the same layer.

[0118] 203. When the same-layer component is added to the rendering tree, the component instance of the same-layer component is received by the application container using the detection object.

[0119] 204. Using the detection object based on the component instance of the same layer component, obtain the memory canvas of the first component.

[0120] 205. Determine whether a component is a non-same-level component based on its type identifier.

[0121] 206. Traverse the view tree based on the identity identifier of the non-same-layer component to find the component instance of the non-same-layer component.

[0122] 207. Based on the component instance of the non-same-layer component, obtain the memory canvas of the second component.

[0123] 208. Create the rendering context object using the rendering engine.

[0124] 209. Using the rendering context object, initialize the first rendering task implementation class based on the first component's memory canvas.

[0125] 210. Using the rendering context object, initialize the second rendering task implementation class based on the second component's memory canvas.

[0126] 211. Create a first rendering task for the same-layer component and a second rendering task for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process executes rendering based on the order of the task list.

[0127] 212. Use the rendering engine to create the unified rendering surface and associate the unified rendering surface with the rendering context object.

[0128] 213. When the rendering process executes the first rendering task, it uses the rendering process to render the first rendering task in a unified rendering plane based on the first rendering task implementation class to obtain the first rendering result.

[0129] 214. Write the first rendering result into the first cache corresponding to the memory canvas of the first component.

[0130] 215. When the rendering process executes the second rendering task, the rendering process renders the second rendering task based on the implementation class of the second rendering task in the unified rendering surface to obtain the second rendering result.

[0131] 216. Write the second rendering result into the second cache corresponding to the memory canvas of the second component.

[0132] 217. Read the first rendering result from the first cache and read the second cache result from the second cache to obtain the display result of the page to be rendered.

[0133] The specific execution process of steps 201 to 217 has been explained in detail above, and will not be repeated here.

[0134] In the page rendering method provided in this application embodiment, a first component memory canvas of components at the same layer and a second component memory canvas of components at different layers are obtained. A first rendering task implementation class is initialized based on the first component memory canvas using a rendering context object; a second rendering task implementation class is initialized based on the second component memory canvas using the same rendering context object. A first rendering task is created for components at the same layer, and a second rendering task is created for components at different layers. The first and second rendering tasks are recorded in a task list, and the rendering process executes the rendering tasks according to the task order in the task list. When the first rendering task is executed by the rendering process, the rendering process renders the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtains a first rendering result, and writes the first rendering result to the first cache of the first component memory canvas. When the second rendering task is executed by the rendering process, the same rendering process renders the second rendering task in the unified rendering plane based on the second rendering task implementation class, obtains a second rendering result, and writes the second rendering result to the second cache of the second component memory canvas. The first and second rendering results are read from the first and second caches respectively to obtain the display result of the page to be rendered. In this embodiment, the first rendering task corresponding to the same-layer component and the second rendering task corresponding to the non-same-layer component are recorded in the same task list and executed by the same rendering process in the order of the task list. This realizes the rendering process of the same-layer component and the non-same-layer component using the same rendering process, avoiding the switching between the two sets of processes.

[0135] The embodiments of this application can improve rendering efficiency.

[0136] To better implement the above methods, embodiments of this application also provide a page rendering apparatus, such as... Figure 3 As shown, the device includes:

[0137] The memory canvas acquisition unit 301 is used to acquire the first component memory canvas of the same layer component and the second component memory canvas of the non-same layer component.

[0138] The task class initialization unit 302 is used to initialize a first rendering task implementation class based on the first component memory canvas using the rendering context object; and to initialize a second rendering task implementation class based on the second component memory canvas using the rendering context object.

[0139] The task creation unit 303 is used to create a first rendering task for the same-layer component and a second rendering task for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process can execute rendering based on the order of the task list.

[0140] The first rendering unit 304 is used to render the first rendering task in a unified rendering plane based on the first rendering task implementation class when the rendering process executes the first rendering task, to obtain a first rendering result, and to write the first rendering result into the first cache corresponding to the first component memory canvas.

[0141] The second rendering unit 305 is used to render the second rendering task in the unified rendering surface by the rendering process based on the implementation class of the second rendering task when the rendering process executes the second rendering task, to obtain the second rendering result, and to write the second rendering result into the second cache corresponding to the memory canvas of the second component.

[0142] Display unit 306 is used to read the first rendering result from the first cache and the second cache result from the second cache to obtain the display result of the page to be rendered.

[0143] In one embodiment, the memory canvas acquisition unit 301 includes:

[0144] A detection creation subunit is used to create a detection object and associate the detection object with the identity identifier of the component in the same layer;

[0145] An instance receiving subunit is used to receive the component instance of the same-layer component sent by the application container using the detection object when the same-layer component is added to the rendering tree.

[0146] The first memory subunit is used to obtain the memory canvas of the first component based on the component instance of the same layer component using the detection object.

[0147] In one embodiment, the device further includes:

[0148] The first determination unit is used to determine whether a component is a component in the same layer based on the component's type identifier.

[0149] In one embodiment, the memory canvas acquisition unit 301 further includes:

[0150] The view traversal subunit is used to traverse the view tree based on the identity of the non-same-layer component to find the component instance of the non-same-layer component;

[0151] The second memory subunit is used to obtain the memory canvas of the second component based on the component instance of the non-same-layer component.

[0152] In one embodiment, the device further includes:

[0153] The second determination unit is used to determine whether a component is a non-same-layer component based on the component's type identifier.

[0154] In one embodiment, the device further includes:

[0155] A rendering context creation unit is used to create the rendering context object using the rendering engine.

[0156] In one embodiment, the device further includes:

[0157] A unified rendering surface creation unit is used to create the unified rendering surface using the rendering engine and associate the unified rendering surface with the rendering context object.

[0158] In practice, each of the above units can be implemented as an independent entity or can be arbitrarily combined to be implemented as the same or several entities. For the specific implementation of each of the above units, please refer to the previous method embodiments, which will not be repeated here.

[0159] In the page rendering method provided in this application embodiment, a first component memory canvas of components at the same layer and a second component memory canvas of components at different layers are obtained. A first rendering task implementation class is initialized based on the first component memory canvas using a rendering context object; a second rendering task implementation class is initialized based on the second component memory canvas using the same rendering context object. A first rendering task is created for components at the same layer, and a second rendering task is created for components at different layers. The first and second rendering tasks are recorded in a task list, and the rendering process executes the rendering tasks according to the task order in the task list. When the first rendering task is executed by the rendering process, the rendering process renders the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtains a first rendering result, and writes the first rendering result to the first cache of the first component memory canvas. When the second rendering task is executed by the rendering process, the same rendering process renders the second rendering task in the unified rendering plane based on the second rendering task implementation class, obtains a second rendering result, and writes the second rendering result to the second cache of the second component memory canvas. The first and second rendering results are read from the first and second caches respectively to obtain the display result of the page to be rendered. In this embodiment, the first rendering task corresponding to the same-layer component and the second rendering task corresponding to the non-same-layer component are recorded in the same task list and executed by the same rendering process in the order of the task list. This realizes the rendering process of the same-layer component and the non-same-layer component using the same rendering process, avoiding the switching between the two sets of processes.

[0160] The embodiments of this application can improve rendering efficiency.

[0161] This application also provides an electronic device. In this embodiment, a server will be used as an example for detailed description. For example, ... Figure 4 As shown, it illustrates a structural schematic diagram of the electronic device involved in the embodiments of this application, specifically:

[0162] The electronic device may include components such as a processor 401 with one or more processing cores, a memory 402 with one or more computer-readable storage media, a power supply 403, an input module 404, and a communication module 405. Those skilled in the art will understand that... Figure 4 The electronic device structure shown does not constitute a limitation on the electronic device and may include more or fewer components than shown, or combine certain components, or have different component arrangements. Wherein:

[0163] The processor 401 is the control center of the electronic device, connecting various parts of the device via various interfaces and lines. It performs various functions and processes data by running or executing software programs and / or modules stored in the memory 402, and by calling data stored in the memory 402. In some embodiments, the processor 401 may include one or more processing cores; in some embodiments, the processor 401 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may also not be integrated into the processor 401.

[0164] The memory 402 can be used to store software programs and modules. The processor 401 executes various functional applications and page rendering model training by running the software programs and modules stored in the memory 402. The memory 402 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 402 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 402 may also include a memory controller to provide the processor 401 with access to the memory 402.

[0165] The electronic device also includes a power supply 403 that supplies power to the various components. In some embodiments, the power supply 403 can be logically connected to the processor 401 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. The power supply 403 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0166] The electronic device may also include an input module 404, which can be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

[0167] The electronic device may also include a communication module 405. In some embodiments, the communication module 405 may include a wireless module, through which the electronic device can perform short-range wireless transmission, thereby providing users with wireless broadband internet access. For example, the communication module 405 can be used to help users send and receive emails, browse web pages, and access streaming media.

[0168] Although not shown, the electronic device may also include a display unit, etc., which will not be described in detail here. Specifically, in this embodiment, the processor 401 in the electronic device loads the executable files corresponding to the processes of one or more applications into the memory 402 according to the following instructions, and the processor 401 runs the applications stored in the memory 402, thereby realizing the various functions in the various method embodiments of this application.

[0169] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0170] Therefore, embodiments of this application provide a computer-readable storage medium storing instructions that can be loaded by a processor to perform steps in any of the page rendering methods provided in this application. For example, the instructions can perform various steps in the various method embodiments of this application.

[0171] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0172] According to one aspect of this application, a computer program product or computer program is provided, comprising instructions stored in a computer-readable storage medium. A processor of a computer device reads the instructions from the computer-readable storage medium and executes the instructions, causing the computer device to perform the methods provided in the various optional implementations of the above embodiments.

[0173] Since the instructions stored in the storage medium can execute the steps in any of the page rendering methods provided in the embodiments of this application, the beneficial effects that any of the page rendering methods provided in the embodiments of this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0174] In this application embodiment, the terms "module" or "unit" refer to a computer program or part of a computer program that has a predetermined function and works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functionality of that module or unit.

[0175] The foregoing has provided a detailed description of a page rendering method, apparatus, electronic device, and computer-readable storage medium provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the embodiments above are only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A page rendering method, characterized in that, The method is used to render a page of an application to be rendered, the page to be rendered including components at the same layer and components at different layers, and includes: Obtain the first component memory canvas of the same layer component, and obtain the second component memory canvas of the non-same layer component; The first rendering task implementation class is initialized using the rendering context object based on the first component's memory canvas; the second rendering task implementation class is initialized using the rendering context object based on the second component's memory canvas. A first rendering task is created for the same-layer component, and a second rendering task is created for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process executes rendering based on the order of the task list; When the rendering process executes the first rendering task, it uses the rendering process to render the first rendering task in a unified rendering plane based on the first rendering task implementation class to obtain the first rendering result, and writes the first rendering result into the first cache corresponding to the first component memory canvas; When the rendering process executes the second rendering task, it uses the rendering process to render the second rendering task in the unified rendering plane based on the implementation class of the second rendering task, obtains the second rendering result, and writes the second rendering result into the second cache corresponding to the memory canvas of the second component. The first rendering result is read from the first cache, and the second cache result is read from the second cache to obtain the display result of the page to be rendered.

2. The method as described in claim 1, characterized in that, The step of obtaining the first component memory canvas of the same layer component includes: Create a detection object and associate the detection object with the identity identifier of the component in the same layer; When the same-layer component is added to the rendering tree, the component instance of the same-layer component is received by the application container using the detection object; The memory canvas of the first component is obtained by using the component instance of the detection object based on the same layer component.

3. The method as described in claim 2, characterized in that, Before creating the detection object and associating the detection object with the identity identifier of the same-layer component, the method further includes: Based on the component's type identifier, a component is identified as a sibling component.

4. The method as described in claim 1, characterized in that, The step of obtaining the second component memory canvas of the non-same-layer component includes: Based on the identity identifier of the non-same-level component, traverse the view tree to find the component instance of the non-same-level component; Based on the component instance of the non-same-layer component, obtain the memory canvas of the second component.

5. The method as described in claim 4, characterized in that, Before traversing the view tree based on the identity of the non-same-level component to find the component instance of the non-same-level component, the method further includes: Based on the component's type identifier, a component is determined to be a non-same-level component.

6. The method as described in claim 1, characterized in that, The page rendering methods are implemented using the same rendering engine.

7. The method as described in claim 6, characterized in that, The first rendering task implementation class is initialized using the rendering context object based on the first component's memory canvas; Before initializing the second rendering task implementation class based on the second component's memory canvas using the rendering context object, the method further includes: The rendering context object is created using the rendering engine.

8. The method as described in claim 7, characterized in that, After creating the rendering context object using the rendering engine, and before rendering the first rendering task using the rendering process in a unified rendering plane based on the implementation class of the first rendering task when the rendering process executes the first rendering task, obtaining a first rendering result, and writing the first rendering result into the first cache corresponding to the first component's memory canvas, the method further includes: The unified rendering surface is created using the rendering engine, and then associated with the unified rendering surface and the rendering context object.

9. A page rendering device, characterized in that, The apparatus is used to render a page of an application to be rendered, the page including components at the same layer and components at different layers, and the apparatus includes: A memory canvas acquisition unit is used to acquire the first component memory canvas of the same-layer component and the second component memory canvas of the non-same-layer component. The task initialization unit is used to initialize a first rendering task implementation class based on the first component's memory canvas using the rendering context object; and to initialize a second rendering task implementation class based on the second component's memory canvas using the rendering context object. A task creation unit is used to create a first rendering task for the same-layer component and a second rendering task for the non-same-layer component, wherein the first rendering task and the second rendering task are recorded in a task list so that the rendering process can execute rendering based on the order of the task list. The first rendering unit is configured to, when the rendering process executes the first rendering task, use the rendering process to render the first rendering task in a unified rendering plane based on the first rendering task implementation class, obtain a first rendering result, and write the first rendering result into the first cache corresponding to the first component memory canvas; The second rendering unit is used to render the second rendering task in the unified rendering plane by the rendering process based on the implementation class of the second rendering task when the rendering process executes the second rendering task, to obtain the second rendering result, and to write the second rendering result into the second cache corresponding to the memory canvas of the second component. The display unit is configured to read the first rendering result from the first cache and the second cache result from the second cache to obtain the display result of the page to be rendered.

10. An electronic device, characterized in that, It includes a processor and a memory, the memory storing instructions; the processor loads instructions from the memory to perform the steps in the page rendering method as described in any one of claims 1 to 8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores instructions adapted for loading by a processor to perform the steps of the page rendering method according to any one of claims 1 to 8.

12. A computer program product, characterized in that, It includes instructions that, when executed by a processor, implement the steps of the page rendering method according to any one of claims 1 to 8.

Images