Page display processing method, device, equipment, related medium and program product

Abstract

The present disclosure provides a page display processing method, device, equipment, related medium and program product. The page display processing method comprises: in response to a request for displaying a page on a calling application, obtaining a first page element incompatible with a first format of a calling side rendering engine from the request; constructing a first rendering tree corresponding to the first page element through a third party rendering engine, a first rendering node in the first rendering tree being compatible with a second format of the third party rendering engine; obtaining the first rendering tree from the third party rendering engine; converting the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree comprising a plurality of second rendering nodes, the second rendering node being compatible with the first format; and rendering the first page element by using the first format based on the plurality of second rendering nodes in the second rendering tree through the calling side rendering engine, so as to display the page on the calling application. The present disclosure can improve the display accuracy of the page element on the page.

Description

Technical Field

[0001] This disclosure relates to the field of computers, and in particular to a page display processing method, apparatus, device, related media, and program product. Background Technology

[0002] In the field of computer science, calling applications often need to display various page elements on a webpage to achieve purposes such as content display and object interaction. For example, online document pages need to display page elements such as shapes, text boxes, images, tables, and charts. Due to limitations in development costs and development cycles, the rendering engines built into calling applications often only support rendering relatively simple page elements (such as shapes, text boxes, and images) and cannot render more complex page elements (such as charts).

[0003] To address this, solutions typically involve integrating a mature third-party rendering engine to render more complex page elements. However, since the third-party rendering engine and the rendering engine built into the calling application are different, the page elements rendered by the third-party engine (referred to as the first page element) and the page elements rendered by the calling application's built-in rendering engine (referred to as the second page element) usually cannot be adjusted in terms of hierarchy. This can easily lead to display errors, such as the first page element incorrectly covering the second page element. Summary of the Invention

[0004] This disclosure provides a page display processing method, apparatus, device, related medium, and program product that can improve the display accuracy of page elements on a page.

[0005] According to one aspect of this disclosure, a page display processing method is provided, comprising: In response to a request to display a page on the calling application, a first page element that is incompatible with a first format of the calling rendering engine is obtained from the request; A first rendering tree corresponding to the first page element is constructed using a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. Obtain the first rendering tree from the third-party rendering engine; The first rendering node in the first rendering tree is converted into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, wherein the second rendering nodes are compatible with the first format; The caller rendering engine renders the first page element using the first format based on multiple second rendering nodes in the second rendering tree to display the page on the caller application.

[0006] According to one aspect of this disclosure, a page display processing apparatus is provided, comprising: The page element acquisition module is used to, in response to a request to display a page on the calling application, acquire a first page element from the request that is incompatible with a first format of the calling rendering engine; The rendering tree construction module is used to construct a first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. A rendering tree acquisition module is used to acquire the first rendering tree from the third-party rendering engine; The rendering tree conversion module is used to convert the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, wherein the second rendering nodes are compatible with the first format. The rendering tree application module is used to render the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller rendering engine, so as to display the page on the caller application.

[0007] In the above solution, the page display processing device also includes an event interaction module, used for: Receive the first interaction event for the first page element; The first rendering tree is updated based on the first interaction event using the third-party rendering engine, so that the first page element is re-rendered based on the updated first rendering tree.

[0008] In the above scheme, the event interaction module is further used for: Determine the event type of the first interaction event; Among the multiple first rendering nodes, determine the first event consumer node that has registered the event processing interface corresponding to the event type; The first interactive event is passed to the event processing interface registered by the first event consumer node, so as to perform an interactive action on the first interactive event through the event processing interface. The interactive action is used to update the first rendering tree.

[0009] In the above scheme, the event interaction module is further used for: Among the multiple first rendering nodes, determine the first event source node that triggered the first interaction event; When the first event source node has registered the event processing interface, the first event source node is determined as the first event consumer node; When the first event source node has not registered the event processing interface, the first event consumer node that has registered the event processing interface is determined from the ancestor nodes of the first event source node.

[0010] In the above scheme, the event interaction module is further used for: The second event source node that triggered the first interaction event is determined from among multiple second rendering nodes through the caller rendering engine. The third-party rendering engine queries the second event source node determined by the calling rendering engine, and the first rendering node used to convert to obtain the second event source node is determined as the first event source node that triggers the first interactive event.

[0011] In the above scheme, the event interaction module is further used for: Determine the interaction location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple second rendering nodes respectively; The rendering position that successfully matches the interaction position is determined, and the second rendering node corresponding to the successfully matched rendering position is determined as the second event source node that triggers the first interaction event.

[0012] In the above solution, the page display processing device also includes an off-screen rendering module, used for: Through the calling party rendering engine, based on multiple second rendering nodes in the second rendering tree, the first page element is rendered off-screen using the first format to generate an off-screen page, wherein the multiple second rendering nodes on the off-screen page correspond to different node color values ​​respectively; The event interaction module is also used for: Determine the interaction position of the first interactive event on the off-screen page, and determine the color value on the off-screen page corresponding to the interaction position as the interaction color value; The node color value that successfully matches the interactive color value is determined, and the second rendering node corresponding to the successfully matched node color value is determined as the second event source node that triggers the first interactive event.

[0013] In the above scheme, the event interaction module is further used for: Determine the interaction location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple first rendering nodes respectively; The rendering position that successfully matches the interaction position is determined, and the first rendering node corresponding to the successfully matched rendering position is determined as the first event source node that triggers the first interaction event.

[0014] In the above scheme, the event type of the first interaction event is the target caller event type, and the event interaction module is further used for: Among multiple general event types, a target general event type corresponding to the target caller event type is determined, wherein the target caller event type is one of multiple caller event types, and the multiple caller event types correspond to different general event types; Update the event type of the first interaction event from the target caller event type to the target general event type.

[0015] In the above solution, the page element acquisition module is further configured to: Obtain a second page element compatible with the first format from the request; The rendering tree construction module is also used for: The third rendering tree corresponding to the second page element is constructed through the calling party rendering engine. The third rendering tree includes multiple third rendering nodes, and the third rendering nodes are compatible with the first format. The rendering tree application module is also used for: The second page element is rendered using the first format through the caller rendering engine, based on multiple third rendering nodes in the third rendering tree.

[0016] In the above solution, the page display processing device further includes an event interaction module, used for: Receive the second interactive event for the second page element; The calling rendering engine updates the third rendering tree based on the second interaction event, and then re-renders the second page element based on the updated third rendering tree.

[0017] In the above scheme, the rendering tree conversion module is further used for: The first rendering node in the first rendering tree is converted into a second rendering node mounted on the page container, wherein the page container belongs to the page; The rendering tree application module is also used for: The first page element is rendered to the page container using the first format through the caller rendering engine, based on multiple second rendering nodes in the second rendering tree, so as to display the page on the caller application.

[0018] In the above scheme, the page display processing device further includes an update display module, used for: The first rendering tree is updated using the third-party rendering engine. The update information is obtained from the third-party rendering engine, and the update information is used to represent the difference information between the updated first rendering tree and the first rendering tree before the update. The caller's rendering engine updates the second rendering tree based on the update information, and then re-renders the first page element based on the updated second rendering tree.

[0019] In the above solution, the page display processing device further includes a storage module, used for: The second rendering tree is stored. The page display processing device further includes a multiplexing module for: In response to a request to redisplay the page on the calling application, the stored second rendering tree is retrieved, and the first page element is rendered using the first format based on a plurality of second rendering nodes in the second rendering tree through the calling rendering engine, so as to redisplay the page on the calling application.

[0020] In the above scheme, the rendering tree acquisition module is further used for: The first rendering tree is sent through the rendering context interface via the third-party rendering engine, and the rendering context interface is created by the calling rendering engine; The caller's rendering engine receives the first rendering tree through the rendering context interface.

[0021] In the above scheme, the third-party rendering engine is encapsulated in a software development kit, and the rendering tree acquisition module is further used for: The caller's rendering engine invokes the interface provided by the software development kit to obtain the first rendering tree output by the software development kit.

[0022] According to one aspect of this disclosure, an electronic device is provided, including a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the page display processing method as described above.

[0023] According to one aspect of this disclosure, a computer-readable storage medium is provided, the computer-readable storage medium storing a computer program that, when executed by a processor, implements the page display processing method as described above. According to one aspect of this disclosure, a computer program product is provided, the computer program product including a computer program that is read and executed by a processor of an electronic device, causing the electronic device to perform the page display processing method as described above.

[0024] In this embodiment of the disclosure, in response to a request to display a page on the calling application, a first page element that is incompatible with the first format of the calling rendering engine is obtained from the request. Considering that the calling rendering engine does not have the ability to construct a rendering tree corresponding to the first page element, this embodiment of the disclosure constructs the first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes. The first rendering nodes are compatible with the second format of the third-party rendering engine but not with the first format of the calling rendering engine; therefore, the first rendering nodes cannot be recognized and utilized by the calling rendering engine. Based on this, the first rendering nodes in the first rendering tree are converted into second rendering nodes, resulting in a second rendering tree including multiple second rendering nodes. The second rendering nodes are compatible with the first format of the calling rendering engine. Thus, the first rendering tree incompatible with the first format of the calling rendering engine can be converted into a compatible second rendering tree. Finally, the calling rendering engine renders the first page element using the first format based on the multiple second rendering nodes in the second rendering tree to display the page on the calling application. Since the first page element is rendered by the calling rendering engine, it can freely adjust the display layer and avoid error overlay problems with other page elements. That is, the embodiments of this disclosure can improve the display accuracy of page elements on the page.

[0025] Other features and advantages of this disclosure will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the disclosure. The objectives and other advantages of this disclosure may be realized and obtained by means of the structures particularly pointed out in the description, claims and drawings. Attached Figure Description

[0026] The accompanying drawings are provided to further understand the technical solutions of this disclosure and constitute a part of the specification. They are used together with the embodiments of this disclosure to explain the technical solutions of this disclosure and do not constitute a limitation on the technical solutions of this disclosure. Figure 1 This is a system architecture diagram of the page display processing method applied according to the embodiments of this disclosure; Figure 2 This is a schematic diagram illustrating the application of the page display processing method according to embodiments of the present disclosure to an online document scenario; Figure 3 This is a schematic diagram illustrating the application of the page display processing method according to embodiments of the present disclosure to an online map scenario; Figure 4 This is a schematic diagram illustrating the display effect according to an embodiment of the present disclosure; Figure 5 This is another schematic diagram illustrating the display effect according to an embodiment of the present disclosure; Figure 6 This is a general flowchart of a page display processing method according to an embodiment of the present disclosure; Figure 7 This is a schematic diagram of a first rendering tree according to an embodiment of the present disclosure; Figure 8 This is a schematic diagram illustrating the construction of a rendering tree using a third-party rendering engine according to an embodiment of this disclosure; Figure 9 This is a schematic diagram illustrating the construction of a rendering tree through a calling rendering engine according to an embodiment of this disclosure; Figure 10 This is a schematic diagram illustrating the conversion of a first rendering tree into a second rendering tree according to an embodiment of the present disclosure; Figure 11 This is a schematic diagram illustrating the acquisition of a first rendering tree via a rendering context interface according to an embodiment of this disclosure; Figure 12 This is a schematic diagram of obtaining a first rendering tree from a software development kit according to an embodiment of the present disclosure; Figure 13 Is Figure 6 The flowchart shown illustrates the interaction that occurs after step 650; Figure 14 This is a schematic diagram of updating a graph via a first interactive event according to an embodiment of the present disclosure; Figure 15 This is another schematic diagram illustrating the updating of a graph via a first interactive event according to an embodiment of this disclosure; Figure 16 This is a schematic diagram of position matching according to an embodiment of the present disclosure; Figure 17 Is Figure 6 The flowchart for rendering multi-page elements based on the above; Figure 18 Is Figure 6 The flowchart shown illustrates the update process following step 650; Figure 19 This is an architecture diagram of a third-party chart library according to embodiments of this disclosure; Figure 20 This is an architecture diagram of a custom rendering engine in a third-party chart library according to embodiments of this disclosure; Figure 21 This is an architecture diagram of integrating a third-party chart library into a unified rendering layer according to an embodiment of this disclosure; Figure 22 This is an architecture diagram of interactive event production and consumption according to embodiments of this disclosure; Figure 23 This is a block diagram of a page display processing apparatus according to embodiments of the present disclosure; Figure 24 The implementation according to the embodiments of this disclosure is shown. Figure 6 The terminal structure diagram shown illustrates the page display processing method. Figure 25 The implementation according to the embodiments of this disclosure is shown. Figure 6 The server architecture diagram shown illustrates the page display processing method. Detailed Implementation To make the objectives, technical solutions, and advantages of this disclosure clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and are not intended to limit the scope of this disclosure.

