Page rendering method, page rendering device, electronic equipment and readable storage medium

Abstract

The invention discloses a page rendering method, a page rendering device, electronic equipment and a readable storage medium, the method comprises the steps that a document object model tree is constructed by analyzing a source code of a target page, and each HTML tag in the source code corresponds to an object node in the document object model tree; a document structure tree is constructed by analyzing the document object model tree, the document structure tree comprises document nodes and partition nodes, each partition node comprises at least one paragraph node, each paragraph node comprises at least one content node, and each content node comprises at least one content node; the document node, the partition node, the paragraph node and the content node all comprise node control information; and performing page rendering according to the document structure tree.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and in particular, relates to a page rendering method, a page rendering device, an electronic device, and a readable storage medium. Background Art

[0002] Due to platform compatibility issues, the rendering results of components corresponding to the same code segment may be different on different platforms. In addition, even in different versions of the same platform, the rendering results of the same component may be different, resulting in inconsistent user experience. Summary of the invention

[0003] The embodiments of the present application provide a page rendering method, a page rendering device, an electronic device, and a readable storage medium, which can solve the problem of poor user experience due to poor platform compatibility.

[0004] In a first aspect, an embodiment of the present application provides a page rendering method, the method comprising: constructing a document object model tree by parsing the source code of a target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree; constructing a document structure tree by parsing the document object model tree, wherein the document structure tree comprises document nodes and partition nodes, each partition node comprises at least one paragraph node, each paragraph node comprises at least one content node, and the document node, the partition node, the paragraph node and the content node all comprise node control information; and performing page rendering according to the document structure tree.

[0005] In a second aspect, an embodiment of the present application provides a page rendering device, which includes: a first construction module, used to construct a document object model tree by parsing the source code of a target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree; a second construction module, used to construct a document structure tree by parsing the document object model tree, wherein the document structure tree includes document nodes and partition nodes, each of the partition nodes includes at least one paragraph node, each of the paragraph nodes includes at least one content node, and the document node, the partition node, the paragraph node and the content node all include node control information; a rendering module, used to render the page according to the document structure tree. In a third aspect, an embodiment of the present application provides an electronic device, which includes a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the method described in the first aspect.

[0006] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps of the method described in the first aspect are implemented.

[0007] In a fifth aspect, an embodiment of the present application provides a chip, comprising a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run a program or instruction to implement the method described in the first aspect.

[0008] In a sixth aspect, a computer program product is provided, the computer program product comprising at least one computer program, and the computer program, when loaded and executed by a processor, implements the method as described in the first aspect.

[0009] In an embodiment of the present application, a document object model tree is constructed by parsing the source code of a target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree, and then a document structure tree is constructed by parsing the document object model tree, wherein the document structure tree includes document nodes and partition nodes, each partition node includes at least one paragraph node, each paragraph node includes at least one content node, and the document nodes, partition nodes, paragraph nodes and content nodes all include node control information; finally, page rendering is performed according to the document structure tree, thereby improving the compatibility and efficiency of page rendering, being able to avoid rendering inconsistencies due to version issues and performance differences, and at the same time, effectively reducing the dependence of different platforms on the HTML framework, with high scalability and independence. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Figure 1 It is a flow chart of a page rendering method provided by an embodiment of the present application; Figure 2 It is a structural diagram of a DOM tree provided in an embodiment of the present application; Figure 3 It is a schematic diagram of the structure of a document structure tree provided in an embodiment of the present application; Figure 4 It is a schematic diagram of the structure of another document structure tree provided in an embodiment of the present application; Figure 5 It is a structural diagram of a slice content tree provided in an embodiment of the present application; Figure 6 It is a schematic diagram of the structure of another slice content tree provided in an embodiment of the present application; Figure 7 This is a structural diagram of another slice content tree provided in an embodiment of the present application; Figure 8 This is a schematic diagram of the structure of another slice content tree provided in an embodiment of the present application; Fig. 9 This is a cache schematic diagram provided in an embodiment of the present application; Fig.10 It is a structural schematic diagram of a page rendering device provided in an embodiment of the present application; Fig.11 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

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

[0012] In the following, in conjunction with the accompanying drawings, a page rendering method, a page rendering device, an electronic device, and a readable storage medium provided by an embodiment of the present application are described in detail through specific embodiments and their application scenarios.

[0013] Figure 1 A page rendering method provided by an embodiment of the present application is shown, and the method can be executed by an electronic device, and the electronic device may include: a server and / or a terminal device. In other words, the method can be executed by software or hardware installed in the electronic device, and the method includes the following steps: S110: Constructing a document object model tree by parsing the source code of the target page.

