Page rendering method and device, computer equipment, medium and product
By determining the versions of the main thread and background threads for the target application in mobile applications, and using the background thread for complete rendering, the problem of poor mobile application page rendering performance is solved, and a more efficient rendering process is achieved.
Patent Information
- Application Number
- CN202411391543.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-30
- Publication Date
- 2025-01-24
AI Technical Summary
When mobile applications are rendering pages, the main thread is overloaded, resulting in poor performance and poor user experience.
By obtaining the target application, determine the versions of the program that the main thread and the background thread run respectively, where the main thread version is a simplified version of the background thread version. Use the main thread version to quickly render the first screen, and perform complete rendering through the background thread to generate comparison results and update the main thread version.
The memory and computing resources required for rendering have been reduced, the rendering duration is significantly reduced, the burden of the main thread is reduced, and the rendering efficiency is improved.
Smart Images
Figure CN119357496A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of software development technology, and in particular to a page rendering method, apparatus, computer equipment, medium and product. Background Art
[0002] In mobile application development, the thread model directly affects the performance and user experience of the application. Mobile applications run in a single process, which includes multiple threads, including the main thread (also known as the UI thread, User Interface, user interface design) and the background thread. When the page building tool runs in the background thread, the first screen rendering performance of the application is poor, and when it runs completely in the main thread, the main thread is overloaded and is prone to jamming during interaction. Summary of the invention
[0003] In view of this, the present disclosure provides a page rendering method, apparatus, computer equipment, medium and product to solve the problem of poor page rendering performance.
[0004] In a first aspect, the present disclosure provides a page rendering method, the method comprising:
[0005] Obtain a target application, and determine, based on the target application, a first version of the program running on a main thread and a second version of the program running on a background thread, wherein the first version of the program is a simplified version of the second version of the program;
[0006] Rendering the application to obtain a target document object model tree, wherein the target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, wherein the first document object model tree is used to generate a page of the target application;
[0007] Comparing the first document object model tree with the second document object model tree to generate a comparison result;
[0008] Sending the comparison result to the main thread to update the first document object model tree;
[0009] The page of the target application is updated using the updated first document object model tree.
[0010] The page rendering method provided in this embodiment includes obtaining a target application, determining a first version program running on a main thread and a second version program running on a background thread based on the target application, wherein the first version program is a simplified version of the second version program; rendering the application, obtaining a target object model tree, including a first document object model tree and a second document object model tree; the background thread compares the first document object model tree and the second document object model tree, generates a comparison result, and sends the comparison result to the main thread, and the main thread updates the first document object model tree according to the comparison result, and updates the page of the target application. This method reduces the memory and computing resources required for rendering by simplifying the first version program and using the simplified version of the first document object model tree to draw a page, and the background thread can synchronously perform the complete rendering and send the difference content to the main thread, and the main thread can update the first document object model tree according to the difference content, so the rendering result will still be based on the rendering of the background thread, but significantly reduces the time required for rendering, reduces the burden on the main thread, and improves rendering efficiency.
[0011] In a second aspect, the present disclosure provides a page rendering device, the device comprising:
[0012] A program acquisition module, used to acquire a target application, and determine a first version of the program running on a main thread and a second version of the program running on a background thread based on the target application, wherein the first version of the program is a simplified version of the second version of the program;
[0013] A first rendering module, configured to render the application to obtain a target document object model tree, wherein the target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, wherein the first document object model tree is used to generate a page of the target application;
[0014] A thread comparison module, used for comparing the first document object model tree with the second document object model tree to generate a comparison result;
[0015] A result sending module, used for sending the comparison result to the main thread to update the first document object model tree;
[0016] The page generation module is used to update the page of the target application program by using the updated first document object model tree.
[0017] In a third aspect, the present disclosure provides a computer device, comprising: a memory and a processor, the memory and the processor are communicatively connected to each other, computer instructions are stored in the memory, and the processor executes the method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.
[0018] In a fourth aspect, the present disclosure provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the method of the first aspect or any corresponding embodiment thereof.
[0019] In a fifth aspect, the present disclosure provides a computer program product, including computer instructions, where the computer instructions are used to enable a computer to execute the method of the first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the prior art, the drawings required for use in the specific embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0021] Figure 1 is a flow chart of a page rendering method according to an embodiment of the present disclosure;
[0022] Figure 2 is a schematic diagram of a scene of a page rendering method according to an embodiment of the present disclosure;
[0023] Figure 3 is a rendering schematic diagram of the main thread according to an embodiment of the present disclosure;
[0024] Figure 4 is a schematic diagram of a comparison algorithm according to an embodiment of the present disclosure;
[0025] Figure 5 is a schematic diagram of a page rendering method according to an embodiment of the present disclosure;
[0026] Figure 6 is a schematic diagram of a page rendering method according to an embodiment of the present disclosure;
[0027] Figure 7 is a structural block diagram of a page rendering device according to an embodiment of the present disclosure;
[0028] Figure 8 It is a schematic diagram of the hardware structure of the computer device of the embodiment of the present disclosure. DETAILED DESCRIPTION
[0029] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. Based on the embodiments in the present disclosure, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present disclosure.
[0030] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.
[0031] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.
[0032] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0033] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.
[0034] It is understandable that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and relevant provisions.
[0035] Document Object Model (DOM) is a standard programming interface for processing extensible markup language. Page building tools can minimize DOM operations through virtual DOM, maintain a fast-responding copy of the DOM tree in memory, and compare the differences between the new and old trees before the actual DOM is updated, and only update the necessary parts of the actual DOM. The main thread, also known as the UI thread, is the default thread when the program starts, and is mainly responsible for processing user pages and user interactions. Background threads are used to perform tasks that do not directly interact with user pages, such as time-consuming calculations, data processing, file reading and writing, network requests, etc. These tasks may block the UI thread, causing the user page to be unable to respond to user operations, so putting them in the background thread for execution can maintain the smoothness and responsiveness of the page. When the page building tool runs in the background thread, the first screen rendering performance of the application is poor, and when it runs completely in the UI thread, the UI thread is overloaded and prone to jamming during interaction. Based on this, the embodiment of the present disclosure provides a page rendering method, and the method of the embodiment of the present disclosure can be applied to a desktop terminal or a mobile terminal, and the mobile terminal can be at least one of a mobile phone, a tablet computer, a laptop computer, etc.
[0036] According to an embodiment of the present disclosure, a page rendering method embodiment is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0037] In this embodiment, a page rendering method is provided. Figure 1 is a flow chart of a page rendering method according to an embodiment of the present disclosure. Figure 1 As shown, the process includes the following steps:
[0038] Step S101 , obtaining a target application, and determining a first version of the program running in a main thread and a second version of the program running in a background thread based on the target application.
[0039] The first version of the program is a simplified version of the second version of the program.
[0040] The main thread (UI thread) is used to handle tasks related to the user page and user interaction events. Interaction events may include touch events, keyboard events, etc., specifically clicks, slides, etc. The main thread is used to draw the user page of the application. Any update of UI components must be performed in the main thread to ensure that the user page can be refreshed in a timely and correct manner. The background thread is a thread running in the background. It will not prevent the application from exiting and will automatically terminate when the application is closed. The background thread is used to perform some tasks that do not require interaction with the user, such as file downloads, data processing, etc. Time-consuming operations can be placed in the background thread to avoid blocking the main thread and affecting the user experience.
[0041] The target application may be a specific software application targeted during software development, testing, deployment or optimization. The target application is compiled into two versions of the program, namely, a first version program and a second version program, which run on the main thread and the background thread respectively. A simplified version of the page renderer is run on the main thread of the target application to quickly render the first screen. In order to allow the main thread to have better performance, the size and logic of its program package are trimmed. The code snippets that need to be deleted can be set according to requirements. Specifically, certain functions may be involved, and the code corresponding to the function is deleted to obtain the first version of the program. For example, calls similar to useEffect in the application (involving code unrelated to rendering, such as network requests) can be deleted. The second version of the program is a program running on a background thread, which involves code related to time-consuming operations such as request instruction processing. Compared with the second version of the program, the first version of the program is a simplified version.
[0042] Step S102: Render the application to obtain a target document object model tree.
[0043] The target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, and the first document object model tree is used to generate a page of the target application.
[0044] The application includes a first version program and a second version program, which render the first version program and the second version program respectively. When the main thread renders the first version program, the page components can be directly rendered as UI operation instructions, and the intermediate states in the rendering process can be discarded, where the intermediate states can include the side effects generated by useEffect (use effect), component life cycle triggering and other logic, Vnode (virtual node) maintenance, etc., so as to obtain the first document object model tree. The first document object model tree is the internal representation of the web page in the browser, which can contain all elements on the page (such as text, comments, etc.), and the nodes are organized in a tree structure through parent-child relationships. Each node on the tree can represent an element or component on the page.
[0045] During the rendering process of the simplified version of the first version of the program running in the main thread, the background thread will perform rendering in parallel based on the second version of the program. During the rendering process, the background thread will number the Vnodes, starting from 0 and increasing by 1. After the background thread completes the rendering, it will obtain a second document object model tree similar to the first document object model tree. Since the background thread performs a complete rendering and needs to consider triggering the life cycle and side effects, maintaining the Vnode tree, and preparing for subsequent updates, it will take longer than the main thread to render. Compared with the second version of the program, the first version of the program is a simplified version that can be run directly on the main thread and can synchronously draw the UI page without generating a white screen.
[0046] Step S103: compare the first DOM tree with the second DOM tree to generate a comparison result.
[0047] In most cases, the second document object model tree is consistent with the one rendered by the main thread, but there may be a situation where the main thread renders a simplified version of the page, so it is necessary to compare the first document object model tree with the second document object model tree. After the first document object model tree corresponding to the first version of the program running in the main thread is generated, the first document object model tree will be serialized and sent to the background thread through a setting method, where the setting method can be JSON (JavaScript Object Notation, a lightweight data exchange format). The specific method can be set according to actual needs and is not limited here.
[0048] After receiving the first document object model tree, the background thread compares the first document object model tree with the second document object model tree. Specifically, each node in the tree may be compared to see if they are consistent, including the node type, attribute, attribute value, etc. The first document object model tree is compared with the second document object model tree to see if there are missing nodes or different nodes, and the comparison result is recorded. Exemplarily, if there are different nodes in the same position, the specific parameters of the node in the second document object model tree at that position are recorded; if there is a node that does not exist in the same position, the specific parameters of the node in the second document object model tree at that position are recorded. When comparing the first document object model tree with the second document object model tree, a relevant comparison algorithm (for example, a diff algorithm) may be used to determine the comparison result in a recursive comparison manner.
[0049] Step S104: Send the comparison result to the main thread to update the first document object model tree.
[0050] The background thread sends the comparison result to the main thread. After receiving the comparison result, the main thread updates the first document object model tree so that the first document object model tree and the second document object model tree are completely aligned. The UI operations generated by the subsequent rendering of the background thread can be directly sent to the first document object model tree of the main thread for execution. Updating the first document object model tree may include creating a new node, inserting a specified node in a specified position, modifying the properties of a specified node, etc. Exemplarily, the comparison result can be in the form of a patch format, and the patch is an array composed of UI operations. The form of the comparison result can also be set according to the actual application scenario, which is not limited here.
[0051] Step S105: Update the page of the target application using the updated first document object model tree.
[0052] After updating the first document object model tree, the main thread performs rendering based on the updated first document object model tree. If the first document object model tree has not changed, there is no need to re-render. If it has changed, the page is rendered based on the updated first document object model tree, and the updated first document object model tree is reflected on the page, that is, the page elements are redrawn and laid out.
[0053] The page rendering method provided in this embodiment has the following overall process: Figure 2 As shown, it includes obtaining a target application, and determining a first version program running on the main thread and a second version program running on the background thread based on the target application, wherein the first version program is a simplified version of the second version program; rendering the application, obtaining a target object model tree, including a first document object model tree and a second document object model tree; the background thread compares the first document object model tree and the second document object model tree, generates a comparison result, and sends the comparison result to the main thread, and the main thread updates the first document object model tree according to the comparison result, and updates the page of the target application. This method reduces the memory and computing resources required for rendering by simplifying the first version program and using the simplified version of the first document object model tree to draw a page. The background thread can synchronously perform the complete rendering and send the difference content to the main thread. The main thread can update the first document object model tree according to the difference content. Therefore, the rendering result will still be based on the rendering of the background thread, but it significantly reduces the time required for rendering, reduces the burden on the main thread, and improves rendering efficiency.
[0054] In this embodiment, a page rendering method is provided, which includes the following steps:
[0055] Step S201, obtaining an application program of a target application, and determining a first version program running in a main thread and a second version program running in a background thread based on the target application program.
[0056] Specifically, the above step S201 includes:
[0057] Step S2011, obtaining the target application and field information that needs to be simplified;
[0058] The field information that needs to be simplified can be pre-set, and the field information can be content that is not related to rendering, such as network requests, etc. The field information that needs to be simplified is the content that needs to be deleted. The target application obtained is the complete program of the target application, and the second version program is the program running in the background thread, including time-consuming operations such as network requests, and the second version program is the target application.
[0059] Step S2012: query the second version of the program based on the field information to obtain a code snippet corresponding to the field information.
[0060] Query the content corresponding to the field information in the second version of the program, that is, the code snippet corresponding to the field information. Exemplarily, this step can be implemented by pre-setting an identification script, or other methods can be used to query the second version of the program according to actual needs, which is not specifically limited here.
[0061] Step S2013, deleting the code snippet in the second version of the program to obtain the first version of the program.
[0062] The code snippets in the second version of the program are deleted, and the remaining code is the content of the first version of the program, and the second version of the program does not need to be changed. For example, the code that is not related to rendering, such as the call of useEffect, can be deleted.
[0063] Step S202: Render the application to obtain a target document object model tree.
[0064] For details, please see Figure 1 Step S102 of the illustrated embodiment will not be described in detail here.
[0065] Step S203: compare the first DOM tree with the second DOM tree to generate a comparison result.
[0066] For details, please see Figure 1 Step S103 of the illustrated embodiment will not be described in detail here.
[0067] Step S204: Send the comparison result to the main thread to update the first document object model tree.
[0068] For details, please see Figure 1 Step S104 of the illustrated embodiment will not be described in detail here.
[0069] Step S205: Update the page of the target application using the updated first document object model tree.
[0070] For details, please see Figure 1 Step S105 of the illustrated embodiment will not be described in detail here.
[0071] This method can reduce the rendering cost of the main thread by trimming the application and reducing time-consuming operations, thereby improving the efficiency of subsequent rendering.
[0072] In this embodiment, a page rendering method is provided, which includes the following steps:
[0073] Step S301, obtaining a target application, and determining a first version program running in a main thread and a second version program running in a background thread based on the target application.
[0074] For details, please see Figure 1 Step S101 of the illustrated embodiment will not be described in detail here.
[0075] Step S302: Render the application to obtain a target document object model tree.
[0076] Specifically, step S302 includes:
[0077] Step S3021, analyzing the application to obtain processing objects in the application and the hierarchical relationship between the processing objects.
[0078] Parse the source code of the application to identify all processing objects in the application. The processing objects include elements and components that constitute the page structure and components used to process requests, which may include buttons, input boxes, pictures, etc. After identifying all processing objects, it is necessary to determine the hierarchical relationship between the processing objects. The hierarchical relationship can be achieved through a nested structure.
[0079] Step S3022: Generate node information corresponding to the processing objects based on the hierarchical relationship between the processing objects and the node templates corresponding to the hierarchies to obtain a target document object model tree.
[0080] According to the hierarchical relationship determined in step S3021 and the attributes of each processing object (such as tag name, attribute, text content, etc.), the node information corresponding to each processing object is generated. Each level can have a corresponding node template, and the node information in the level can be generated according to the node template. The node information includes the node identifier and the node object, wherein the identifier can be an identification number (id), a class name, etc., and the node object is the processing object itself, including all its attributes and methods.
[0081] The target document object model tree is a DOM tree, which is constructed using the generated node information and hierarchical relationship. The target document object model tree is a tree structure, and each node represents an element, component, etc. on the page.
[0082] In an optional implementation, a simplified version of the page renderer is used when rendering the first document object model, by directly rendering the components as UI operation instructions and discarding the intermediate states in the rendering process, thereby improving the rendering efficiency. As an example, the specific rendering process is as follows Figure 3 As shown, JSX (JavaScript XML) is a syntax extension used to describe UI in the page building tool framework, allowing developers to write HTML (HyperTextMarkup Language) syntax in JavaScript code. First, determine whether it is a built-in tag. If the result is yes, generate a creatElement instruction (create element instruction) and number it. Then further determine whether there is an attribute. If there is an attribute, generate N setAttribute instructions (used to set or change the attribute value of the specified element), and then generate an appendChild instruction (used to add a node to the end of the child node list of the specified parent node). If there is no tree, directly generate the appendChild instruction. If it is not a built-in tag, determine whether it is a class component. If the result is yes, call the constructor to create a component class instance, execute getDerivedStateFromProps, and then execute render (rendering function), and then recurse on the returned JSX. Among them, getDerivedStateFromProps is a static method used by the page building component, which is called after the component is instantiated and receives a new state update. If it is not a class component, it can be determined as a functional component. For a functional component, it can be directly executed and the result can be obtained, and then the returned JSX can be recursively executed. The simplified rendering result will run directly on the main thread and can draw the application page synchronously without a white screen.
[0083] In this step, the source code, data and logic of the application are converted into a format that can be understood and displayed by the browser. Since the application includes a first version program and a second version program, a first document object model tree corresponding to the first version program and a second document object model tree corresponding to the second version program are generated respectively.
[0084] Step S303: compare the first DOM tree with the second DOM tree to generate a comparison result.
[0085] Specifically, step S303 includes: comparing nodes belonging to the same level in the first document object model tree and the second document object model tree to generate a comparison result, wherein the comparison result includes at least one of missing nodes, nodes of different types, and nodes of the same type.
[0086] In this embodiment, the background thread is responsible for comparing the first document object model tree and the second document object model tree. The comparison is carried out in a hierarchical comparison manner. It is assumed that the node structures of the same level are similar, so the nodes are not compared across layers. The nodes in the same level of the two trees are compared. This comparison method can greatly reduce the number of nodes that need to be compared and improve the efficiency of the comparison. Taking the second document object model tree as a benchmark, the difference between the first document object model tree and the second document object model tree is judged, including missing nodes, that is, nodes that exist in the second document object model tree but are missing in the first document object model tree in the same position; different types of nodes refer to different types of nodes in the second document object model tree and the first document object model tree in the same position; the same type of nodes refer to nodes of the same type in the second document object model tree and the first document object model tree in the same position, but the attributes and child nodes may be different. The time complexity of the comparison method provided in this embodiment is O(n).
[0087] In the comparison algorithm used in this embodiment, when comparing lists (such as nodes in an array), the key (identification) attribute is used to uniquely identify each node. Through the key attribute, it is possible to efficiently determine which nodes have changed, which nodes have been added or deleted, and a large number of re-rendering and DOM operations can be avoided.
[0088] In an optional implementation, when the comparison result includes nodes of the same type, the attributes and child nodes of the nodes of the same type in the first document object model tree and the second document object model tree are compared to determine whether the nodes of the same type are the same.
[0089] After comparison, if there are nodes of the same type, the properties and child nodes of the same type of nodes will continue to be compared, otherwise the old node will be directly removed and the new node will be inserted.
[0090] The comparison algorithm provided in this embodiment is as follows Figure 4 As shown, the Vnode tree of the background thread is the second document object model tree, the Element tree of the main thread is the first document object model tree, and the nodes at the same level in the tree are compared, for example, comparing the node numbered 1 and the node numbered -1. In the Vnode tree of the background thread, the child nodes of the node numbered 2 include nodes numbered 3 and 4, while the child nodes of the node numbered -2 at the same level of the Element tree of the main thread only include nodes numbered -3, so there is a missing node at the same level of the node numbered -3.
[0091] Step S304: Send the comparison result to the main thread to update the first document object model tree.
[0092] Specifically, step S304 includes: sending the comparison result to the main thread in the form of a patch to update the first document object model tree, and the type of the patch includes: at least one of a new node, a first inserted node, a second inserted node, and a node to be changed.
[0093] A patch is an array composed of UI operations, including four types: new node, first inserted node, second inserted node, and node to be changed. In this embodiment, after comparison, the patch in the comparison result is at least one of the above types.
[0094] The new node includes the type and identifier of the new node. The new node indicates a node in the same level and position that exists in the second document object model tree but not in the first document object model tree, and a new node needs to be created in the first document object model tree. When the patch type is a new node, the parameters include the type and identifier of the new node.
[0095] The first insertion node includes the identifier of the first insertion node, the identifier of the first parent node of the first insertion node, and the identifier of the target child node of the first parent node. The first insertion node is used to be added before the target child node. When the patch type is the first insertion node, it means that the first insertion node a is inserted before the target child node c of the first parent node b. The parameters include the identifier of the first insertion node a, the identifier of the first parent node b, and the identifier of the target child node c.
[0096] The second insertion node includes the identifier of the second insertion node and the identifier of the second parent node of the second insertion node. The second insertion node is used to be added to the tail of all child nodes of the second parent node. When the patch type is the second insertion node, the identifier inserts the second insertion node a to the tail of the last child node of the second parent node b. The parameters include the identifier of the second insertion node a and the identifier of the second parent node b.
[0097] The node to be modified includes the identifier, attribute name and attribute value of the node to be modified. When the patch type is the node to be modified, it means that the attribute of the node to be modified in the first document object model tree needs to be modified, and the parameters include the identifier, attribute name and attribute value of the node to be modified.
[0098] After receiving the patch, the main thread updates the first document object model tree, so that the UI tree of the main thread and the UI tree of the background thread are completely aligned, and the UI operations generated by subsequent background thread rendering can be sent to the first document object model tree of the main thread for execution.
[0099] Step S305: Update the page of the target application using the updated first document object model tree.
[0100] For details, please see Figure 1 Step S105 of the illustrated embodiment will not be described in detail here.
[0101] In some optional implementations, the page rendering method of the above embodiment further includes: a background thread generates a mapping relationship between nodes in the first document object model tree and nodes in the second document object model tree based on node identifiers.
[0102] When comparing the first DOM tree with the second DOM tree, the background thread will record the mapping relationship between the two trees, specifically by establishing the identification between each node to establish the mapping relationship between nodes. During the rendering process, the tree comparison and recording of the mapping relationship only occurs once.
[0103] See also Figure 5 After the UI thread renders the first document object model tree, it will enter the queue state and wait for the background thread to render the second document object model tree. The background thread compares the two trees and records the mapping relationship between the trees (such as diff & record mapping relationship in the figure), where the diff algorithm is an exemplary comparison algorithm. After the background thread obtains the comparison result, it sends the patch to the main thread, which consumes the patch to update the first document object model tree, and then layouts and draws the page, and then triggers the relevant life cycle of the page building tool.
[0104] In some optional implementations, the page rendering method of the above embodiment further includes:
[0105] Step S401: determining a first node in a first document object model tree according to a triggering event of a page.
[0106] The trigger event on the page refers to any operation on the page of the target application, such as clicking a button, entering text, etc. These operations will trigger the corresponding trigger event. The main thread finds the first node associated with the trigger event in the first document object model tree according to the triggered event. For example, if a button is clicked on the page, the node corresponding to the button is found in the first document object model tree according to the operation.
[0107] Step S402: determine a second node in the second document object model tree corresponding to the first node based on the mapping relationship, so as to respond to the event based on the second node.
[0108] The background thread searches the second document object model tree for the second node corresponding to the first node based on the mapping relationship, and then performs corresponding operations based on the second node, such as updating data, processing logic, etc., to respond to the trigger event. Figure 6 As shown, the mapping relationship is used to map the events generated by user operations from the components of the main thread to the components of the background thread to ensure that the events can be responded to, where the components are nodes. The triggering event must wait until the mapping relationship is recorded before it is triggered, and it will be queued before that.
[0109] Furthermore, the method further includes: if the background thread cannot respond to the triggering event, generating an event patch corresponding to the triggering event, and sending the event patch to the main thread. The main thread responds to the triggering event based on the event patch.
[0110] If the background thread cannot directly handle the trigger event for some reason (such as data errors, logic problems), it will generate an event patch, which contains the information or alternative solutions required to handle the event. The event patch is sent to the main thread so that the main thread can respond to the trigger event based on this patch.
[0111] In some optional implementations, the page rendering method of the above embodiment further includes:
[0112] Step S501: If the background thread performs component update, the update patch in the main thread corresponding to the component update is recorded.
[0113] Step S502: Send the update patch to the main thread, and the main thread updates the page based on the update patch.
[0114] If the background thread updates the component, that is, changes the node in the second document object model, an update patch will be generated accordingly to update the corresponding node in the main thread, thereby updating the page. In other words, subsequent updates can be done directly in the background thread, and only the necessary UI operations are sent to the main thread for execution.
[0115] In this embodiment, a page rendering device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the term "module" can implement a combination of software and / or hardware of a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.
[0116] This embodiment provides a page rendering device, such as Figure 7 As shown, including:
[0117] A program acquisition module 601 is used to acquire a target application and determine, based on the target application, a first version of the program running in the main thread and a second version of the program running in the background thread, wherein the first version of the program is a simplified version of the second version of the program;
[0118] A first rendering module 602 is used to render the application to obtain a target document object model tree, wherein the target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, wherein the first document object model tree is used to generate a page of the target application;
[0119] A thread comparison module 603, configured to compare the first document object model tree with the second document object model tree to generate a comparison result;
[0120] A result sending module 604, used for sending the comparison result to the main thread to update the first document object model tree;
[0121] The page generation module 605 is used to update the page of the target application program by using the updated first document object model tree.
[0122] In some optional implementations, the program acquisition module 601 includes:
[0123] A field information acquisition unit, used for acquiring a target application and field information that needs to be simplified;
[0124] A query program unit, configured to query the second version of the program based on the field information to obtain a code snippet corresponding to the field information;
[0125] The code deleting unit is used to delete the code fragment in the second version program to obtain the first version program.
[0126] In some optional implementations, the first rendering module 602 includes:
[0127] A program analysis unit, used to analyze the application program to obtain processing objects in the application program and hierarchical relationships between the processing objects;
[0128] The model tree generation unit is used to generate node information corresponding to the processing object based on the hierarchical relationship between the processing objects and the node templates corresponding to the hierarchy to obtain the target document object model tree, wherein the node information includes the identifier of the node and the object of the node.
[0129] In some optional implementations, the thread comparison module 603 includes:
[0130] The node comparison unit is used to compare the nodes belonging to the same level in the first document object model tree and the second document object model tree to generate a comparison result, wherein the comparison result includes at least one of a missing node, nodes of different types, and nodes of the same type.
[0131] In some optional embodiments, the node comparison unit is also used to compare the attributes and child nodes of the nodes of the same type in the first document object model tree and the second document object model tree when the comparison result includes the nodes of the same type, so as to determine whether the nodes of the same type are the same.
[0132] In some optional implementations, the result sending module 604 includes:
[0133] A result sending unit is used to send the comparison result to the main thread in the form of a patch to update the first document object model tree, and the types of the patch include: at least one of a new node, a first inserted node, a second inserted node and a node to be changed; the new node includes the type and identifier of the new node; the first inserted node includes the identifier of the first inserted node, the identifier of the first parent node of the first inserted node, and the identifier of the target child node of the first parent node, and the first inserted node is used to be added before the target child node; the second inserted node includes the identifier of the second inserted node and the identifier of the second parent node of the second inserted node, and the second inserted node is used to be added to the end of all child nodes of the second parent node; the node to be changed includes the identifier, attribute name and attribute value of the node to be changed.
[0134] In some optional embodiments, the device further comprises:
[0135] A mapping relationship generating module is used for the background thread to generate a mapping relationship between nodes in the first document object model tree and nodes in the second document object model tree based on the identifiers of the nodes.
[0136] In some optional embodiments, the device further comprises:
[0137] A first node determination module, configured to determine a first node in the first document object model tree according to a triggering event of the page;
[0138] The second node determination module is used to determine a second node in the second document object model tree corresponding to the first node based on the mapping relationship, so as to respond to the event based on the second node.
[0139] In some optional embodiments, the device further comprises:
[0140] An update patch recording module, used for recording the update patch in the main thread corresponding to the component update if the background thread performs a component update;
[0141] The page update module is used to send the update patch to the main thread, and the main thread updates the page based on the update patch.
[0142] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.
[0143] The page rendering device in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.
[0144] The present disclosure also provides a computer device having the above Figure 7 The page rendering device shown.
[0145] See also Figure 8 , Figure 8 is a schematic diagram of a computer device provided by an optional embodiment of the present disclosure, such as Figure 8 As shown, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. Various components are connected to each other using different buses for communication, and can be installed on a common mainboard or installed in other ways as needed. The processor can process the instructions executed in the computer device, including instructions stored in or on the memory to display the graphical information of the GUI on an external input / output device (such as, a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 8 A processor 10 is taken as an example.
[0146] The processor 10 may be a central processing unit, a network processor or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be a dedicated integrated circuit, a programmable logic device or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic or any combination thereof.
[0147] The memory 20 stores instructions executable by at least one processor 10, so that the at least one processor 10 executes the method shown in the above embodiment.
[0148] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created according to the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely arranged relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0149] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid state drive; the memory 20 may also include a combination of the above types of memory.
[0150] The computer device further comprises a communication interface 30 for the computer device to communicate with other devices or a communication network.
[0151] The embodiments of the present disclosure also provide a computer-readable storage medium. The above-mentioned method according to the embodiments of the present disclosure can be implemented in hardware, firmware, or can be implemented as a computer code that can be recorded in a storage medium, or can be implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and will be stored in a local storage medium and downloaded through a network, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state drive, etc.; further, the storage medium can also include a combination of the above-mentioned types of memory. It can be understood that a computer, a processor, a microprocessor controller, or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor, or hardware, the method shown in the above embodiment is implemented.
[0152] A part of the present disclosure may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present disclosure through the operation of the computer. Those skilled in the art should understand that the existence of computer program instructions in computer-readable media includes, but is not limited to, source files, executable files, installation package files, etc., and accordingly, the way in which computer program instructions are executed by a computer includes, but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to the computer.
[0153] Although the embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations are all within the scope defined by the appended claims.
Claims
1. A page rendering method, characterized in that: The method comprises: Obtain a target application, and determine, based on the target application, a first version of the program running on a main thread and a second version of the program running on a background thread, wherein the first version of the program is a simplified version of the second version of the program; Rendering the application to obtain a target document object model tree, wherein the target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, wherein the first document object model tree is used to generate a page of the target application; Comparing the first document object model tree with the second document object model tree to generate a comparison result; Sending the comparison result to the main thread to update the first document object model tree; The page of the target application is updated using the updated first document object model tree.
2. The method according to claim 1, characterized in that The determining, based on the target application, a first version of the program running on the main thread and a second version of the program running on the background thread includes: Get the target application and the fields that need to be simplified; Query the second version of the program based on the field information to obtain a code snippet corresponding to the field information; The code snippet in the second version program is deleted to obtain the first version program.
3. The method according to claim 1, characterized in that The rendering of the application to obtain a target document object model tree includes: Analyze the application to obtain processing objects in the application and hierarchical relationships between the processing objects; Based on the hierarchical relationship between the processing objects and the node templates corresponding to the hierarchies, the node information corresponding to the processing objects is generated to obtain the target document object model tree, wherein the node information includes the identifier of the node and the object of the node.
4. The method according to claim 3, characterized in that The comparing the first document object model tree with the second document object model tree to generate a comparison result includes: Nodes belonging to the same level in the first document object model tree and the second document object model tree are compared to generate a comparison result, wherein the comparison result includes at least one of a missing node, nodes of different types, and nodes of the same type.
5. The method according to claim 4, characterized in that When the comparison result includes the nodes of the same type, the attributes and child nodes of the nodes of the same type in the first document object model tree and the second document object model tree are compared to determine whether the nodes of the same type are the same.
6. The method according to claim 4, characterized in that The sending the comparison result to the main thread to update the first document object model tree includes: Sending the comparison result to the main thread in the form of a patch to update the first document object model tree, wherein the type of the patch includes at least one of a new node, a first inserted node, a second inserted node, and a node to be changed; The new node includes the type and identifier of the new node; The first insertion node includes an identifier of the first insertion node, an identifier of a first parent node of the first insertion node, and an identifier of a target child node of the first parent node, and the first insertion node is used to be added before the target child node; The second insertion node includes an identifier of the second insertion node and an identifier of a second parent node of the second insertion node, and the second insertion node is used to be added to the tail of all child nodes of the second parent node; The node to be modified includes an identifier, an attribute name, and an attribute value of the node to be modified.
7. The method according to claim 3, characterized in that The method further comprises: The background thread generates a mapping relationship between nodes in the first document object model tree and nodes in the second document object model tree based on the identifier of the node.
8. The method according to claim 7, characterized in that The method further comprises: Determining a first node in the first document object model tree according to a triggering event of the page; A second node in the second document object model tree corresponding to the first node is determined based on the mapping relationship, so as to respond to the event based on the second node.
9. The method according to claim 1, characterized in that: The method further comprises: If the background thread performs a component update, record the update patch in the main thread corresponding to the component update; The update patch is sent to the main thread, and the main thread updates the page based on the update patch.
10. A page rendering device, characterized in that: The device comprises: A program acquisition module, used to acquire a target application, and determine a first version of the program running on a main thread and a second version of the program running on a background thread based on the target application, wherein the first version of the program is a simplified version of the second version of the program; A first rendering module, configured to render the application to obtain a target document object model tree, wherein the target document object model tree includes a first document object model tree corresponding to the main thread and a second document object model tree corresponding to the background thread, wherein the first document object model tree is used to generate a page of the target application; A thread comparison module, used for comparing the first document object model tree with the second document object model tree to generate a comparison result; A result sending module, used for sending the comparison result to the main thread to update the first document object model tree; The page generation module is used to update the page of the target application program by using the updated first document object model tree.
11. A computer device, characterized in that: include: A memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the page rendering method according to any one of claims 1 to 9 by executing the computer instructions.
12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the page rendering method according to any one of claims 1 to 9.
13. A computer program product, characterized in that The method comprises computer instructions, wherein the computer instructions are used to enable a computer to execute the page rendering method according to any one of claims 1 to 9.