[0027] Before providing a further detailed description of the embodiments of this disclosure, the terms and concepts used in these embodiments are explained, and they are subject to the following interpretations: 1) Page: It is the basic carrier for the presentation and interaction of digital content. It is an independent interface unit formed by the combination of structured elements (i.e. page elements).

[0028] 2) Page elements: These are the basic units that make up a page. They are abstract entities used to carry content, enable interaction, or define structure. For example, page elements can be shapes, text boxes, images, charts, etc.

[0029] 3) Render Engine: This is the core component responsible for converting interface descriptions (such as HTML and UI layouts) or graphical instructions into visual pixels. It generates structured data by parsing the input content, and after layout calculation, drawing and layer composition, it is finally output to the screen or cache.

[0030] 4) Render Tree: This is an intermediate data structure generated by the rendering engine. It is used to store information such as the geometric properties (e.g., position, size), visual styles (e.g., color, border, hierarchy), and stacking relationships of the page elements to be rendered, so as to serve as the basis for layout calculation and drawing.

[0031] 5) Rendering node: It is the basic data unit in the rendering tree. A rendering tree usually includes multiple rendering nodes.

[0032] 6) Interaction events: These are response signals triggered when an object (such as a user or other object) performs an operation on a page element (such as clicking, swiping, keyboard input, long-pressing, etc.) or when the state of a page element changes (such as loading completion, focus switching, data update). They are used to convey information such as operation behavior and state changes to drive the rendering engine to dynamically update page elements (such as refreshing the displayed content, changing styles, and navigating to a new page). Interaction events are the core mechanism for implementing page interaction.

[0033] In the field of computer science, calling applications often need to display various page elements on a webpage to achieve purposes such as content display and object interaction. For example, online document pages need to display page elements such as shapes, text boxes, images, tables, and charts. Due to limitations in development costs and development cycles, the rendering engines built into calling applications often only support rendering relatively simple page elements (such as shapes, text boxes, and images) and cannot render more complex page elements (such as charts).

[0034] To address this, solutions typically involve integrating a mature third-party rendering engine to handle the rendering of more complex page elements. However, these solutions suffer from at least the following problems: 1) Because third-party rendering engines and the rendering engine built into the calling application are two different rendering engines, the page elements rendered by the third-party rendering engine (referred to as the first page element) and the page elements rendered by the calling application's built-in rendering engine (referred to as the second page element) usually cannot be adjusted in terms of hierarchy, which can easily lead to display errors. For example, because the first page element and the second page element cannot be adjusted in hierarchy, in order to avoid the first page element being covered by the second page element, the first page element can only be displayed at the top of the page, which may cause the first page element to incorrectly cover the second page element.

[0035] 2) Third-party rendering engines are designed to quickly implement basic functions, rather than creating complex visualization tools. Furthermore, to lower the barrier to entry, the size and dependencies of third-party rendering engines are strictly controlled to avoid bloated code or increased learning costs due to feature expansion. For these reasons, third-party rendering engines typically only support common, basic rendering styles, such as text color, text font, line thickness, solid color fill for graphics, and shadows, but cannot support advanced rendering styles such as rich text, complex text layout, rectangular gradients, image & pattern fills, inner shadows, glows, and reflections. This results in limitations on the rendering styles of the first page elements rendered by a third-party rendering engine, preventing the achievement of the expected display effect.

[0036] To address these issues, this disclosure provides a page display processing method, apparatus, device, related medium, and program product, which can achieve at least the following technical effects: by rendering the first page element through the calling rendering engine, the display layer of the first page element can be freely adjusted, avoiding erroneous overlay problems with other page elements, thus improving the display accuracy of page elements on the page; the calling rendering engine can support advanced rendering styles, for example, the calling rendering engine can natively support advanced rendering styles, or support advanced rendering styles by accessing extended components, thus ensuring that the rendered first page element is not limited in rendering style, such as being able to achieve advanced rendering styles such as rich text, complex text layout, rectangular gradient, image & pattern fill, inner shadow, glow, and reflection.

[0037] System architecture and scenario description of the embodiments disclosed herein Figure 1 This is a system architecture diagram of the page display processing method according to an embodiment of the present disclosure. It includes a terminal 140, an Internet 130, a gateway 120, a server 110, etc.

[0038] Terminal 140 can take various forms, including desktop computers, laptops, PDAs (personal digital assistants), mobile phones, vehicle terminals, and dedicated terminals. Furthermore, it can be a single device or a collection of multiple devices. For example, multiple desktop computers can be interconnected via a local area network, sharing a single monitor to work collaboratively, forming a single terminal 140. Terminal 140 can communicate with the Internet 130 via wired or wireless means to exchange data.

[0039] Server 110 refers to a computer system capable of providing certain services to terminal 140. Compared to ordinary terminal 140, server 110 has higher requirements in terms of stability, security, and performance. Server 110 can be a single high-performance computer in a network platform, a cluster of multiple high-performance computers, a portion of a single high-performance computer (e.g., a virtual machine), or a combination of portions of multiple high-performance computers (e.g., virtual machines). Server 110 can also communicate with the Internet 130 via wired or wireless means to exchange data.

[0040] Gateway 120, also known as an internetwork connector or protocol converter, is a computer system or device that acts as a translator, enabling network interconnection at the transport layer. It bridges the gap between two systems using different communication protocols, data formats, languages, or even completely different architectures. Gateways can also provide filtering and security functions. Messages sent from terminal 140 to server 110 are forwarded to the corresponding server 110 via gateway 120. Messages sent from server 110 to terminal 140 are also forwarded to the corresponding terminal 140 via gateway 120.

[0041] In some embodiments, the page display processing method provided in this disclosure can be implemented by a terminal 140. For example, the terminal 140 renders page elements based on locally stored page element-related data. The page display processing method provided in this disclosure can also be implemented jointly by the terminal 140 and the server 110. For example, the terminal 140 obtains page element-related data from the server 110 and renders page elements based on the page element-related data.

[0042] The embodiments disclosed herein can be applied in various scenarios, such as Figure 2 The online document scenario shown, and Figure 3 The online map scene shown.

[0043] (a) Online document (electronic document) scenario.

[0044] Online documents are cloud-based collaborative office tools used for word processing, spreadsheet creation, and / or presentation design. They support real-time document creation, editing, and sharing, as well as features such as multi-user collaboration, version control, and access control. Figure 2 As shown, the document data of the online document is stored on server 110. Terminal 140 can access server 110 through a calling application to retrieve the document data of the online document from server 110 and display the online document page based on the document data. It is worth noting that in the online document scenario, the calling application can be a browser application that accesses server 110 by entering a specific URL, or it can be a dedicated online document application.

[0045] The document data of an online document includes relevant data for the page elements that need to be rendered. Terminal 140 can render the page elements based on this data, allowing them to be displayed on the online document page. In online document scenarios, it is often necessary to render relatively complex first page elements such as charts. For this, terminal 140 constructs a first rendering tree corresponding to the chart using a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, which are compatible with the second format of the third-party rendering engine. Terminal 140 obtains the first rendering tree from the third-party rendering engine. Terminal 140 converts the first rendering nodes in the first rendering tree into second rendering nodes, resulting in a second rendering tree including multiple second rendering nodes, which are compatible with the first format. Terminal 140 then uses the calling rendering engine to render the chart based on the multiple second rendering nodes in the second rendering tree, utilizing the first format. Simultaneously, in online document scenarios, it is also necessary to render relatively simple second page elements such as shapes and text. For these second page elements, rendering can be performed directly by constructing a third rendering tree using the calling rendering engine.

[0046] like Figure 2 As shown, the rendered first page elements include charts such as pie charts, area charts, and bar charts, and the rendered second page elements include the text "Page Element 1", "Page Element 2", and "Page Element 3" enclosed in rectangles. Since both the first and second page elements are rendered by the calling rendering engine in this embodiment, it is possible to freely adjust the display layer of the first page element, allowing the first and second page elements to be displayed in the same display layer, ensuring that the display effect meets expectations.

[0047] It is worth noting that, in addition to online document scenarios based on the interaction between terminal 140 and server 110, the embodiments of this disclosure can also be applied to offline document scenarios based solely on terminal 140, in which case terminal 140 locally stores the document data of the offline document.

[0048] (ii) Online map scenario.

[0049] Online maps can provide functions such as map browsing, route planning, and location search via the Internet. The map data of the online map (including geographic information, point of interest data, satellite imagery, etc.) is stored on server 110, and the map data of the online map can be obtained by accessing server 110 through terminal 140.

[0050] The map data of the online map includes relevant data for the page elements that need to be rendered. Terminal 140 can render the page elements based on this data, allowing them to be displayed on the online map page. For example, in online map scenarios, it is often necessary to render relatively complex first page elements such as 3D models. For this, terminal 140 uses a third-party rendering engine to construct a first rendering tree corresponding to the 3D model. The first rendering tree includes multiple first rendering nodes, which are compatible with the second format of the third-party rendering engine. Terminal 140 obtains the first rendering tree from the third-party rendering engine. Terminal 140 converts the first rendering nodes in the first rendering tree into second rendering nodes, obtaining a second rendering tree including multiple second rendering nodes, which are compatible with the first format. Terminal 140 then uses the calling rendering engine to render the 3D model using the first format based on the multiple second rendering nodes in the second rendering tree. Simultaneously, in online map scenarios, it is also necessary to render simpler second page elements such as roads, zoom buttons for zooming the map, and text. For these second page elements, rendering can be performed directly by constructing a third rendering tree using the calling rendering engine.

[0051] like Figure 3 As shown, the rendered first page element is a 3D model of the xx building, and the rendered second page elements include roads, zoom buttons for zooming the map, and text prompts for "xx building," etc. Since both the first and second page elements are rendered by the calling rendering engine in this embodiment, it is possible to freely adjust the display layer of the first page element, allowing it to be displayed at the same or different display layers, ensuring the display effect meets expectations. For example, in... Figure 3 In order to highlight the 3D model of the XX Building, the display level of the 3D model of the XX Building is set higher than the display level of the road, so that the 3D model of the XX Building covers the road; at the same time, in order to introduce the 3D model of the XX Building, the 3D model of the XX Building and the text prompt of "XX Building" are displayed in the same display level.

[0052] It is worth noting that, in addition to the online map scenario based on the interaction between terminal 140 and server 110, the embodiments of this disclosure can also be applied to the offline map scenario based solely on terminal 140, in which case terminal 140 locally stores the map data of the offline map.

[0053] It is worth noting that, Figure 1 The system architecture shown and Figures 2 to 3The scenarios shown are for the purpose of more clearly illustrating the technical solutions of the embodiments of this disclosure, and do not constitute a limitation on the technical solutions provided by the embodiments of this disclosure. As those skilled in the art will know, with the evolution of page display processing technology and the emergence of new business scenarios, the technical solutions provided by the embodiments of this disclosure are also applicable to similar technical problems.