[0014] Wherein, each HTML tag in the source code corresponds to an object node in the document object model tree.

[0015] The target page refers to the page that the user needs to render, which may include a browser page, a rich text editing page, an application interface, a data visualization page, a media content page, an interactive page, etc. The source code of the target page refers to the original text file that constitutes the target page, which may be composed of at least one of the following code languages: HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript, etc. Optionally, the source code may be an HTML document.

[0016] Optionally, S110 may include the following steps: S111: Obtaining an HTML tree by parsing the source code based on the syntax or rules of the source code.

[0017] S111 may include: using an HTML parser to make a decision based on the HTML tags included in the source code to obtain an HTML tree. The decision-making process may include: using the HTML tags as a splitting standard, splitting the source code into multiple subsets, each subset corresponding to a branch, and recursively constructing from top to bottom until all data included in the source code is constructed to obtain an HTML tree.

[0018] Wherein, HTML parser is a tool or program for parsing HTML documents. Optionally, in Java language, the HTML parser can be Jsoup.

[0019] Optionally, after S111, the method further includes: traversing the HTML tree, and removing tags or nodes in the HTML tree that meet the filtering rules. It is understandable that in order to avoid the problem of over-building the HTML tree due to reducing the risk of overfitting, the current HTML tree can be pruned, that is, through string matching and regular expressions, for each child node, non-standard, invalid, potentially ambiguous and unnecessary tags and attributes are removed, for example <base> , <bdo>、 <object>、 <canvas>Etc., thereby simplifying the depth and complexity of the HTML tree, that is, by simplifying the tree structure, skipping some tags or nodes that do not need to be processed, thereby improving processing performance. It should be noted that the filtering rules can be determined according to actual conditions, and the embodiments of this application are not specifically limited. For example, the valid tags are shown in Table 1: Table 1

[0020] S112: Construct the document object model tree by parsing the HTML tree. It can be understood that the HTML tree is obtained by making decisions based on the HTML tags included in the source code. The Document Object Model (DOM) tree is a tree structure that represents HTML and XML documents. By parsing the HTML tree, the DOM tree can be obtained. That is, the DOM tree is generated based on the tags of the HTML tree and the CSS style information of each tag. The DOM tree contains the hierarchy and content information of the entire source code, where each HTML tag corresponds to an object node in the Document Object Model tree. For example, Figure 2 The figure is a schematic diagram of the structure of a DOM tree provided in an embodiment of the present application.

[0021] S120: Construct a document structure tree by parsing the document object model tree.

[0022] The document structure tree includes document nodes and partition nodes, each partition node includes at least one paragraph node, each paragraph node includes at least one content node, and the document node, the partition node, the paragraph node and the content node all include node control information.

[0023] It is understandable that different browsers use different rendering engines, which may have differences in processing DOM trees, resulting in inconsistent display effects of web pages in different browsers. Figure 2 As shown, since the DOM tree includes both attribute nodes and text nodes, it is easy to cause compatibility and stability problems when rendering. Therefore, in this step, based on the DOM tree, a document structure tree is rebuilt from top to bottom. The document structure tree realizes the separation of content and attributes by adding node control information, thereby improving extensibility. Among them, the node control information may include position information, layout and style information and other custom information, wherein the layout and style information may include line spacing, internal and external spacing, component width and height, font size, color, style, arrangement and other attributes; the custom information may include permission information, encryption information, etc., wherein the permission information includes editing permission, browsing permission, etc., and the encryption information includes encryption format, etc.; the position information may include the position index of the node.

[0024] Optionally, in another implementation, the document structure tree may also include the following node information: node type and child node information. Wherein, the node type may refer to the component type included in the current node, for example, document component, title component, content component, paragraph component, text component, picture and table component. Child node information refers to the node object of the next level related to the node. Optionally, in an embodiment of the present application, components of the same level may be connected via a linked list, so that fast positioning and efficient addition, deletion, modification and query can be performed.

[0025] Alternatively, if Figure 3 As shown, the content node may also include detailed content information of each component, such as image path, text location, etc.

[0026] In S120, by converting the DOM tree into a document structure tree, a set of data rules with strict structure, single mapping, and content decoupling is formed. At the same time, by adding node control information, the separation of content and attributes is achieved, thereby improving scalability.

[0027] S130: Rendering a page according to the document structure tree.