[0054] To facilitate understanding, the following explanation uses the actual page display as an example. Figure 3 As shown, Figure 3 The page above displays a first page element, specifically a chart, which is fixed at the top of the page, causing it to incorrectly cover a second page element. However, after implementing the page display processing method provided in this embodiment, the desired result is obtained. Figure 3 On the page below, the charts no longer incorrectly cover the elements on the second page, but are displayed at the same level as the elements on the second page. The elements on the second page specifically include an explosion shape (containing the text "increase of 32.7%)" and an arrow shape.

[0055] like Figure 4 As shown, Figure 4 The page above only supports displaying regular, basic rendering styles, such as text color, text font, line thickness, solid color fill for graphics, and shadows; however, after implementing the page display processing method provided in this embodiment, the result is... Figure 4 The page below supports advanced rendering styles, such as rich text, vertical layout, and images.

[0056] General Description of Embodiments in this Disclosure According to one embodiment of this disclosure, a page display processing method is provided. This page display processing method can be executed on a terminal 140, or it can be executed partly on the terminal 140 and partly on the server 110.

[0057] like Figure 6 As shown, a page display processing method according to an embodiment of this disclosure includes: Step 610: In response to a request to display a page on the calling application, retrieve a first page element from the request that is incompatible with the first format of the calling rendering engine; Step 620: Construct the first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. Step 630: Obtain the first rendering tree from the third-party rendering engine; Step 640: Convert the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree that includes multiple second rendering nodes. The second rendering nodes are compatible with the first format. Step 650: Using the caller's rendering engine, based on multiple second rendering nodes in the second rendering tree, render the first page element using the first format to display the page on the caller's application.

[0058] Steps 610-650 are described in detail below.

[0059] In step 610, in response to a request to display a page on the calling application, a first page element that is incompatible with the first format of the calling rendering engine is retrieved from the request.

[0060] Here, for the triggered request to display a page on the calling application, the first page element is obtained from the request. The first page element refers to the page element that needs to be displayed on the page and is incompatible with the first format of the calling rendering engine. The calling application refers to the application that needs to display the page, such as a browser application or an application that provides specific display services (such as online document applications, online map applications, etc.). The calling rendering engine refers to the rendering engine built into the calling application. Due to development costs and development cycles, the calling rendering engine often only supports rendering relatively simple page elements, and does not have the ability to directly render more complex page elements. Taking the online document scenario as an example, the calling rendering engine often only supports rendering relatively simple page elements such as shapes, text boxes, images, and tables, and does not have the ability to directly render more complex page elements such as charts. The first page element referred to in step 610 refers to the page element that the calling rendering engine does not support for direct rendering.

[0061] It is worth noting that the calling rendering engine does not support directly rendering the first page elements. Specifically, the first page elements are incompatible with the calling rendering engine's first format. In this embodiment, the rendering engine's rendering format refers to the specification defined in the rendering engine used to describe the structure, style, and interaction of the page. The calling rendering engine's rendering format is simply referred to as the first format. The rendering format is like a language; it specifies how page elements should be described and organized so that the rendering engine can understand and present them on the page. The incompatibility between the first page elements and the calling rendering engine's first format means that the calling rendering engine cannot directly construct the rendering tree corresponding to the first page elements.

[0062] It is worth noting that the rendering of page elements typically relies on data-driven processes. Step 610, obtaining the first page element from the request, essentially refers to obtaining the relevant data of the first page element from the request. The relevant data of the first page element is data described using a specific data format. Unlike rendering formats, data formats are specifications for storing, transmitting, and exchanging data. The syntax of a data format primarily describes the content of the data, while the syntax of a rendering format directly affects the display effect. This disclosure does not limit the data format used to describe the first page element; for example, it can be HyperText Markup Language (HTML), JavaScript Object Notation (JSON), Extensible Markup Language (XML), etc. This disclosure does not limit the data source of the relevant data of the first page element; it can be a terminal or a server. For example, a terminal can trigger a request to display the page on the calling application based on the locally stored relevant data of the first page element; or, for example, a terminal can obtain the relevant data of the first page element from a server and trigger a request to display the page on the calling application.

[0063] In step 620, a first rendering tree corresponding to the first page element is constructed using a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine.

[0064] Considering the incompatibility between the first page element and the first format of the calling rendering engine, a third-party rendering engine compatible with the first page element's rendering format is integrated. Taking the first page element as a chart as an example, the third-party rendering engine could be a G2 rendering engine, ECharts rendering engine, or D3.js rendering engine, all of which support chart rendering. Based on the integrated third-party rendering engine, the relevant data of the first page element is parsed by the third-party rendering engine. The goal is to parse it into a structure recognizable by the third-party rendering engine, obtaining the first rendering tree corresponding to the first page element. The first rendering tree includes multiple first rendering nodes, which are compatible with the second format of the third-party rendering engine; that is, the first rendering nodes are described using the second format of the third-party rendering engine.

[0065] As an example, embodiments of this disclosure provide, for instance... Figure 7 The diagram shown illustrates the first rendering tree, showing the first rendering nodes 1 to 5. These first rendering nodes can be divided into two categories: leaf rendering nodes and container rendering nodes (or non-leaf rendering nodes). Leaf rendering nodes are shown below. Figure 7The first rendering node 2, first rendering node 4, and first rendering node 5 are used in the first rendering tree. Leaf rendering nodes typically describe the page sub-elements that will ultimately be rendered onto the page. Typical leaf rendering nodes include text nodes, image nodes, and shape nodes. Text nodes include the actual text content, image nodes include the image's source address, size, and other information, and shape nodes include shape parameters, path information, and other information. In this embodiment, the leaf rendering nodes correspond to the page sub-elements that make up the first page element. For example, if the first page element is a chart, then during the construction of the first rendering tree, the first page element will be split into basic page sub-elements such as text, images, and shapes. Container rendering nodes mainly play a role in organizing and managing sub-rendering nodes, and they affect the layout and style inheritance of sub-rendering nodes. Figure 7 In the first rendering tree, the container rendering nodes include first rendering node 1 and first rendering node 3. The child rendering nodes of first rendering node 1 include first rendering nodes 2 to 5, and the child rendering nodes of first rendering node 3 include first rendering nodes 4 to 5. It is worth noting that the first rendering node of the first rendering tree (e.g., the root of the first rendering tree)... Figure 7 The first rendering node in the image (1) is also a container rendering node. The function of the first rendering node is to control the display of the first page element in a specific area.

[0066] In step 630, the first rendering tree is obtained from the third-party rendering engine.

[0067] Here, we obtain the first rendering tree built by the third-party rendering engine.

[0068] In step 640, the first rendering node in the first rendering tree is converted into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, and the second rendering nodes are compatible with the first format.

[0069] Whether it's the calling rendering engine or a third-party rendering engine, during the rendering process, a rendering tree is constructed for the page elements that need to be rendered, and the page elements are rendered based on multiple rendering nodes in the rendering tree. For example... Figure 8 As shown, taking the rendering of a chart using a third-party rendering engine as an example, a chart typically includes a title, data labels, legend, and axes. Upon closer examination, a chart is essentially composed of text, images, and shapes. Therefore, the constructed rendering tree includes text nodes, image nodes, shape nodes, and other rendering nodes. Finally, the third-party rendering engine renders the chart based on this rendering tree. Figure 9As shown, taking a presentation application as the calling application as an example, the page elements that need to be rendered in the presentation typically include text boxes, shapes, images, tables, etc. Therefore, the constructed render tree also includes rendering nodes such as text nodes, image nodes, and shape nodes, and is ultimately rendered by the calling rendering engine based on the render tree. In addition to leaf rendering nodes, the rendering engine usually also has a management mechanism for container-based rendering nodes.

[0070] It can be observed that regardless of the rendering engine used, the types of rendering nodes in the rendering tree are common. Therefore, the calling rendering engine can implement rendering based on the first rendering tree built by the third-party rendering engine. However, there are differences in rendering format between the calling rendering engine and the third-party rendering engine. The first rendering tree is compatible with the second format of the third-party rendering engine, but it is not compatible with the first format of the calling rendering engine. This causes the calling rendering engine to be unable to recognize and utilize the first rendering tree.

[0071] In response to this, such as Figure 10 As shown, in this embodiment, the first rendering node in the first rendering tree is converted into a second rendering node, resulting in a second rendering tree including multiple second rendering nodes. The second rendering nodes are compatible with the first format, thus allowing the resulting second rendering tree to be recognized and utilized by the calling rendering engine. It is worth noting that there is a one-to-one correspondence between the first and second rendering nodes, such as... Figure 10 In the process, the first rendering node 1 is transformed into the second rendering node 1, the first rendering node 2 is transformed into the second rendering node 2, and so on.

[0072] It is worth noting that all or part of steps 630 and 640 can be implemented by the calling rendering engine. For example, the calling rendering engine can obtain the first rendering tree from the third-party rendering engine and convert the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes. Alternatively, it can be implemented by a specific intermediate component that is independent of the third-party rendering engine and the calling rendering engine. For example, the intermediate component can obtain the first rendering tree from the third-party rendering engine and send the converted second rendering tree to the calling rendering engine.

[0073] In some embodiments, converting a first rendering node in a first rendering tree into a second rendering node includes: creating a second rendering node of the same type as the first rendering node and compatible with the first format, and assigning information from the first rendering node to the second rendering node.

[0074] Here's an example of converting a first rendering node into a second rendering node. First, based on the first format, create a second rendering node of the same type as the first rendering node to ensure compatibility with the first format. For example, if the first rendering node is a text node described in the second format, then create a text node described in the first format; if the first rendering node is an image node described in the second format, then create an image node described in the first format, and so on. The created second rendering node doesn't have substantial information (it can be considered as having empty information). Therefore, extract the information from the first rendering node and assign it to the second rendering node, giving it substantial meaning and completing the conversion process.

[0075] For example, a third-party rendering engine names a shape node as node A, while the calling rendering engine names a shape node as node B. Therefore, the calling rendering engine cannot recognize node A in the first rendering tree and needs to create a node B corresponding to node A, and assign the information of node A to node B, thereby realizing the conversion from node A to node B.

[0076] For example, if a third-party rendering engine does not support advanced rendering styles, and the first page element has advanced rendering styles, the engine will create an additional attribute for the first rendering node (one or more first rendering nodes) when constructing the first rendering tree to store information related to the advanced rendering styles. This additional attribute of the first rendering node has no practical meaning; that is, if the third-party rendering engine renders based on the first rendering tree, it will not read the additional attribute of the first rendering node, and the rendered first page element will not have the effect corresponding to the advanced rendering styles. Based on this, a second rendering node corresponding to the first rendering node can be created. This second rendering node has advanced rendering style attributes. Then, the value of the additional attribute of the first rendering node is read and assigned to the advanced rendering style attribute of the second rendering node, thus achieving the conversion from the first rendering node to the second rendering node. Subsequently, when the calling rendering engine renders based on the second rendering tree, it will read the advanced rendering style attribute of the second rendering node, ensuring that the rendered first page element has the effect corresponding to the advanced rendering styles.

[0077] In the above method, a second rendering node of the same type as the first rendering node is created based on the first format, so as to ensure that the second rendering node is compatible with the first format and can be recognized by the calling rendering engine; then, the information of the first rendering node is assigned to the second rendering node, so that the information carried by the first rendering node can be completely transferred to the second rendering node, ensuring that the first page element can be rendered normally based on the second rendering node in the future.

[0078] In step 650, the first page element is rendered using the first format through the caller's rendering engine, based on multiple second rendering nodes in the second rendering tree, to display the page on the caller's application.

[0079] Here, each second rendering node in the second rendering tree is compatible with the first format, meaning that each second rendering node can be recognized by the calling rendering engine. Based on this, the calling rendering engine renders the first page element using the first format based on multiple second rendering nodes in the second rendering tree, so as to display the page including the first page element on the calling application. This disclosure does not limit the rendering process implemented based on the rendering tree; for example, it may include processes such as layout calculation (or typesetting), drawing, and layer composition.

[0080] In some embodiments, the first page element can be rendered onto the same canvas as other page elements by calling the rendering engine.

[0081] Here, the canvas is a two-dimensional space used to draw visual content. When rendering the first page elements using a third-party rendering engine, a separate canvas is typically created for each first page element. However, when the number of first page elements is large, this can easily lead to performance lag, failure to display first page elements correctly, and automatic refresh due to memory overflow. To address this, in this embodiment, the calling rendering engine can render the first page elements and other page elements onto the same canvas. For example, multiple first page elements can be rendered onto the same canvas, or first page elements and second page elements can be rendered onto the same canvas. This minimizes the risk of performance lag, failure to display first page elements correctly, and automatic refresh due to memory overflow. It is worth noting that the above embodiments do not limit the calling rendering engine to creating only one canvas, but rather that the calling rendering engine can render multiple page elements onto the same canvas according to the needs of the actual application scenario. In fact, this embodiment does not limit the number of canvases created during the rendering process.

[0082] In some embodiments, converting a first rendering node in a first rendering tree into a second rendering node includes: converting the first root rendering node in the first rendering tree into a second rendering node mounted on a page container, the page container being subordinate to the page; and rendering a first page element using a first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, including: rendering the first page element to the page container using a first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application.

[0083] Here, a page container is a structure or component used to hold and organize various page elements on a page. It provides a way to divide a page into different areas and position and arrange various page elements. To meet the requirement of displaying the first page element within the page container, the first rendering node in the first rendering tree can be converted into a second rendering node mounted on the page container. It's worth noting that for a given rendering tree, the root rendering node refers to the topmost rendering node, which specifies that the corresponding page element in the rendering tree is displayed in a specific area. Therefore, the second rendering node mounted on the page container specifies that the first page element is displayed within the page container. Furthermore, the mounting process is essentially the process of establishing an association between the second rendering node and the page container. This embodiment does not limit the specific mounting method; for example, the appendChild method in the Document Object Model (DOM) operations can be used to implement mounting.

[0084] With the second rendering node already mounted on the page container, the first page element is rendered to the page container on which the second rendering node is mounted by calling the rendering engine, based on multiple second rendering nodes in the second rendering tree, using the first format.

[0085] The above method converts the first rendering node in the first rendering tree into the second rendering node mounted on the page container, thereby establishing a connection between the second rendering tree and the page container. This ensures that the first page element rendered based on the second rendering tree can be displayed in the page container, achieving orderly display of the first page element within the page container and improving the accuracy of the rendering process.

[0086] It's worth noting that there's a containment relationship between the page container and the canvas; the canvas is contained within the page container, which provides the canvas with its position and space on the page. Taking an HTML-based page as an example... It can be used as a page container, and <canvas>As a canvas, it was placed internal.

[0087] In some embodiments, after converting the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, the page display processing method further includes: storing the second rendering tree; and after rendering the first page element using a first format based on the multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, the page display processing method further includes: in response to a request to redisplay the page on the caller's application, obtaining the stored second rendering tree, and rendering the first page element using a first format based on the multiple second rendering nodes in the second rendering tree through the caller's rendering engine to redisplay the page on the caller's application.

[0088] Here, after converting the first render tree to the second render tree, the second render tree can be stored, for example, cached. Subsequently, if a request to redisplay the page on the calling application is triggered (i.e., the page is closed and reopened), the stored second render tree is retrieved. The calling rendering engine then renders the first page elements using the first format based on multiple second render nodes in the second render tree, thus redisplaying the page on the calling application. In this way, when the page is reopened, there is no need to rebuild the first render tree through a third-party rendering engine, nor is it necessary to perform the conversion from the first render tree to the second render tree, saving computational resources. Simultaneously, the calling rendering engine can directly render based on the stored second render tree without incurring additional waiting time, improving the efficiency of redisplaying the page.

[0089] It's worth noting that, after rendering the first page elements based on the second rendering tree, the second rendering tree might be updated due to the occurrence of the first interaction event. In this case, only the latest version of the second rendering tree can be stored. This reduces storage space usage and ensures consistency between the first page elements in the redisplayed page and the first page elements displayed when the page was last closed, providing a consistent and stable interactive experience for the object. Taking a chart as an example, if the object closes the page after editing the chart, the next time the object reopens the page, it will still display the edited chart, not the initial chart, making it easier for the object to browse or continue editing.

[0090] In some embodiments, obtaining the first rendering tree from a third-party rendering engine includes: sending the first rendering tree through a rendering context interface created by the calling rendering engine via the third-party rendering engine; and receiving the first rendering tree through the rendering context interface via the calling rendering engine.

[0091] Here, a first rendering tree can be obtained from a third-party rendering engine through the calling rendering engine, so that the first rendering tree can be converted into a second rendering tree through the calling rendering engine. This disclosure provides two example methods for obtaining the first rendering tree.

[0092] like Figure 11 As shown, the first approach involves establishing a dedicated data channel between the calling rendering engine and the third-party rendering engine, through which they interact. For example, the calling rendering engine creates a rendering context interface. After constructing the first rendering tree, the third-party rendering engine sends it via this interface, allowing the calling rendering engine to receive it. This approach, based on the rendering context interface, offers strong flexibility and scalability, allowing adjustments to the interface based on different rendering needs, such as adding custom parameters or callback functions. It's worth noting that even after the calling rendering engine has rendered the first page element, if it receives the first interaction event for that element, it can also use the rendering context interface to send this event to the third-party rendering engine.

[0093] In some embodiments, a third-party rendering engine is encapsulated in a software development kit (SDK). Obtaining a first rendering tree from a third-party rendering engine includes: calling an interface provided by the SSD through the calling rendering engine to obtain the first rendering tree output by the SSD.

[0094] like Figure 12 As shown, the second approach involves encapsulating the third-party rendering engine within a Software Development Kit (SDK). The calling rendering engine obtains the first rendering tree output by the SDK by calling the interfaces provided by the SDK. This is equivalent to calling a pre-packaged black-box function; the calling rendering engine does not need to concern itself with the specific implementation details of the SDK, but only needs to follow the interface specifications provided by the SDK to obtain the required data. This approach has relatively low implementation complexity and is suitable for scenarios requiring rapid integration of third-party rendering engines.

[0095] Furthermore, this approach also applies when the calling application is a native application. A native application refers to an application developed for a specific operating system (such as iOS or Android) using the native development languages ​​and tools supported by that operating system. For example, a third-party rendering engine can be encapsulated in a software development kit (SDK) written in JavaScript. JavaScript has excellent cross-platform compatibility, running on various operating systems and electronic devices, including native application environments on mobile devices. Whether it's iOS or Android, as long as a corresponding JavaScript runtime environment is available, the SSD can function, making it easy to integrate into native applications on different operating system platforms, reducing the workload of repetitive development for different operating system platforms.

[0096] In steps 610-650 above, in response to a request to display a page on the calling application, a first page element incompatible with the first format of the calling rendering engine is obtained from the request. Considering that the calling rendering engine does not have the ability to construct a rendering tree corresponding to the first page element, this embodiment of the disclosure constructs the first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes. These first rendering nodes are compatible with the second format of the third-party rendering engine but not with the first format of the calling rendering engine; therefore, the first rendering nodes cannot be recognized and utilized by the calling rendering engine. Based on this, the first rendering nodes in the first rendering tree are converted into second rendering nodes, resulting in a second rendering tree including multiple second rendering nodes. These second rendering nodes are compatible with the first format of the calling rendering engine. Thus, the first rendering tree incompatible with the first format of the calling rendering engine can be converted into a compatible second rendering tree. Finally, the calling rendering engine renders the first page element using the first format based on the multiple second rendering nodes in the second rendering tree to display the page on the calling application. This embodiment renders the first page element independently by the calling party's rendering engine, without being constrained by a third-party rendering engine. This avoids erroneous overlap between the first page element and other page elements, thus improving the display accuracy of page elements. For example, it allows for flexible adjustment of the first page element, enabling it to be displayed above, below, or at the same display level as other page elements, rather than necessarily being on the top. Furthermore, the calling party's rendering engine supports advanced rendering styles, either natively or through extended components. This ensures that the rendered first page element is not limited by rendering styles, enabling advanced and complex display effects. Since rendering is performed by the calling party's built-in rendering engine, it is a front-end rendering solution that does not require back-end support, allowing the first page element to display correctly in offline or local scenarios.

[0097] Page element interaction scheme Steps 610-650 above describe the process of rendering the first page element to display the page. In this embodiment of the disclosure, interaction can be achieved based on the rendered first page element. Interaction refers to the process by which an object manipulates and interacts with page elements on the page, thereby triggering corresponding feedback or functional implementation. This interaction may include, but is not limited to, manipulating various page elements on the page (such as clicking a button to trigger a specific operation, entering content in an input box to submit data, clicking a link to jump to a new page, interacting with image elements such as zooming in, zooming out, or switching), and the electronic device will respond accordingly to these operations, such as updating the displayed page content, executing background logic processing, or providing new information display, thereby achieving dynamic communication and functional experience between the object and the page. The following will illustrate the page element interaction scheme with examples.

[0098] In some embodiments, such as Figure 13 As shown, Figure 6 Following step 650 shown, the following is also included: Step 1310: Receive the first interaction event for the first page element; Step 1320: Update the first rendering tree based on the first interaction event using a third-party rendering engine, and re-render the first page elements based on the updated first rendering tree.

[0099] Steps 1310-1320 will now be described in detail.

[0100] In step 1310, a first interaction event for the first page element is received.

[0101] Here, the first interaction event refers to the various signals generated when an object interacts with the first page element. For example, clicking the first page element, controlling the mouse to move on the first page element, and double-clicking the first page element may all trigger the corresponding first interaction event.

[0102] In some embodiments, an event detector can be bound to a first page element, and the event detector can receive the first interaction event for the first page element. The event detector is a piece of code set on the first page element to wait for the first interaction event to occur. When the first interaction event occurs, it is automatically captured and passed to the calling rendering engine. This method enables automatic detection of the first interaction event, thereby improving the timeliness of the interaction.

[0103] In some embodiments, step 1310 described above may be implemented through the caller's rendering engine or through a functional module (referred to as the caller interaction module) in the caller's application responsible for interaction logic.

[0104] In step 1320, the first rendering tree is updated based on the first interaction event using a third-party rendering engine, so that the first page element is re-rendered based on the updated first rendering tree.

[0105] In this embodiment, the event handling mechanism and logic for the first page element are implemented in a third-party rendering engine, while the calling rendering engine focuses on rendering based on the second rendering tree. Therefore, upon receiving the first interaction event, it needs to be passed to the third-party rendering engine. This makes the division of responsibilities clearer, the code structure more concise, and easier to maintain and extend; at the same time, it eliminates the need for extensive modifications to the logic of the calling application, thus reducing implementation costs.

[0106] After obtaining the first interaction event through a third-party rendering engine, the first rendering tree is updated based on the first interaction event. For example, the update logic is determined according to the event type of the first interaction event, and the first rendering tree is updated based on this logic. For instance, for a certain first page element, the update logic for a click event can be pre-set to highlight, the update logic for a long press event to display a floating tooltip, and the update logic for a double-tap event to enlarge. It is worth noting that updating the first rendering tree here can refer to rebuilding the first rendering tree, i.e., a full update; or it can refer to incrementally updating some first rendering nodes in the first rendering tree. For example, updating the font attribute of a text node from size 4 to size 3, while leaving other first rendering nodes unchanged. Incremental updates are more efficient and consume fewer computational resources.

[0107] The updated first render tree is used to re-render the first page element. For example, referring to the logic of steps 630-650 above, the updated first render tree is first obtained from the third-party rendering engine, then the updated first render tree is converted into an updated second render tree (i.e., the second render tree is updated), and finally the first page element is re-rendered based on the updated second render tree by calling the rendering engine.

[0108] As an example, embodiments of this disclosure provide Figure 14 The comparison chart shown uses elements from the first page as an example. Figure 14 Above is the chart rendered for the first time. Figure 14 Below is the chart re-rendered after receiving the first interaction event. It can be seen that this first interaction event is used to trigger the display of menu options that control the showing / hiding of chart elements, where chart elements refer to axes, axis titles, chart titles, data labels, gridlines, legends, trendlines, etc.

[0109] As an example, embodiments of this disclosure also provide Figure 15 The comparison chart shown uses elements from the first page as an example. Figure 15 Above is the chart rendered for the first time. Figure 15 Below is the chart re-rendered after receiving the first interaction event. It can be seen that this first interaction event triggers the display of the chart formatting window, which allows users to set the chart type, chart color, etc. It's worth noting that... Figure 14 The first interactive event shown is Figure 15 The first interactive event shown is a different interactive event, and there is no necessary connection between the two.

[0110] In some embodiments, updating the first rendering tree based on the first interactive event includes: determining the event type of the first interactive event; determining, among a plurality of first rendering nodes, a first event consumer node with a registered event processing interface corresponding to the event type; and passing the first interactive event to the event processing interface registered by the first event consumer node, so as to perform an interactive action on the first interactive event through the event processing interface, the interactive action being used to update the first rendering tree.

[0111] Here, the event type of the first interaction event is first determined. Then, among the multiple first rendering nodes included in the first rendering tree, the first rendering node that has registered the event handling interface corresponding to this event type is identified as the first event consumer node. For example, starting from the first rendering node in the first rendering tree, each first rendering node in the first rendering tree can be traversed. For each traversed first rendering node, it is checked whether it has registered an event handling interface corresponding to the event type. Here, the event type is a classification identifier that categorizes the interaction between an object (or other object) and page elements according to its essential characteristics and manifestation, enabling the identification and differentiation of different interaction scenarios. The event handling interface is a programming structure used to handle specific interaction events, which usually defines the methods for handling specific interaction events.

[0112] After identifying the first event consumer node, the first interaction event is passed to the event handling interface registered by the first event consumer node. For example, the first interaction event can be passed as a parameter to a method defined in the event handling interface, and the method can be called to execute an interaction action. The interaction action is used to update the first rendering tree, such as updating the font attribute in the information of a text node from size 4 to size 3.

[0113] The above method uses the event type of the first interactive event as a basis to determine the first rendering node that has registered the event handling interface corresponding to the event type among the multiple first rendering nodes included in the first rendering tree. This can accurately locate the object responsible for handling the first interactive event. Then, the first interactive event is passed to the event handling interface registered by the first event consumer node so that the interactive action can be executed on the first interactive event through the event handling interface. This ensures that the first interactive event can be handled correctly. Executing the interactive action is essentially updating the first rendering tree according to a specific update logic, which helps to achieve efficient and accurate interaction.

[0114] In some embodiments, determining the first event consuming node with a registered event type corresponding to an event processing interface among a plurality of first rendering nodes includes: determining the first event source node that triggers the first interactive event among a plurality of first rendering nodes; when the first event source node has registered an event processing interface, determining the first event source node as the first event consuming node; when the first event source node has not registered an event processing interface, determining the first event consuming node with a registered event processing interface among the ancestor nodes of the first event source node.

[0115] Here's an example of how to determine the first event consumer node. First, among the multiple first rendering nodes in the first rendering tree, determine the first rendering node that triggered the first interaction event, and use it as the first event source node. This can be understood as the page child element corresponding to the first event source node being the page child element targeted by the first interaction event. For example, if a page child element within a first page element is a button, and the first interaction event is triggered by the button shape, then the first rendering node in the first rendering tree corresponding to the button shape is determined as the first event source node. The determined first event source node is a leaf rendering node because leaf rendering nodes describe the page child elements that will ultimately be rendered onto the page.

[0116] Based on the identification of the first event source node, it is determined whether the first event source node has registered an event handling interface corresponding to the event type of the first interactive event. If the first event source node has registered an event handling interface, it is designated as the first event consumer node. If the first event source node has not registered an event handling interface, considering that the event handling interface may be uniformly configured in the ancestor nodes of the first event source node, the first event consumer node with a registered event handling interface is identified from the ancestor nodes of the first event source node. This ensures that the first interactive event can be processed as much as possible, improving the success rate of the interaction. Here, the ancestor node of the first event source node refers to the first rendering node that has an inheritance relationship with the first event source node. Figure 7 For example, if the first event source node is the first rendering node 4, then its ancestor nodes include the first rendering node 3 and the first rendering node 1.

[0117] The above method, by accurately locating the source node of the first interaction event, effectively narrows the filtering range, quickly finds the first event consumer node, and reduces the waste of computing resources. Figure 7 For example, if the first event source node is the first rendering node 4, then it is only necessary to determine the first event consumer node among the first rendering node 4, the first rendering node 3, and the first rendering node 1. The first rendering node 2 and the first rendering node 5 do not need to be considered.

[0118] In some embodiments, determining the first event source node that triggers the first interaction event among a plurality of first rendering nodes includes: determining the second event source node that triggers the first interaction event among a plurality of second rendering nodes through a calling rendering engine; querying the second event source node determined by the calling rendering engine through a third-party rendering engine, and determining the first rendering node used to convert to obtain the second event source node as the first event source node that triggers the first interaction event.

[0119] Here is an example of how to determine the first event source node. First, the calling rendering engine identifies the second rendering node that triggered the first interaction event among multiple second rendering nodes, and uses this node as the second event source node. Then, a third-party rendering engine queries the second event source node determined by the calling rendering engine. For example, the calling rendering engine can store the information of the second event source node (which can be all information or only identifying information, without limitation) in a cache, and the third-party rendering engine can query the cache to determine the second event source node determined by the calling rendering engine.

[0120] Since each second rendering node is transformed from a first rendering node, there is a one-to-one correspondence between the second and first rendering nodes. Based on this correspondence, a third-party rendering engine can determine the first rendering node used to transform the second event source node as the first event source node that triggers the first interactive event. Figure 10 For example, if the second event source node determined by the calling rendering engine is the second rendering node 4, then the first rendering node 4 corresponding to the second rendering node 4 in the first rendering tree is determined as the first event source node.

[0121] In this way, the calling rendering engine predetermines the second event source node. When the third-party rendering engine receives the first interactive event, it can directly query the second event source node determined by the calling rendering engine and determine the first rendering node corresponding to the second event source node as the first event source node, thereby enabling a fast search for the first event source node.

[0122] In some embodiments, determining the second event source node that triggers the first interaction event among a plurality of second rendering nodes includes: determining the interaction position of the first interaction event on the page; determining the rendering positions corresponding to the plurality of second rendering nodes respectively; determining the rendering position that successfully matches the interaction position, and determining the second rendering node corresponding to the successfully matched rendering position as the second event source node that triggers the first interaction event.

[0123] Here, we illustrate an example of how to determine the source node of a second event. First, determine the interaction position of the first interaction event on the page. The interaction position is the specific coordinate on the page. When detecting the first interaction event, the interaction position is usually detected at the same time, or it can be understood that the interaction position is part of the first interaction event. At the same time, determine the rendering positions corresponding to multiple second rendering nodes. For example, for each second rendering node, the rendering position can be obtained by calculating data based on the layout calculation-related information (such as path) of the second rendering node. It is worth noting that the multiple second rendering nodes here can refer to multiple second rendering nodes of type leaf rendering nodes, because leaf rendering nodes describe the page child elements that will eventually be rendered on the page, that is, the rendering position of the second rendering node, which essentially refers to the rendering position of the page child element corresponding to the second rendering node.

[0124] Then, the interaction location is matched with the rendering locations corresponding to multiple second rendering nodes, and the second rendering node corresponding to the successfully matched rendering location is determined as the second event source node that triggered the first interaction event. It's worth noting that the rendering location corresponding to a second rendering node is usually represented as an area. The matching process described above refers to determining whether the interaction location belongs to the rendering location corresponding to a certain second rendering node; if it does, the match is successful. For example... Figure 16 As shown, rendering positions 1, 2, and 3 are illustrated. It is assumed that rendering position 1 corresponds to the second rendering node 1, rendering position 2 corresponds to the second rendering node 2, and rendering position 3 corresponds to the second rendering node 3. It can be found that the interaction position where the first interaction event occurs is located at rendering position 1, that is, the successfully matched rendering position is rendering position 1. Therefore, the second rendering node 1 corresponding to rendering position 1 is determined as the second event source node that triggered the first interaction event.

[0125] The above method, through position matching, can accurately determine the second event source node that triggers the first interaction event from multiple second rendering nodes, thereby improving the accuracy and reliability of processing the first interaction event.

[0126] In some embodiments, when a first page element is rendered using a first format based on multiple second rendering nodes in a second rendering tree through a caller's rendering engine to display a page on a caller's application, the page display processing method further includes: rendering the first page element off-screen using the first format based on multiple second rendering nodes in a second rendering tree through a caller's rendering engine to generate an off-screen page, wherein the multiple second rendering nodes correspond to different node color values ​​on the off-screen page; and determining the second event source node that triggers the first interaction event among the multiple second rendering nodes, including: determining the interaction position of the first interaction event on the off-screen page, and determining the color value corresponding to the interaction position on the off-screen page as the interaction color value; determining the node color value that successfully matches the interaction color value, and determining the second rendering node corresponding to the successfully matched node color value as the second event source node that triggers the first interaction event.

[0127] Besides location matching, this disclosure also provides another example method for determining the second event source node, namely color value matching, which will be described in detail below. First, while rendering the first page element based on the second rendering tree using the calling rendering engine, the first page element is also rendered off-screen using the calling rendering engine based on the second rendering tree. It is worth noting that normally, rendering is performed in the current screen's buffer, allowing the drawn content to be directly displayed on the screen. Off-screen rendering, however, refers to rendering operations performed in a buffer separate from the current screen buffer. For ease of distinction, the page obtained through off-screen rendering is called an off-screen page, which is not displayed on the screen. During off-screen rendering, different color values ​​(called node color values) are assigned to multiple second rendering nodes. These multiple second rendering nodes can refer to multiple second rendering nodes of type leaf rendering nodes, because leaf rendering nodes describe the page child elements that will ultimately be rendered onto the page. That is, assigning color values ​​to second rendering nodes is essentially assigning color values ​​to the page child elements corresponding to the second rendering nodes. It is worth noting that color value is a numerical value representing color. This disclosure does not limit the color mode used to describe color value, such as RGB color mode, CMYK color mode, etc.

[0128] Then, the interaction position of the first interactive event on the off-screen page is determined, and the color value corresponding to the interaction position on the off-screen page is determined as the interaction color value. The interaction color value is then matched with the node color values ​​corresponding to multiple second rendering nodes on the off-screen page. If the interaction color value is the same as a node color value, the match is considered successful, and the second rendering node corresponding to that node color value is determined as the second event source node that triggered the first interactive event.

[0129] The above method uses the color value on the off-screen page as the basis for finding the second event source node. It does not require complex position calculations and can quickly and accurately find the second event source node. At the same time, since off-screen rendering is independent, the off-screen page rendered off-screen will not affect the displayed page. Thus, it not only ensures the smoothness and display effect of the page display, but also provides an efficient and reliable solution for the processing of the first interactive event.

[0130] In some embodiments, determining the first event source node that triggers the first interaction event among a plurality of first rendering nodes includes: determining the interaction position of the first interaction event on the page; determining the rendering positions corresponding to the plurality of first rendering nodes respectively; determining the rendering position that successfully matches the interaction position, and determining the first rendering node corresponding to the successfully matched rendering position as the first event source node that triggers the first interaction event.

[0131] The above describes a scheme where the calling rendering engine determines the second event source node so that the corresponding first rendering node is identified as the first event source node. Besides this scheme, a third-party rendering engine can also determine the first event source node itself. First, the interaction position of the first interactive event on the page is determined, along with the rendering positions corresponding to multiple first rendering nodes. Similarly, these multiple first rendering nodes can refer to multiple first rendering nodes of type leaf rendering nodes. Then, the interaction position is matched with the rendering positions corresponding to the multiple first rendering nodes to obtain the rendering positions that successfully match the interaction position. The first rendering node corresponding to the successfully matched rendering position is then identified as the first event source node that triggered the first interactive event. The matching logic here is similar to the matching logic described above for matching the interaction position with the rendering positions corresponding to the multiple second rendering nodes; therefore, it can be referred to the above description.

[0132] In the above approach, the third-party rendering engine determines the first event source node itself, which reduces the dependence on the calling rendering engine. For example, if the calling rendering engine is unable to determine the second event source node due to a fault or anomaly, or if the third-party rendering engine cannot find the second event source node, the first event source node can still be determined, thereby improving the robustness of the first interaction event processing.

[0133] In some embodiments, the event type of the first interactive event is the target caller event type. Before determining the first event consumer node of the event processing interface corresponding to the registered event type among multiple first rendering nodes, the page display processing method further includes: determining the target general event type corresponding to the target caller event type among multiple general event types, wherein the target caller event type is one of multiple caller event types, and the multiple caller event types correspond to different general event types; and updating the event type of the first interactive event from the target caller event type to the target general event type.

[0134] Here, various general event types can be defined, and corresponding event handling interfaces can be registered based on these general event types. Each general event type corresponds to a caller event type, which refers to the event type defined by the caller application (or the caller rendering engine). For the same interaction event, the corresponding caller event type and the general event type are usually different. For example, for a click event, the caller event type is click1, and the general event type is click2.

[0135] For the received first interaction event, its event type is the target caller event type, which is one of several caller event types. Since the correspondence between general event types and caller event types is pre-defined, the target general event type corresponding to the target caller event type can be determined from among the various general event types. Then, the event type of the first interaction event is updated from the target caller event type to the target general event type. This facilitates subsequent processing of the first interaction event, such as passing the first interaction event to the event handling interface corresponding to the target general event type.

[0136] The above approach effectively solves the compatibility issues caused by differences in event type definitions, significantly improving robustness. This mechanism eliminates event processing obstacles caused by inconsistencies in event type descriptions, thereby adapting to different event type systems and ensuring that the first interaction event can be accurately identified and processed in different environments. Simultaneously, the event processing interface based on the registration of universal event types makes the event processing flow more unified and standardized, reducing errors and confusion caused by differences in event types and enhancing adaptability and stability in complex interaction scenarios. In some embodiments, in addition to being compatible with the caller event types defined by the caller application (or the caller rendering engine), it is also compatible with the third-party event types originally defined by the third-party rendering engine. That is, each universal event type corresponds to one caller event type and one third-party event type, thus being applicable to scenarios rendered by the third-party rendering engine itself, effectively expanding the scope of application of the embodiments of this disclosure.

[0137] like Figure 13 As shown, in this embodiment of the disclosure, a first interaction event for a first page element is received, and a first rendering tree is updated according to the first interaction event through a third-party rendering engine, so that the first page element is re-rendered based on the updated first rendering tree. Thus, based on the event handling mechanism and logic implemented by the third-party rendering engine, the first rendering tree is updated, thereby ensuring that the first page element can promptly display changes corresponding to the first interaction event, improving the timeliness and accuracy of page interaction.

[0138] Multi-page element rendering solution In this embodiment, in addition to rendering a first page element that is incompatible with the first format, it may also be necessary to render a second page element that is compatible with the first format. Taking an online document scenario as an example, the first page element could be a chart, and the second page element could be a text box, table, etc. The following will describe a scheme for rendering the first and second page elements simultaneously.

[0139] In some embodiments, such as Figure 17 As shown, during execution Figure 6 In step 610 as shown, the following is also performed: Step 1710: Obtain a second page element compatible with the first format from the request; like Figure 17 As shown, during execution Figure 6 During steps 620-640 as shown, the following is also performed: Step 1720: By calling the rendering engine, construct the third rendering tree corresponding to the second page element. The third rendering tree includes multiple third rendering nodes, and the third rendering nodes are compatible with the first format. like Figure 17 As shown, during execution Figure 6 In step 650 shown, the following is also performed: Step 1730: By calling the rendering engine, the second page elements are rendered using the first format based on multiple third rendering nodes in the third rendering tree.

[0140] The following will describe steps 1710-1730 in detail.

[0141] In step 1710, a second page element compatible with the first format is obtained from the request.

[0142] Here, the request includes not only a first page element that is incompatible with the first format, but also a second page element that is compatible with the first format.

[0143] In step 1720, a third rendering tree corresponding to the second page element is constructed by calling the rendering engine. The third rendering tree includes multiple third rendering nodes, and the third rendering nodes are compatible with the first format.

[0144] On the one hand, for the first page element, a first rendering tree corresponding to the first page element is constructed through a third-party rendering engine, so as to convert the first rendering tree into a second rendering tree; on the other hand, for the second page element, a third rendering tree corresponding to the second page element is constructed through the calling rendering engine. The third rendering tree includes multiple third rendering nodes, and the third rendering nodes are compatible with the first format.

[0145] In step 1730, the second page element is rendered using the first format based on multiple third rendering nodes in the third rendering tree by calling the rendering engine.

[0146] During actual rendering, on one hand, the calling rendering engine renders the first page elements using the first format based on multiple second rendering nodes in the second rendering tree; on the other hand, the calling rendering engine renders the second page elements using the first format based on multiple third rendering nodes in the third rendering tree. After these two rendering processes, the page can be displayed on the calling application, showing both the first and second page elements.

[0147] like Figure 4 As shown, the first page elements in the online document page include charts such as pie charts, area charts, and bar charts. The second page elements in the online document page include text enclosed in rectangles: "Page Element 1," "Page Element 2," and "Page Element 3." Figure 5 As shown, the first page element of the online map page includes a 3D model of the xx building, and the second page element includes a text prompt for "xx building".

[0148] In some embodiments, after rendering the second page element using a first format based on multiple third rendering nodes in the third rendering tree through the calling rendering engine, the page display processing method further includes: receiving a second interaction event for the second page element; updating the third rendering tree according to the second interaction event through the calling rendering engine, so as to re-render the second page element according to the updated third rendering tree.

[0149] For the second page element, the relevant event handling mechanism and logic are implemented in the calling rendering engine and are independent of the third-party rendering engine. Therefore, upon receiving a second interaction event for the second page element, the calling rendering engine updates the third rendering tree based on the second interaction event. Then, the calling rendering engine re-renders the second page element based on the updated third rendering tree, thereby refreshing the display effect of the second page element. Through this method, in scenarios where multiple page elements are rendered simultaneously, it is ensured that the displayed second page element can change accordingly based on the second interaction event, improving the accuracy of the interaction.

[0150] In some embodiments, updating the third rendering tree based on the second interactive event includes: determining the event type of the second interactive event; among multiple third rendering nodes, determining the third event consumer node that has registered an event processing interface corresponding to the event type; and passing the second interactive event to the event processing interface registered by the third event consumer node to perform an interactive action on the second interactive event through the event processing interface, the interactive action being used to update the third rendering tree.

[0151] In some embodiments, determining the third event consuming node with a registered event type corresponding to an event processing interface among multiple third rendering nodes includes: determining the third event source node that triggers the second interaction event among multiple third rendering nodes; when the third event source node has registered an event processing interface, determining the third event source node as the third event consuming node; when the third event source node has not registered an event processing interface, determining the third event consuming node with a registered event processing interface among the ancestor nodes of the third event source node.

[0152] In some embodiments, determining the third event source node that triggers the second interaction event among multiple third rendering nodes includes: determining the interaction position of the second interaction event on the page; determining the rendering positions corresponding to the multiple third rendering nodes respectively; determining the rendering position that successfully matches the interaction position, and determining the third rendering node corresponding to the successfully matched rendering position as the third event source node that triggers the second interaction event.

[0153] In some embodiments, when rendering a second page element using a first format based on multiple third rendering nodes in a third rendering tree through a calling rendering engine, the page display processing method further includes: rendering the second page element off-screen using the first format based on multiple third rendering nodes in a third rendering tree through a calling rendering engine to generate an off-screen page, wherein the multiple third rendering nodes correspond to different node color values ​​on the off-screen page; determining the third event source node that triggers the second interactive event among the multiple third rendering nodes, including: determining the interaction position of the second interactive event on the off-screen page, and determining the color value corresponding to the interaction position on the off-screen page as the interaction color value; determining the node color value that successfully matches the interaction color value, and determining the third rendering node corresponding to the successfully matched node color value as the third event source node that triggers the second interactive event.

[0154] It is worth noting that the process of updating the third rendering tree based on the second interaction event is similar to the process of updating the first rendering tree based on the first interaction event, as described above.

[0155] like Figure 17 As shown, this embodiment of the disclosure obtains a second page element compatible with the first format from the request, constructs a third rendering tree corresponding to the second page element through the calling party's rendering engine, and renders the second page element using the first format based on multiple third rendering nodes in the third rendering tree. Thus, without the involvement of a third-party rendering engine, the calling party's rendering engine independently handles the rendering of the second page element, improving the efficiency and accuracy of rendering the second page element and avoiding various uncontrollable factors during data transmission and format conversion. This embodiment of the disclosure uses the calling party's rendering engine to uniformly render both the first and second page elements, enabling various page elements on the page to be presented quickly and accurately, ensuring the integrity and smoothness of the page display, and providing an interactive experience with multiple page elements.

[0156] Page element re-rendering solution Based on the rendered first page elements, the first rendering tree may be updated. For example, it might be updated upon receiving the first interaction event targeting the first page element, or when the data related to the first page element changes (e.g., the statistical data to be displayed in a chart changes). In these cases, the third-party rendering engine needs to rebuild the first rendering tree, which is equivalent to updating the first rendering tree. After the first rendering tree is updated, the first page elements need to be re-rendered according to the updated first rendering tree to ensure synchronized display effects. An example will be provided below.

[0157] In some embodiments, such as Figure 18 As shown, Figure 6 Following step 650 shown, the following is also included: Step 1810: Update the first rendering tree using a third-party rendering engine; Step 1820: Obtain update information from the third-party rendering engine. The update information is used to represent the difference between the updated first rendering tree and the first rendering tree before the update. Step 1830: By calling the rendering engine, update the second rendering tree according to the update information, so as to re-render the first page elements according to the updated second rendering tree.

[0158] Steps 1810-1830 will now be described in detail.

[0159] In step 1810, the first rendering tree is updated using a third-party rendering engine.

[0160] There are two ways to update the first rendering tree. The first is a full update, which involves rebuilding the first rendering tree through a third-party rendering engine. After the full update, the updated first rendering tree can be compared with the original first rendering tree to obtain the differences, which are then used as update information. The second is an incremental update, where the third-party rendering engine updates certain first rendering nodes in the existing first rendering tree based on the update information, without rebuilding the first rendering tree.

[0161] In step 1820, update information is obtained from a third-party rendering engine. The update information indicates the difference between the updated first rendering tree and the first rendering tree before the update.

[0162] Here, update information is obtained from a third-party rendering engine. The update information represents the difference between the updated first rendering tree and the first rendering tree before the update. It can be used to indicate the update of certain first rendering nodes in the first rendering tree, such as adding or deleting first rendering nodes, or updating specific attributes of specific first rendering nodes.

[0163] In step 1830, the second rendering tree is updated based on the update information by calling the rendering engine, so as to re-render the first page elements according to the updated second rendering tree.

[0164] Here, the calling rendering engine updates the second rendering tree based on the update information. This update refers to incremental updates, such as adding or deleting second rendering nodes according to the update information, or updating specific attributes of specific second rendering nodes. This ensures that the second rendering tree achieves the same update effect as the first rendering tree, meaning that the updated second rendering tree corresponds to the updated first rendering tree. The update information can be pre-converted to a format recognizable by the calling rendering engine. After updating the second rendering tree, the first page elements can be re-rendered based on the updated second rendering tree.

[0165] In some embodiments, the updated first render tree can be directly converted into an updated second render tree, and the first page element can be re-rendered based on the updated second render tree. That is, after updating the first render tree through a third-party rendering engine, steps 630-650 are re-executed. This method is suitable for scenarios where there are significant differences between the updated and unupdated first render trees.

[0166] like Figure 18 As shown, in this embodiment of the present disclosure, update information is recorded when the first rendering tree is updated, and the second rendering tree is updated according to the update information by the calling rendering engine, so as to re-render the first page elements based on the updated second rendering tree. In this way, incremental updates to the second rendering tree can be achieved, improving update efficiency, instead of rebuilding (converting) the second rendering tree from scratch, which helps to improve the real-time performance of the interaction.

[0167] Example of the specific usage process of the page display processing method in this embodiment of the disclosure For ease of understanding, the page display processing method provided in this embodiment is described using an online document application as an example. The rendering engine built into the online document application (the calling party's rendering engine) is referred to as the unified rendering layer.

[0168] Due to limitations in development costs and timelines, the unified rendering layer of online document applications often only supports rendering relatively simple page elements, such as shapes, text boxes, and images, and cannot render more complex page elements, such as charts. To address this, in this embodiment, the online document application can be integrated with a third-party chart library to enable chart rendering. An example will be provided below.

[0169] First, the embodiments disclosed herein provide, as follows Figure 19 The diagram shown is an architecture diagram of a third-party charting library. The library mainly consists of two parts: a business layer and a rendering layer. The business layer is responsible for handling chart-related business logic, covering data definition, view structure construction, and geometric processing. The rendering layer is responsible for generating a rendering tree through the rendering engine and implementing rendering based on the rendering tree. Specifically, the business layer includes: 1) Chart instance: Represents the entire chart and is the entry point for creating the chart; 2) View: Used for operations such as displaying charts in different areas or combining multiple views (e.g., combining bar charts and line charts), facilitating complex chart layouts and data segmentation; 3) Chart components: Refers to components such as chart titles and legends within the chart; 4) Geometry: Primarily responsible for the geometric definition of the graphics, such as describing the basic geometric attributes of the graphics, including shape, position, and size, and is the basic element for constructing chart graphics. The rendering layer includes: 1) Rendering engine dispatcher: Responsible for receiving rendering tasks from the business layer and distributing them to specific rendering engines according to different rendering requirements; 2) Rendering engine: Figure 19 The example shows rendering engine 1 and rendering engine 2. For example, rendering engine 1 can refer to SVG Engine, and rendering engine 2 can refer to Canvas2D Engine; 3) Rendering tree: The rendering tree generated by the rendering engine can include rendering nodes such as group, shape, and text. Group is used to manage multiple parts of the chart (including shape, text, etc.). It can combine related graphics and text together for convenient unified operation and management. Shape is the basic graphic used in the chart to present data visualization, such as the bars of a bar chart, the lines of a line chart, and the sectors of a pie chart. Text refers to the various text content that appears in the chart, including axis tick values, chart titles, legend labels, data labels, etc.; 4) Rendering engine interface: Refers to the API interface of the rendering engine, which is called to realize rendering based on the rendering tree.

[0170] based on Figure 19 It can be observed that the business logic layer and rendering layer of the third-party charting library are separated. Therefore, a custom rendering engine, i.e., a third-party rendering engine, can be extended on top of the third-party charting library. Figure 20 The rendering engine 3 shown only performs the operation of generating the render tree, and does not perform actual rendering based on the render tree. It is worth noting that rendering engine 3 can be obtained by stripping the rendering tree-based rendering function from rendering engine 1 or rendering engine 2. Of course, rendering engine 3 can also be defined based on other rendering engines, and there is no limitation on this.

[0171] Based on this, third-party chart libraries can be integrated into the unified rendering layer of online document applications to achieve chart rendering. The following section will introduce this from three aspects.

[0172] I. Architecture Design.

[0173] like Figure 21 As shown. In third-party chart libraries, a virtual rendering tree can be constructed using a custom third-party rendering engine (corresponding to the first rendering tree mentioned above). Figure 21 The manager shown refers to the component in the third-party rendering engine used to create / update the first render tree. The virtual render tree includes several virtual render nodes (corresponding to the first render node mentioned above) that are format-compatible with the third-party rendering engine. The virtual render tree is driven and updated by the third-party rendering engine. Based on the constructed virtual render tree, the real render tree can be built through the RenderContext interface. For example, the virtual render tree (referring to its related information, such as path, transform, frame, etc.) can be passed to the unified rendering layer through the RenderContext interface. The unified rendering layer then builds the real render tree based on the virtual render tree. This involves converting the virtual render nodes that are format-compatible with the third-party rendering engine into real render nodes that are format-compatible with the unified rendering layer. The rendering context interface can be represented as a layout interface and a draw interface, replacing the original layout and draw interfaces of third-party rendering engines. This way, when a third-party rendering engine calls the layout and draw interfaces, it doesn't actually perform the layout and draw operations. Instead, it passes the virtual rendering tree to the unified rendering layer. The unified rendering layer then constructs the real rendering tree based on the virtual tree and performs the actual layout and draw operations based on the real rendering tree, thus achieving chart rendering. It's worth noting that... Figure 21 The actual rendering node 1 shown is mounted on the page container of the online document page, thus ensuring that the chart is rendered in the page container.