[0028] It is understandable that in the related art, rendering is performed based on the rendering strategy of the DOM tree. Since the structures of different DOM trees and their meanings may be the same, when the page contains a large number of complex DOM elements and nested structures, it is impossible to accurately compare the data consistency, so there is a compatibility problem. The document structure tree constructed in the embodiment of the present application has the characteristics of a unique starting point, acyclic structure, divide and conquer, and recursion. At the same time, the actual content is decoupled from the descriptive attributes to achieve data separation; and the nodes at the same level are connected by a bidirectional linked list, and the auxiliary position information is used for double verification, thereby forming a set of data rules with a strict structure from top to bottom. Therefore, according to the document structure tree, page rendering is performed, which has the characteristics of strict mapping, anti-tampering, and high rendering efficiency.

[0029] In an embodiment of the present application, a document object model tree is constructed by parsing the source code of a target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree, and then a document structure tree is constructed by parsing the document object model tree, wherein the document structure tree includes document nodes and partition nodes, each partition node includes at least one paragraph node, each paragraph node includes at least one content node, and the document nodes, partition nodes, paragraph nodes and content nodes all include node control information; finally, page rendering is performed according to the document structure tree, thereby improving the compatibility and efficiency of page rendering, being able to avoid rendering inconsistencies due to version issues and performance differences, and at the same time, effectively reducing the dependence of different platforms on the HTML framework, with high scalability and independence.

[0030] In one implementation, the document structure tree is constructed by parsing the document object model tree, including: traversing the object nodes in the document object model tree in turn, determining the label path corresponding to each object node, wherein the label path includes the hierarchical information, hierarchical type and position information of the object node; and constructing the document structure tree based on each object node and the label path corresponding to each object node.

[0031] It can be understood that each object node in the DOM document object model tree is visited in turn, and the label path corresponding to each object node in the document object model tree is determined. The label path is used to extract the relevant content of the object node by accurately locating the object node. The label path contains hierarchical information, node type, and location information.

[0032] Among them, in another implementation method, the document structure tree is constructed based on each of the object nodes and the label paths corresponding to each of the object nodes, including: when the node type of the object node is an element node and the hierarchical information is a document hierarchy, determining that the object node is a document node in the document structure tree; when the node type of the object node is an element node and the hierarchy information is a root hierarchy, determining that the object node is a partition node in the document structure tree; when the node type of the object node is an element node and the hierarchy information is a block hierarchy, determining that the object node is a paragraph node in the document structure tree; when the node type of the object node is a text node, determining that the object node is a content node in the document structure tree; when the node type of the object node is an attribute node, adding the node content corresponding to the attribute node to the node control information of the corresponding content node.

[0033] For example, Figure 2 As shown, the object nodes in the document object model tree include element nodes, text nodes and attribute nodes, wherein the element nodes are: <title>、< / title> 、 <h1> etc., text nodes include "document title", "my links", "my content", etc., and attribute nodes include: href. Based on the above implementation, by parsing each object node in the document object model tree, a document structure tree corresponding to the document object model tree can be obtained, such as Figure 4 As shown, it is a schematic diagram of the structure of a document structure tree provided by an embodiment of the present application, including document nodes, partition nodes, paragraph nodes and content nodes. Among them, the first layer is the document layer, including a document node; the second layer is the partition layer, which includes two types of partition nodes and; the third layer is the paragraph layer, which includes at least one paragraph node; the fourth layer is the content layer, including at least one content node. Among them, the content node may include components corresponding to text, pictures, and tables respectively.

[0034] In this implementation, the DOM tree is converted into a document structure tree to separate content from attributes, and the hierarchical information of the document structure tree is clarified by adding paragraph nodes, thereby improving scalability. At the same time, adding convergence specifications for content nodes can better adapt to the corresponding system and application ecology.

[0035] In one implementation, after constructing the document structure tree by parsing the document object model tree, the method further includes: for each of the paragraph nodes, grouping the content nodes according to the style attributes of each content node; and updating the document structure tree according to the grouping result.

[0036] Among them, in one implementation method, the updating of the document structure tree according to the grouping result includes: merging the content nodes in the same group to obtain merged content corresponding to each group; for the merged content corresponding to each group, constructing a target node based on the merged content, and replacing the content node corresponding to the merged content with the target node, wherein the parent node of the target node and the content node is the same paragraph node.

[0037] It is understandable that, since content nodes have multiple styles and can, in principle, be infinitely nested in complex tag levels, content nodes need to be sorted twice. By merging content nodes of the same style, duplicate elements in the document structure tree are reduced, and the structure of the document structure tree is simplified, making the structure of the document structure tree clearer and facilitating the improvement of maintainability and performance of the document structure tree.