[0174] based on Figure 21 As can be seen from the architecture shown, in this embodiment, the actual rendering is performed by a unified rendering layer. Third-party chart libraries do not experience significant size increases, maintaining their simplicity and facilitating quick integration by various online document applications (such as Word, PPT, and Excel). Furthermore, rich text and graphic components can be extended within the unified rendering layer to achieve advanced chart rendering styles without being limited by the rendering styles provided by third-party chart libraries.

[0175] In addition to the examples above, third-party charting libraries can also be integrated into native applications. For instance, a third-party charting library can be packaged into a JS SDK, whose output serves as a virtual rendering tree, while the actual rendering is handled by the native application.

[0176] II. Interaction event (corresponding to the first interaction event above) integration.

[0177] Since the actual rendering operation is implemented by a unified rendering layer, the source of interactive events for third-party chart libraries will inevitably become invalid. For example, if a third-party chart library originally has both an SVG Engine and a Canvas2D Engine, and rendering is performed through the SVG Engine, then the source of interactive events will be the SVG DOM interactive events (such as...). Figure 22 The interactive events referred to in the text are from source 1; if rendering is performed using Canvas2D Engine, then the source of the interactive events is the Canvas DOM interactive events (such as...). Figure 22 (The interactive events referred to in Source 2). However, in this embodiment of the disclosure, the custom third-party rendering engine in the third-party chart library does not perform actual rendering, which causes the interactive event source of the third-party chart library to fail.