[0038] In another implementation, the grouping of the content nodes according to the style attributes of each of the content nodes includes: traversing the content nodes included in the paragraph node in sequence, and comparing the style attributes of the current content node with the style attributes of a target content node, wherein the target content node is a previous content node adjacent to the current content node; when the style attributes of the current content node are consistent with the style attributes of the target content node, adding the current content node to a group corresponding to the target content node; when the style attributes of the current content node are inconsistent with the style attributes of the target content node or the target content node does not exist, creating a target group and adding the current content node to the target group, wherein the style attributes corresponding to the target group are consistent with the style attributes of the current content node.

[0039] That is to say, for each content node under the same paragraph node, traverse in sequence. If the traversed i-th content node is the first traversed content node under the paragraph node, then create a target group for the i-th content node, and the style attribute corresponding to the target group is consistent with the i-th content node. If the traversed i-th content node is not the first traversed content node under the paragraph node, obtain the style attribute of the i-th content node. If the style attribute of the i-th content node is consistent with the style attribute of the previous content node adjacent to it, that is, the i-1th content node, then add the i-th content node to the group corresponding to the i-1th content node. Wherein, i is an integer greater than 0.

[0040] Furthermore, in another implementation, the text components included in each content node can be secondary sorted using a split clustering algorithm, that is, the content corresponding to each text component is regarded as a group, and the cluster is gradually split into smaller subgroups until each subgroup contains only a single structural data point. In other words, a deep traversal is performed on the text components under the same content node, and a new text component is created as a subgroup when a new tag is traversed in the text content corresponding to each text component. When each subgroup is determined, the subgroup is inserted into the end of the corresponding content node linked list in sequence, and is used as a leaf node of the document structure tree, and position information is added to mark the node position; layout and style information can also be added to the node control information, and it can be mapped one by one with the tag attributes of the source code; detailed content information can also be added, that is, the plain text information represented by the tag, and a unified layout and style are used for the detailed content information within the same content node. Finally, after each leaf node of a text type component is constructed, dynamically compare the adjacent previous leaf node to see if it is also a text component and whether it has completely identical control information. If so, the two nodes have the same style, so they can be merged into the same text component and the plain text information can be concatenated, thereby optimizing the structure of the document structure tree.

[0041] Optionally, the document structure tree can be further optimized or updated, for example, obtaining the operating system, operating environment, and ecological configuration of the current platform and the currently installed application, extracting, converging, and redefining certain specific attributes, which may include the following aspects: (1) Optimize certain screen pixel values ​​in the document structure tree to screen density or percentage to adapt to the platform display.

[0042] (2) By obtaining the current system font size, modify the base font size in the style information of the document structure tree to follow the system changes.

[0043] (3) According to the theme color or customization requirements of the current application configuration, a proxy protocol layer is encapsulated in the parent class abstract framework of the text component to redefine the standard specifications of some styles and attributes.

[0044] (4) Modification of theme colors and backgrounds, display methods of image components (such as card-style and rounded-corner style), interaction styles of table components, permission control of paragraph components, encryption control, etc.

[0045] In this embodiment, the currently installed system and application ecological environment can be directly obtained, so as to optimize the convergence of specific attributes of the document structure tree to achieve smooth adaptation in subsequent rendering.

[0046] Optionally, after constructing the document structure tree by parsing the document object model tree, the method further comprises: restoring the source code from the document node from top to bottom by level through breadth traversal. The restoration process is as follows: first, a set of standard specifications for the conversion between the document structure tree and the HTML tag can be customized, as shown in Table 2, for each node, an independent conversion framework is formed, and for complex styles in the same component, the conversion priority of each style tag can be predefined, with the highest priority being 1, to ensure that the conversion result is unique. Then, starting from the document node, a partition framework is constructed in sequence, the title area and the content area are set, and the tag content and attributes are added. After the construction is completed, the paragraph level is entered, and the paragraph nodes are restored in sequence from the position index 0 according to the linked list structure, and the spacing, alignment information, background information, etc. of the paragraph components are added, and then the content level is entered. For the content components in the same paragraph, the adjacent text components are spliced ​​according to the standard specifications using the agglomerative clustering algorithm to form a complete tree-shaped paragraph structure. Finally, until all paragraphs are converted, the source code of the target page is obtained, which can be used for cross-platform transmission.

[0047] Table 2

[0048] In one implementation, after constructing the document structure tree by parsing the document object model tree, the method further includes: based on a preset threshold, segmenting the text content included in the at least one content node to obtain at least one slice content; and constructing a slice content tree based on a binary tree according to the at least one slice content, wherein each slice content corresponds to a text node in the slice content tree.

[0049] It is understandable that since String has an upper limit on character storage, if the text data is too large, if one line of data is operated, all other lines after that line need to be moved, which may easily cause performance problems. Therefore, it is necessary to segment the text content according to a preset threshold to obtain at least one slice content corresponding to the text content, and then build a slice content tree based on a binary tree based on the slice content. In this way, during the process of adding, deleting, modifying and checking, the slice content tree can be directly operated, thereby improving the efficiency of adding, deleting, modifying and checking.

[0050] Optionally, the slice content tree uses the position index as the node value to construct a binary search tree (BST). Figure 5 The following is a schematic diagram of the slice content tree.

[0051] In addition, in order to further improve the efficiency of adding, deleting, modifying and searching, the position index of the slice content tree can be optimized. In another implementation, after constructing the slice content tree based on the binary tree according to the at least one slice content, the method further includes: when the text node is a left child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the original position index; when the text node is a right child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the target position index of the parent node corresponding to the right child node, wherein the total number of left subtree nodes is the total number of nodes of the left subtree corresponding to the original position index of the text node.

[0052] It is understandable that the binary tree satisfies the characteristic that the parent node value is greater than the left subtree node value and less than the right subtree node value, which can provide faster search and modification operations. However, for modification operations, there is still too much location node information that needs to be updated, such as Figure 6 As shown, frequent operations on rich text content data will destroy the tree structure, resulting in reduced query and modification performance and causing performance problems. In the embodiment of the present application, a red-black tree can be used to optimize search and modification operations. A red-black tree is a self-balancing data structure based on a binary search tree. Through a series of rotations and color changes, it ensures that the tree height is always within a certain range, can dynamically maintain the stability of the tree structure, and maintain performance in various situations and frequent operations. Therefore, a red-black tree can be used as the basic data structure of a slice content tree.

[0053] Optionally, the binary search tree may be based on a red-black tree.

[0054] The following will schematically illustrate the red-black tree as the basic data structure of the slice content tree.

[0055] by Figure 5 For example, it should be noted that Figure 5 Each text node in the binary tree uses the position index as the node value. That is, the position index corresponding to each text node is the node value of the binary tree. Assume that the original position index corresponding to the current text node is 1, and the left subtree node tree corresponding to position index 1 is 0. Therefore, Figure 7 As shown, the updated target position index of the text node can be represented by (0, 1), where "0" represents the total number of left subtree nodes and "1" represents the current node number.

[0056] Continue to refer Figure 5 , assuming that the original position index corresponding to the current text node is 6, position index 6 is the parent node, the total number of corresponding left subtree nodes is 1, and the current number of nodes is: 6-1=5, so, Figure 7 As shown, the updated target position index of the text node can be represented by (1, 5), where "1" represents the total number of left subtree nodes corresponding to the text node, and "5" represents the current node tree.

[0057] Continue to refer Figure 5 , assuming that the original position index corresponding to the current text node is 15, the original position index 15 is the right child node, the total number of corresponding left subtree nodes is 0, the original position index 15, relative to its parent node, that is, the target position index (0, 6), its increment is 9, so, Figure 7 As shown, the updated target position index of the text node can be represented by (0, 9), where "0" represents the total number of left subtree nodes corresponding to the text node, and "9" represents the current node tree.

[0058] Continue to refer Figure 5 , assuming that the original position index corresponding to the current text node is 18, the total number of left subtree nodes corresponding to the original position index 18 is: 1+9+5=15, and the current number of nodes is: 18-15=3, so, Figure 7 As shown, the updated target position index of the text node can be represented by (15, 3), where "15" represents the total number of left subtree nodes corresponding to the text node, and "3" represents the current node tree.

[0059] In addition, when modifying a node, there is no need to update subsequent nodes in sequence. You only need to traverse the parent node upwards, update the number of nodes in the parent node's left subtree, and recurse to the root node in sequence to complete the position information modification. Finally, for the right subtree of the root node, the parent node position information will be updated in the next calculation, and the latest position of the current node will be recalculated. Figure 8 The figure shows a schematic diagram of inserting data.