[0178] To address this, the first step is to abstract and unify the event types of third-party chart libraries. Third-party chart libraries often involve a large number of DOM interaction events, requiring a unified event type design. This way, for interaction events from different sources, their event types can be converted to the universal event type for subsequent processing, achieving compatibility with different interaction event sources.

[0179] Secondly, optimize the handling process of interactive events by separating event producers and event consumers. For example... Figure 22 As shown, the event producer is responsible for producing interactive events of the general event type, regardless of whether the source of the interactive event is a unified rendering layer, SVG DOM interactive events, or Canvas DOM interactive events; the event consumer is responsible for processing and distributing interactive events of the general event type. In this way, third-party chart libraries can access any source of interactive events, making it more widely applicable. For example, as in this embodiment, the third-party chart library can use the unified rendering layer to perform rendering, or it can utilize the third-party chart library's native rendering engine (such as SVG Engine or Canvas2DEngine) to perform rendering.

[0180] The following section elaborates on the consumption logic of consumers involved in the event.

[0181] When an event consumer receives an interaction event, it first searches among multiple virtual rendering nodes for the virtual event source node that triggered the interaction event (corresponding to the first event source node mentioned above). For example, two methods can be used: 1) Match the interaction location of the interaction event with the rendering locations corresponding to the multiple virtual rendering nodes to determine the rendering location that successfully matches the interaction location, and then determine the virtual rendering node corresponding to the successfully matched rendering location as the virtual event source node. The rendering location corresponding to the virtual rendering node can be calculated using the location-related information (such as path information) of the virtual rendering node; 2) Query the real event source node that triggered the interaction event as determined by the unified rendering layer (corresponding to the second event source node mentioned above), and then determine the virtual rendering node corresponding to the real event source node as the virtual event source node.