[0060] Furthermore, since each text has a clear location index, the information of each position change and the modified data can be recorded and stored in the operation stack for managing user editing records. At the same time, since the editing process is reversible, the operation type and editing data can be obtained through the operation stack information, and the editor can provide rollback operations and version control.

[0061] In this embodiment, the self-balancing advantage of the red-black tree is utilized to optimize the storage of the node position index to a multi-level information combination, and the dynamic binding calculation reduces the time complexity of the add and delete operations from O(n) to O(logn).

[0062] In one implementation, rendering a page according to the document structure tree may include: performing view management on the paragraph components included in the paragraph nodes and the content components included in the content nodes based on a multi-level cache mechanism, and rendering the page based on the view management result.

[0063] Among them, in another implementation method, the multi-level cache mechanism includes a first-level cache, a second-level cache and a third-level cache in sequence; the view management of the components included in the paragraph nodes and the content nodes based on the multi-level cache mechanism includes: using virtual scrolling technology to determine the view reference object of the paragraph node corresponding to the current page view as the first-level cache, the view reference object of the paragraph node corresponding to the historical view as the second-level cache, and the content node corresponding to the view reference object of each paragraph node in the second-level cache as the third-level cache.

[0064] It can be understood that the view container is generated with the paragraph node as the smallest unit, and the adjacent views are arranged in a waterfall shape from top to bottom in the form of a linked list. The virtual scrolling technology is used, that is, only the data in the visible area is rendered to improve performance and memory utilization, realize on-demand loading, and solve the problems caused by slow response, insufficient memory, performance bottlenecks, etc. caused by browser rendering.

[0065] Among them, for the three-level cache mechanism, illustratively, as Fig. 9 As shown, the first-level cache is enabled for the view displayed in the foreground to optimize the efficiency of adding, deleting, modifying and checking in the layout. The view data before modification is stored in the first-level cache. The change is determined by marking. If not, the cached view is directly taken out and only the modified view is partially refreshed. The second-level cache is enabled for the views that are moved out within the preset time period and the views to be moved in. Among them, LRU (Least Recently Used) can be used as a cache strategy to maintain a view queue, prioritize the most recently accessed views, and remove the views that have not been used for the longest time to reserve space for new views. In this way, when users scroll up and down frequently, they can directly obtain the old view data from the second-level cache without having to re-view, thereby achieving page scrolling optimization. For text components, image components, table components, etc. in content nodes, the third-level cache can be enabled. In other words, the third-level cache is used to save the created view reference objects.

[0066] Optionally, when creating a new type of component view, check in turn from the first-level, second-level, and third-level caches whether there is a view reference object. If so, fill in the data and then render it to avoid repeatedly creating views and consuming a lot of memory.

[0067] Optionally, before rendering the page based on the view management result, the method may further include the following steps: Step 1: Use the MVVM pattern to process data and business logic, monitor data changes in the document structure tree, and drive view updates through the ViewModel two-way binding communication mechanism.

[0068] Among them, MVVM (Model-View-ViewModel) is an event-driven programming method that simplifies the user interface. It is divided into views, data models, and view data layers to control data communication. View is the view layer, Model is the data model, and stores the constructed document structure tree; ViewModel is a communication mechanism to achieve two-way data binding, monitors data changes in the Model, and updates the view content.

[0069] Step 2: Set up the text style processing tool, mark the start and end positions, record the target style in the specified area, set the text appearance, and perform the view measurement-layout-drawing-rendering in sequence.

[0070] In the document structure tree, for text components with different attributes and styles, in the rendering stage, you can use editable text frames or controls on different platforms to style individual text components, mark the start and end positions of each attribute, and set the text appearance. In the drawing stage, the view is rendered to the display screen through the steps of measurement-layout-drawing-sub-View drawing-display, which can include the following processes: first measure the width, height and size of the view to determine the position and size of the view in the parent container, then select the drawing canvas, use drawing instructions such as drawing lines, graphics, colors, etc. to render its own content, then traverse the sub-Views in the container, call the test, layout and drawing methods, and draw them one by one on the canvas. Finally, render the drawn content to the bitmap buffer and display it to the screen through some hardware operations such as double buffering and page flipping.

[0071] Fig.10 A schematic diagram showing the structure of a page rendering device provided by an embodiment of the present application is shown as follows: Fig.10 As shown, the page rendering device 1000 may include: a first construction module 1010 , a second construction module 1020 and a rendering module 1030 .