[0182] For the unified rendering layer, the real event source node that triggers the interactive event can be found in the following two ways: 1) Match the interaction position of the interactive event with the rendering positions corresponding to multiple real rendering nodes, determine the rendering position that successfully matches the interaction position, and determine the real rendering node corresponding to the successfully matched rendering position as the real event source node. The rendering position corresponding to the real rendering node can be calculated from the position-related information (such as path information) of the real rendering node; 2) When the unified rendering layer renders, it assigns different node color values ​​to multiple real rendering nodes and performs off-screen rendering. Then, when an interactive event is triggered, it determines the interaction position of the interactive event on the off-screen page, and determines the color value corresponding to the interaction position on the off-screen page as the interaction color value. Then, it can determine the node color value that successfully matches the interaction color value, and determine the real rendering node corresponding to the successfully matched node color value as the real event source node that triggers the interactive event.

[0183] After identifying the virtual event source node, the event consumer uses an event bubbling mechanism to determine the virtual event consumer node (corresponding to the first event consumer node mentioned above) for consuming the interactive event. The event bubbling mechanism involves: determining whether the virtual event source node has registered an event handling interface, where the event handling interface corresponds to the common event types of the interactive event; if the virtual event source node has registered an event handling interface, it is determined as a virtual event consumer node; if the virtual event source node has not registered an event handling interface, bubbling upwards from the virtual event source node, for example, from the shape node to the group node, until a virtual event consumer node with a registered event handling interface is found. Of course, even if the virtual event source node has registered an event handling interface, bubbling can continue upwards, depending on the requirements of the actual application scenario.

[0184] Finally, the virtual event consumer nodes consume the interactive events. Specifically, the interactive events are passed to the event handling interface registered by the virtual event consumer nodes, so that the interactive actions are triggered through the event handling interface, thereby updating the virtual rendering tree.

[0185] It is worth noting that, Figure 22 The document also illustrates an event simulation mechanism, which involves using interactive events of certain common event types to simulate interactive events of other common event types. For example, the interaction event of mouse movement can be used to simulate the interaction event of mouse in / out, which can improve the accuracy of the interactive events and help to execute accurate interactive actions subsequently.

[0186] III. Enable public access capabilities.

[0187] In this embodiment, a third-party chart library is integrated into a unified rendering layer, and the rendering logic is executed by the unified rendering layer. To avoid extensive modifications to the unified rendering layer's code, a common chart render component can be extracted. Thus, regardless of the online document application, implementing the common chart render component is sufficient to integrate the third-party chart library into the unified rendering layer and have the rendering logic executed by the unified rendering layer. The common chart render component specifically includes three parts: 1) Creating a chart render instance through the chart render constructor, which specifies the page container to be rendered; 2) Passing the configuration information (config) of the chart render instance to the chart instance (Chart) of the third-party chart library. This configuration information includes a rendering context interface, enabling interaction between the chart render instance and the chart instance; 3) Handling interactive events for the chart, such as calling the event detection method of the chart render instance to detect interactive events and passing them to the chart instance. The aforementioned chart render instance refers to the instance object used to construct (transform) the real rendering tree, and the aforementioned chart instance refers to the instance object used to construct the virtual rendering tree.

[0188] Description of apparatus and devices according to embodiments of this disclosure It is understood that although the steps in the above flowcharts are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated in this embodiment, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the above flowcharts may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps.

[0189] It should be noted that in all specific embodiments of this disclosure, when processing is required based on data related to page elements, permission or consent from the relevant parties is obtained first. Furthermore, the collection, use, and processing of this data comply with relevant laws, regulations, and standards. In addition, when embodiments of this disclosure require obtaining data related to page elements, separate permission or consent from the relevant parties is obtained through pop-ups or redirection to confirmation pages. Only after obtaining the separate permission or consent of the relevant parties is the necessary data for the proper functioning of the embodiments of this disclosure obtained.

[0190] Reference Figure 23 , Figure 23 This is a schematic diagram of the structure of a page display processing apparatus 2300 provided in an embodiment of the present disclosure. The page display processing apparatus 2300 includes: Page element acquisition module 2310 is used to retrieve a first page element that is incompatible with the first format of the caller's rendering engine from the request in response to a request to display a page on the caller's application. The rendering tree building module 2320 is used to build the first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. Render tree acquisition module 2330 is used to obtain the first render tree from a third-party rendering engine; The rendering tree conversion module 2340 is used to convert the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, and the second rendering nodes are compatible with the first format. The rendering tree application module 2350 is used to render first page elements using a first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine, so as to display the page on the caller's application.

[0191] In some embodiments, the page display processing device 2300 further includes an event interaction module (not shown), for: Receives the first interactive event for the first page element; The first rendering tree is updated based on the first interaction event using a third-party rendering engine, so that the first page elements are re-rendered based on the updated first rendering tree.

[0192] In some embodiments, the event interaction module is further configured to: Determine the event type of the first interaction event; Among multiple first rendering nodes, determine the first event consumer node corresponding to the event handling interface of the registered event type; The first interactive event is passed to the event handling interface registered by the first event consumer node, so that the interactive action is performed on the first interactive event through the event handling interface. The interactive action is used to update the first rendering tree.

[0193] In some embodiments, the event interaction module is further configured to: Among multiple first rendering nodes, determine the first event source node that triggers the first interaction event; When the first event source node has registered an event handling interface, the first event source node will be identified as the first event consumer node. When the first event source node has not registered an event processing interface, the first event consumer node with a registered event processing interface is determined from the ancestor nodes of the first event source node.

[0194] In some embodiments, the event interaction module is further configured to: By calling the rendering engine, the second event source node that triggered the first interaction event is determined among multiple second rendering nodes; The second event source node determined by the calling rendering engine is queried through the third-party rendering engine, and the first rendering node used to convert to obtain the second event source node is determined as the first event source node that triggers the first interactive event.

[0195] In some embodiments, the event interaction module is further configured to: Determine the location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple second rendering nodes; Determine the rendering position that successfully matches the interaction position, and determine the second rendering node corresponding to the successfully matched rendering position as the second event source node that triggers the first interaction event.

[0196] In some embodiments, the page display processing apparatus 2300 further includes an off-screen rendering module (not shown), used for: By calling the rendering engine, based on multiple second rendering nodes in the second rendering tree, the first page elements are rendered off-screen using the first format to generate an off-screen page. The multiple second rendering nodes correspond to different node color values ​​on the off-screen page. The event interaction module is also used for: Determine the interaction position of the first interactive event on the off-screen page, and determine the color value corresponding to the interaction position on the off-screen page as the interaction color value; Determine the node color value that successfully matches the interactive color value, and determine the second rendering node corresponding to the successfully matched node color value as the second event source node that triggers the first interactive event.

[0197] In some embodiments, the event interaction module is further configured to: Determine the location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple first rendering nodes; Determine the rendering position that successfully matches the interaction position, and determine the first rendering node corresponding to the successfully matched rendering position as the first event source node that triggers the first interaction event.

[0198] In some embodiments, the event type of the first interaction event is the target caller event type, and the event interaction module is further configured to: Among various general event types, determine the target general event type that corresponds to the target caller event type. The target caller event type is one of the various caller event types, and the various caller event types correspond to different general event types. Update the event type of the first interaction event from the target caller event type to the target general event type.

[0199] In some embodiments, the page element acquisition module 2310 is further configured to: Retrieve a second page element that is compatible with the first format from the request; Render tree building module 2320 is also used for: By calling the rendering engine, a third rendering tree corresponding to the second page element is constructed. The third rendering tree includes multiple third rendering nodes, which are compatible with the first format. The Render Tree application module 2350 is also used for: By calling the rendering engine, the second page elements are rendered using the first format based on multiple third rendering nodes in the third rendering tree.

[0200] In some embodiments, the page display processing device 2300 further includes an event interaction module (not shown), for: Receives a second interactive event for a second page element; By calling the rendering engine, the third rendering tree is updated based on the second interaction event, so that the second page elements are re-rendered based on the updated third rendering tree.

[0201] In some embodiments, the rendering tree conversion module 2340 is further configured to: The first rendering node in the first rendering tree is converted into the second rendering node mounted on the page container, and the page container is subordinate to the page; The Render Tree application module 2350 is also used for: By using the caller's rendering engine, based on multiple second rendering nodes in the second rendering tree, the first page elements are rendered to the page container using the first format in order to display the page on the caller's application.

[0202] In some embodiments, the page display processing apparatus 2300 further includes an update display module (not shown), for: The first rendering tree is updated using a third-party rendering engine; The update information is obtained from a third-party rendering engine. The update information is used to represent the differences between the updated first rendering tree and the first rendering tree before the update. By calling the rendering engine, the second rendering tree is updated according to the update information, so that the first page elements are re-rendered based on the updated second rendering tree.

[0203] In some embodiments, the page display processing apparatus 2300 further includes a storage module (not shown) for: The second rendering tree is stored. The page display processing device 2300 also includes a multiplexing module (not shown) for: In response to a request to redisplay the page on the calling application, the stored second rendering tree is retrieved, and the first page element is rendered using a first format based on multiple second rendering nodes in the second rendering tree through the calling rendering engine, so as to redisplay the page on the calling application.

[0204] In some embodiments, the rendering tree acquisition module 2330 is further configured to: The first rendering tree is sent through the rendering context interface via a third-party rendering engine. The rendering context interface is created by the calling rendering engine. The first render tree is received by the caller's rendering engine through the rendering context interface.

[0205] In some embodiments, the third-party rendering engine is encapsulated in a software development kit, and the rendering tree acquisition module 2330 is further used for: By calling the rendering engine, the interface provided by the software development kit is invoked to obtain the first rendering tree output by the software development kit.

[0206] Reference Figure 24 , Figure 24 To implement the page display processing method of this embodiment, a partial structural block diagram of the terminal 140 is shown. The terminal includes: a radio frequency (RF) circuit 2410, a memory 2415, an input unit 2430, a display unit 2440, a sensor 2450, an audio circuit 2460, a wireless fidelity (WiFi) module 2470, a processor 2480, and a power supply 2490, among other components. Those skilled in the art will understand that... Figure 24 The terminal structure shown does not constitute a limitation on mobile phones or computers and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0207] The RF circuit 2410 can be used to receive and transmit signals during information transmission or calls. In particular, it receives downlink information from the base station and processes it with the processor 2480; in addition, it transmits uplink data to the base station.

[0208] The memory 2415 can be used to store software programs and modules. The processor 2480 executes various terminal functions and data processing by running the software programs and modules stored in the memory 2415.

[0209] The input unit 2430 can be used to receive input numeric or character information, and to generate key signal inputs related to the terminal's settings and function control. Specifically, the input unit 2430 may include a touch panel 2431 and other input devices 2432.

[0210] Display unit 2440 can be used to display input or provided information, as well as various menus of the terminal. Display unit 2440 may include display panel 2441.

[0211] Audio circuitry 2460, speaker 2461, and microphone 2462 provide an audio interface.

[0212] In this embodiment, the processor 2480 included in the terminal can execute the page display processing method of the previous embodiment. The terminals disclosed in this embodiment include, but are not limited to, mobile phones, computers, intelligent voice interaction devices, smart home appliances, vehicle terminals, and aircraft. The embodiments of this invention can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, and assisted driving.

[0213] Reference Figure 25 , Figure 25 The structural block diagram of a server for implementing the page display processing method of this disclosure embodiment shows that the server 110 can vary significantly due to different configurations or performance. It may include one or more Central Processing Units (CPUs) 2522 (e.g., one or more processors) and a memory 2532, and one or more storage media 2530 (e.g., one or more mass storage devices) for storing application programs 2542 or data 2544. The memory 2532 and storage media 2530 may be temporary or persistent storage. The program stored in the storage media 2530 may include one or more modules (not shown in the figure), each module including a series of instruction operations on the server 2500. Furthermore, the CPU 2522 may be configured to communicate with the storage media 2530 and execute the series of instruction operations in the storage media 2530 on the server 2500.

[0214] Server 2500 may also include one or more power supplies 2526, one or more wired or wireless network interfaces 2550, one or more input / output interfaces 2558, and / or one or more operating systems 2541, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0215] The processor in server 2500 can be used to execute the page display processing method of the present disclosure embodiments.

[0216] This disclosure also provides a computer-readable storage medium for storing a computer program for executing the page display processing methods of the foregoing embodiments.

[0217] This disclosure also provides a computer program product, which includes a computer program. The processor of an electronic device reads and executes the computer program, causing the electronic device to perform the page display processing method described above.

[0218] The terms "first," "second," "third," "fourth," etc. (if present) in this disclosure and the foregoing drawings are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this disclosure described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "including," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatuses.

[0219] It should be understood that in this disclosure, "at least one item" refers to one or more, and "more than one" refers to two or more. "And / or" is used to describe the relationship between related objects, indicating that three relationships can exist. For example, "A and / or B" can represent: only A exists, only B exists, and both A and B exist simultaneously, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0220] It should be understood that in the description of the embodiments of this disclosure, "multiple" means two or more, "greater than", "less than", "exceeding" etc. are understood to exclude the number itself, and "above", "below", "within" etc. are understood to include the number itself.

[0221] In the several embodiments provided in this disclosure, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, or indirect coupling or communication connection between apparatuses or units, and may be electrical, mechanical, or other forms.

[0222] 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.

[0223] Furthermore, 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. The integrated unit can be implemented in hardware or as a software functional unit.

[0224] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a 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 all or part 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 (computer programs) to cause an electronic device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing computer programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0225] It should also be understood that the various implementation methods provided in this disclosure can be combined arbitrarily to achieve different technical effects. In this disclosure, 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.

[0226] The above is a detailed description of the embodiments of this disclosure. However, this disclosure is not limited to the above embodiments. Those skilled in the art can make various equivalent modifications or substitutions without departing from the spirit of this disclosure. All such equivalent modifications or substitutions are included within the scope defined by the claims of this disclosure. < / canvas>

Claims

1. A page display processing method, characterized in that, include: In response to a request to display a page on the calling application, a first page element that is incompatible with a first format of the calling rendering engine is obtained from the request; A first rendering tree corresponding to the first page element is constructed using a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. Obtain the first rendering tree from the third-party rendering engine; The first rendering node in the first rendering tree is converted into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, wherein the second rendering nodes are compatible with the first format; The caller rendering engine renders the first page element using the first format based on multiple second rendering nodes in the second rendering tree to display the page on the caller application.

2. The page display processing method according to claim 1, characterized in that, After rendering the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, the page display processing method further includes: Receive the first interaction event for the first page element; The first rendering tree is updated based on the first interaction event using the third-party rendering engine, so that the first page element is re-rendered based on the updated first rendering tree.

3. The page display processing method according to claim 2, characterized in that, Updating the first rendering tree based on the first interaction event includes: Determine the event type of the first interaction event; Among the multiple first rendering nodes, determine the first event consumer node that has registered the event processing interface corresponding to the event type; The first interactive event is passed to the event processing interface registered by the first event consumer node, so as to perform an interactive action on the first interactive event through the event processing interface. The interactive action is used to update the first rendering tree.

4. The page display processing method according to claim 3, characterized in that, The step of determining, among multiple first rendering nodes, a first event consumer node that has registered the event processing interface corresponding to the event type, includes: Among the multiple first rendering nodes, determine the first event source node that triggered the first interaction event; When the first event source node has registered the event processing interface, the first event source node is determined as the first event consumer node; When the first event source node has not registered the event processing interface, the first event consumer node that has registered the event processing interface is determined from the ancestor nodes of the first event source node.

5. The page display processing method according to claim 4, characterized in that, Determining the first event source node that triggered the first interaction event among multiple first rendering nodes includes: The second event source node that triggered the first interaction event is determined from among multiple second rendering nodes through the caller rendering engine. The third-party rendering engine queries the second event source node determined by the calling rendering engine, and the first rendering node used to convert to obtain the second event source node is determined as the first event source node that triggers the first interactive event.

6. The page display processing method according to claim 5, characterized in that, Determining the second event source node that triggered the first interaction event among multiple second rendering nodes includes: Determine the interaction location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple second rendering nodes respectively; The rendering position that successfully matches the interaction position is determined, and the second rendering node corresponding to the successfully matched rendering position is determined as the second event source node that triggers the first interaction event.

7. The page display processing method according to claim 5, characterized in that, When the first page element is rendered using the first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, the page display processing method further includes: Through the calling party rendering engine, based on multiple second rendering nodes in the second rendering tree, the first page element is rendered off-screen using the first format to generate an off-screen page, wherein the multiple second rendering nodes on the off-screen page correspond to different node color values ​​respectively; Determining the second event source node that triggered the first interaction event among multiple second rendering nodes includes: Determine the interaction position of the first interactive event on the off-screen page, and determine the color value on the off-screen page corresponding to the interaction position as the interaction color value; The node color value that successfully matches the interactive color value is determined, and the second rendering node corresponding to the successfully matched node color value is determined as the second event source node that triggers the first interactive event.

8. The page display processing method according to claim 4, characterized in that, Determining the first event source node that triggered the first interaction event among multiple first rendering nodes includes: Determine the interaction location of the first interactive event on the page; Determine the rendering positions corresponding to the multiple first rendering nodes respectively; The rendering position that successfully matches the interaction position is determined, and the first rendering node corresponding to the successfully matched rendering position is determined as the first event source node that triggers the first interaction event.

9. The page display processing method according to claim 3, characterized in that, The event type of the first interactive event is the target caller event type. Before determining the first event consumer node that has registered the event handling interface corresponding to the event type among the multiple first rendering nodes, the page display processing method further includes: Among multiple general event types, a target general event type corresponding to the target caller event type is determined, wherein the target caller event type is one of multiple caller event types, and the multiple caller event types correspond to different general event types; Update the event type of the first interaction event from the target caller event type to the target general event type.

10. The page display processing method according to claim 1, characterized in that, The page display processing method further includes: Obtain a second page element compatible with the first format from the request; The third rendering tree corresponding to the second page element is constructed through the calling party rendering engine. The third rendering tree includes multiple third rendering nodes, and the third rendering nodes are compatible with the first format. The second page element is rendered using the first format through the caller rendering engine, based on multiple third rendering nodes in the third rendering tree.

11. The page display processing method according to claim 10, characterized in that, After rendering the second page element using the first format through the caller's rendering engine based on multiple third rendering nodes in the third rendering tree, the page display processing method further includes: Receive the second interactive event for the second page element; The calling rendering engine updates the third rendering tree based on the second interaction event, and then re-renders the second page element based on the updated third rendering tree.

12. The page display processing method according to claim 1, characterized in that, The step of converting the first rendering node in the first rendering tree into a second rendering node includes: The first rendering node in the first rendering tree is converted into a second rendering node mounted on the page container, wherein the page container belongs to the page; The step of rendering the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application includes: The first page element is rendered to the page container using the first format through the caller rendering engine, based on multiple second rendering nodes in the second rendering tree, so as to display the page on the caller application.

13. The page display processing method according to claim 1, characterized in that, After rendering the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, the page display processing method further includes: The first rendering tree is updated using the third-party rendering engine. The update information is obtained from the third-party rendering engine, and the update information is used to represent the difference information between the updated first rendering tree and the first rendering tree before the update. The caller's rendering engine updates the second rendering tree based on the update information, and then re-renders the first page element based on the updated second rendering tree.

14. The page display processing method according to claim 1, characterized in that, After converting the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, the page display processing method further includes: The second rendering tree is stored. After rendering the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller's rendering engine to display the page on the caller's application, the page display processing method further includes: In response to a request to redisplay the page on the calling application, the stored second rendering tree is retrieved, and the first page element is rendered using the first format based on a plurality of second rendering nodes in the second rendering tree through the calling rendering engine, so as to redisplay the page on the calling application.

15. The page display processing method according to claim 1, characterized in that, Obtaining the first rendering tree from the third-party rendering engine includes: The first rendering tree is sent through the rendering context interface via the third-party rendering engine, and the rendering context interface is created by the calling rendering engine; The caller's rendering engine receives the first rendering tree through the rendering context interface.

16. The page display processing method according to claim 1, characterized in that, The third-party rendering engine is encapsulated in a software development kit, and obtaining the first rendering tree from the third-party rendering engine includes: The caller's rendering engine invokes the interface provided by the software development kit to obtain the first rendering tree output by the software development kit.

17. A page display processing device, characterized in that, include: The page element acquisition module is used to, in response to a request to display a page on the calling application, acquire a first page element from the request that is incompatible with a first format of the calling rendering engine; The rendering tree construction module is used to construct a first rendering tree corresponding to the first page element through a third-party rendering engine. The first rendering tree includes multiple first rendering nodes, and the first rendering nodes are compatible with the second format of the third-party rendering engine. A rendering tree acquisition module is used to acquire the first rendering tree from the third-party rendering engine; The rendering tree conversion module is used to convert the first rendering node in the first rendering tree into a second rendering node to obtain a second rendering tree including multiple second rendering nodes, wherein the second rendering nodes are compatible with the first format. The rendering tree application module is used to render the first page element using the first format based on multiple second rendering nodes in the second rendering tree through the caller rendering engine, so as to display the page on the caller application.

18. An electronic device comprising a memory and a processor, the memory storing a computer program, characterized in that, When the processor executes the computer program, it implements the page display processing method according to any one of claims 1 to 16.

19. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the page display processing method according to any one of claims 1 to 16.

20. A computer program product, the computer program product comprising a computer program, characterized in that, The computer program is read and executed by the processor of the electronic device, causing the electronic device to perform the page display processing method according to any one of claims 1 to 16.

Images