[0072] In this embodiment, the first construction module 1010 is used to construct a document object model tree by parsing the source code of the target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree; the second construction module 1020 is used to construct a document structure tree by parsing the document object model tree, wherein the document structure tree includes document nodes and partition nodes, each of the partition nodes includes at least one paragraph node, each of the paragraph nodes includes at least one content node, and the document node, the partition node, the paragraph node and the content node all include node control information; the rendering module 1030 is used to render the page according to the document structure tree.

[0073] In one implementation, the second construction module 1020 is specifically used to: traverse the object nodes in the document object model tree in sequence, determine the label path corresponding to each object node, wherein the label path includes the hierarchical information, node type and position information of the object node; and construct the document structure tree based on each object node and the label path corresponding to each object node.

[0074] In one implementation, the second construction module 1020 is specifically used to: when the node type of the object node is an element node and the hierarchical information is a document hierarchy, determine that the object node is a document node in the document structure tree; when the node type of the object node is an element node and the hierarchical information is a root hierarchy, determine that the object node is a partition node in the document structure tree; when the node type of the object node is an element node and the hierarchical information is a block hierarchy, determine that the object node is a paragraph node in the document structure tree; when the node type of the object node is a text node, determine that the object node is a content node in the document structure tree; when the node type of the object node is an attribute node, add the node content corresponding to the attribute node to the corresponding node control information of the content node.

[0075] In one implementation, the page rendering device 1000 further includes a grouping module, which is used to group the content nodes according to the style attributes of each content node for each paragraph node; and update the document structure tree according to the grouping result.

[0076] In one implementation, the grouping module is specifically used to: merge the content nodes within the same group to obtain merged content corresponding to each group; for the merged content corresponding to each group, construct a target node based on the merged content, and replace the content node corresponding to the merged content with the target node, wherein the parent node of the target node and the content node is the same paragraph node.

[0077] In one implementation, the grouping module is specifically used to: traverse the content nodes included in the paragraph node in sequence, and compare the style attributes of the current content node with the style attributes of the target content node, wherein the target content node is the previous content node adjacent to the current content node; when the style attributes of the current content node are consistent with the style attributes of the target content node, add the current content node to the group corresponding to the target content node; when the style attributes of the current content node are inconsistent with the style attributes of the target content node or the target content node does not exist, create a target group and add the current content node to the target group, wherein the style attributes corresponding to the target group are consistent with the style attributes of the current content node.

[0078] In one implementation, the page rendering device 1000 also includes a slicing module, which is used to segment the text content included in the at least one content node based on a preset threshold to obtain at least one slice content; and construct a binary tree-based slice content tree based on the at least one slice content, wherein each of the slice contents corresponds to a text node in the slice content tree.

[0079] In one implementation, the page rendering device 1000 also includes an update module, which is used to update the original position index of each text node in the slice content tree to the corresponding target position index in sequence, starting from the leaf node of the left subtree of the slice content tree; wherein, when the text node is a left child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the original position index; when the text node is a right child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the target position index of the parent node corresponding to the right child node, wherein the total number of left subtree nodes is the total number of nodes of the left subtree corresponding to the original position index of the text node.

[0080] In one implementation, the rendering module 1030 is specifically used to: perform view management on the paragraph components included in the paragraph nodes and the content components included in the content nodes based on a multi-level cache mechanism; and render the page based on the view management result.

[0081] In one implementation, the multi-level cache mechanism includes a first-level cache, a second-level cache, and a third-level cache in sequence; the rendering module 1030 is specifically used to: use virtual scrolling technology to determine the view reference object of the paragraph node corresponding to the current page view as the first-level cache, determine the view reference object of the paragraph node corresponding to the historical view as the second-level cache, and determine the content node corresponding to the view reference object of each paragraph node in the second-level cache as the third-level cache.

[0082] A page rendering device provided in an embodiment of the present application can implement each process implemented in the embodiment of the page rendering method, and will not be described again here to avoid repetition.

[0083] The page rendering device in the embodiment of the present application may be a device, or a component, an integrated circuit, or a chip in an electronic device. The embodiment of the present application does not specifically limit this.

[0084] The page rendering device in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, an iOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0085] Optional, such as Fig.11 As shown, an embodiment of the present application also provides an electronic device 1100, including a processor 1110, a memory 1120, and a program or instruction stored in the memory 1120 and executable on the processor 1110. When the program or instruction is executed by the processor 1110, each process of the above-mentioned page rendering method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0086] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, each process of the above-mentioned page rendering method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0087] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0088] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned page rendering method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0089] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0090] The embodiment of the present application also provides a computer program product, which includes at least one computer program. When the computer program is loaded and executed by a processor, the various processes of the above-mentioned page rendering method embodiment are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0091] It should be noted that, in this article, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved. For example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0092] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0093] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.< / h1> < / canvas> < / object> < / bdo>

Claims

1. A page rendering method, characterized in that: include: Constructing a document object model tree by parsing the source code of the target page, wherein each HTML tag in the source code corresponds to an object node in the document object model tree; By parsing the document object model tree, a document structure tree is constructed, wherein the document structure tree includes document nodes and partition nodes, each partition node includes at least one paragraph node, each paragraph node includes at least one content node, and the document node, the partition node, the paragraph node and the content node all include node control information; The page is rendered according to the document structure tree.

2. The method according to claim 1, characterized in that The process of constructing a document structure tree by parsing the document object model tree includes: Traversing the object nodes in the document object model tree in sequence, and determining a label path corresponding to each object node, wherein the label path includes the level information, node type and position information of the object node; The document structure tree is constructed based on each of the object nodes and the label paths respectively corresponding to the object nodes.

3. The method according to claim 2, characterized in that The step of constructing the document structure tree based on each of the object nodes and the label paths respectively corresponding to the object nodes includes: When the node type of the object node is an element node and the level information is a document level, determining that the object node is a document node in the document structure tree; When the node type of the object node is an element node and the level information is a root level, determining that the object node is a partition node in the document structure tree; When the node type of the object node is an element node and the level information is a block level, determining that the object node is a paragraph node in the document structure tree; In the case where the node type of the object node is a text node, determining that the object node is a content node in the document structure tree; In the case that the node type of the object node is an attribute node, the node content corresponding to the attribute node is added to the node control information of the corresponding content node.

4. The method according to claim 1, characterized in that: After constructing the document structure tree by parsing the document object model tree, the method further includes: For each of the paragraph nodes, group the content nodes according to the style attributes of each of the content nodes; The document structure tree is updated according to the grouping result.

5. The method according to claim 4, characterized in that The updating of the document structure tree according to the grouping result includes: Merging the content nodes in the same group to obtain merged content corresponding to each group; For the merged content corresponding to each group, a target node is constructed based on the merged content, and the content node corresponding to the merged content is replaced with the target node, wherein the parent node of the target node and the content node is the same paragraph node.

6. The method according to claim 4, characterized in that The grouping of the content nodes according to the style attributes of the content nodes includes: Traversing the content nodes included in the paragraph node in sequence, and comparing the style attribute of the current content node with the style attribute of the target content node, wherein the target content node is the previous content node adjacent to the current content node; When the style attribute of the current content node is consistent with the style attribute of the target content node, adding the current content node to the group corresponding to the target content node; When the style attributes of the current content node are inconsistent with the style attributes of the target content node or the target content node does not exist, a target group is created and the current content node is added to the target group, wherein the style attributes corresponding to the target group are consistent with the style attributes of the current content node.

7. The method according to claim 1, characterized in that After constructing the document structure tree by parsing the document object model tree, the method further includes: Based on a preset threshold, segment the text content included in the at least one content node to obtain at least one slice content; According to the at least one slice content, a slice content tree based on a binary tree is constructed, wherein each slice content corresponds to a text node in the slice content tree.

8. The method according to claim 7, characterized in that After constructing a slice content tree based on a binary tree according to the at least one slice content, the method further includes: Starting from the leaf node of the left subtree of the slice content tree, the original position index of each text node in the slice content tree is updated to the corresponding target position index in sequence; Among them, when the text node is a left child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the original position index; when the text node is a right child node, the target position index corresponding to the text node is determined based on the total number of left subtree nodes and the target position index of the parent node corresponding to the right child node, and the total number of left subtree nodes is the total number of nodes of the left subtree corresponding to the original position index of the text node.

9. The method according to claim 1, characterized in that: The page rendering according to the document structure tree includes: Based on a multi-level cache mechanism, view management is performed on the paragraph components included in the paragraph nodes and the content components included in the content nodes; Render the page based on the view management results.

10. The method according to claim 9, characterized in that The multi-level cache mechanism includes a first-level cache, a second-level cache and a third-level cache in sequence; The view management of the components included in the paragraph node and the content node based on the multi-level cache mechanism includes: Using virtual scrolling technology, the view reference object of the paragraph node corresponding to the current page view is determined as the first-level cache, the view reference object of the paragraph node corresponding to the historical view is determined as the second-level cache, and the content node corresponding to the view reference object of each paragraph node in the second-level cache is determined as the third-level cache.

Images