CN112100546A

CN112100546A - Form loading method and device, storage medium and electronic equipment

Info

Publication number: CN112100546A
Application number: CN202010955628.2A
Authority: CN
Inventors: 董洁
Original assignee: Neusoft Corp
Current assignee: Neusoft Corp
Priority date: 2020-09-11
Filing date: 2020-09-11
Publication date: 2020-12-18
Anticipated expiration: 2040-09-11
Also published as: CN112100546B

Abstract

The disclosure relates to a form loading method, a form loading device, a storage medium and an electronic device, wherein the method comprises the following steps: the method comprises the steps of obtaining a node set corresponding to a form to be loaded, wherein the node set comprises a plurality of nodes, obtaining position information of an element area corresponding to each node on a form page, determining a target node from the nodes according to the position information, rendering the target node according to the node type of the target node to obtain a form frame of the form to be loaded, and loading the form to be loaded according to the form frame. According to the method and the device, the form frame is loaded firstly, the form to be loaded is loaded on the basis of the form frame, the first screen loading page does not need to be established in advance according to the form page, the loading efficiency of the form to be loaded can be improved while the first screen loading speed is improved, the waiting time of a user is reduced, and the form to be loaded is continuously loaded on the basis of the form frame because the form frame is a part of the form to be loaded, so that the loading flow cannot be wasted.

Description

Form loading method and device, storage medium and electronic equipment

Technical Field

The present disclosure relates to the field of form loading technologies, and in particular, to a form loading method and apparatus, a storage medium, and an electronic device.

Background

The form is one of the important elements in the web page and is mainly responsible for data acquisition functions. Improving the first screen loading speed of the form is always the key optimization target of form loading. In the related technology, before loading a form to be loaded, a technician loads a first screen loading interface established in advance according to a form page of the form to be loaded or directly loads a preset image to perform first screen rendering. However, a user often sets a plurality of custom components in a form to be loaded, so that a final form page is unpredictable (i.e., the form page is not fixed), which makes it difficult for a technician to establish a first-screen loading interface according to the form page. The preset image is directly loaded to perform the first screen rendering, and the preset image needs to be loaded first before the form to be loaded is loaded each time, and then the form to be loaded is loaded, so that the loading efficiency of the form to be loaded is reduced, and the waiting time of a user is increased. Meanwhile, the loading flow is wasted due to the fact that the preset images are loaded more.

Disclosure of Invention

In order to solve the problems in the related art, an object of the present disclosure is to provide a form loading method, apparatus, storage medium, and electronic device.

In order to achieve the above object, according to a first aspect of the embodiments of the present disclosure, there is provided a method for loading a form, the method including:

acquiring a node set corresponding to a form to be loaded, wherein the node set comprises a plurality of nodes, and each node is used for representing a form element on a form page of the form to be loaded;

acquiring the position information of the element area corresponding to each node on the form page;

determining a target node from the plurality of nodes according to the position information;

rendering the target node according to the node type of the target node to obtain a form frame of the form to be loaded;

and loading the form to be loaded according to the form frame.

Optionally, the node set is a document object model DOM tree, and determining a target node from the plurality of nodes according to the location information includes:

sequentially traversing a plurality of levels of the DOM tree according to a target direction, wherein the target direction is a direction from a root node to a leaf node of the DOM tree, and each level corresponds to at least one node in the plurality of nodes;

regarding a target level traversed to currently in the multiple levels, taking a node which has the same father node and does not belong to a leaf node in the at least one node corresponding to the target level as multiple nodes to be processed corresponding to the target level;

updating the DOM tree according to the nodes to be processed corresponding to the target level to obtain an updated DOM tree;

and after traversing the multiple hierarchies according to the target direction, determining the target node according to the updated DOM tree.

Optionally, the updating the DOM tree according to the plurality of nodes to be processed corresponding to the target hierarchy to obtain an updated DOM tree includes:

determining a target node to be processed from the plurality of nodes to be processed through a node selection step according to the position information of the element area corresponding to the plurality of nodes to be processed;

and discarding branches of other nodes to be processed in the DOM tree except the target node to be processed to obtain the updated DOM tree.

Optionally, the determining the target node according to the updated DOM tree includes:

taking the nodes belonging to the leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes;

and determining the target node from the candidate leaf nodes through the node selection step according to the position information of the element region corresponding to the candidate leaf nodes.

Optionally, the node selecting step includes:

determining whether the element areas corresponding to every two designated nodes are intersected on the form page or not according to the position information of the element areas corresponding to the designated nodes; the designated node comprises the node to be processed or the candidate leaf node;

if the element areas corresponding to any two designated nodes intersect on the form page, acquiring an intersection matrix, wherein the intersection matrix is used for representing whether the element areas corresponding to the designated nodes in the designated nodes intersect on the form page or not;

determining the number of intersections corresponding to each designated node in the plurality of designated nodes according to the intersection matrix, wherein the number of intersections is used for representing the element area corresponding to the designated node and the number of intersections with the element areas corresponding to other designated nodes except the designated node in the plurality of designated nodes;

discarding the appointed node with the maximum intersection number to obtain a plurality of updated appointed nodes;

according to the updated designated nodes, repeatedly executing the position information of the element areas corresponding to the designated nodes, determining whether the element areas corresponding to every two designated nodes are intersected on the form page or not, and discarding the designated node with the largest intersection number to obtain the updated designated nodes until the element areas corresponding to the designated nodes in the updated designated nodes are not intersected on the form page;

and taking the plurality of updated designated nodes as target designated nodes, wherein the target designated nodes comprise the target nodes to be processed or the target nodes.

Optionally, the node selecting step further includes:

and if the element areas corresponding to every two designated nodes do not intersect on the form page, taking the designated nodes as the target designated nodes.

Optionally, the node type includes a text node, a button node, or an image node, and rendering the target node according to the node type of the target node includes:

under the condition that the node type of the target node is the text node or the button node, acquiring text information corresponding to the target node, wherein the text information comprises the height, the inner distance, the outer distance and the line height of a text, and rendering the target node according to the position information of the element area corresponding to the target node and the text information;

and under the condition that the node type of the target node is the image node, acquiring image information corresponding to the target node, wherein the image information comprises the height, the width and the inner edge distance of an image, and rendering the target node according to the position information of the element region corresponding to the target node, the image information and a preset image.

According to a second aspect of the embodiments of the present disclosure, there is provided a form loading apparatus, including:

the system comprises an acquisition module, a storage module and a processing module, wherein the acquisition module is used for acquiring a node set corresponding to a form to be loaded, the node set comprises a plurality of nodes, and each node is used for representing a form element on a form page of the form to be loaded;

the obtaining module is further configured to obtain location information of an element area corresponding to each node on the form page;

a determining module, configured to determine a target node from the plurality of nodes according to the location information;

the rendering module is used for rendering the target node according to the node type of the target node to obtain the form frame of the form to be loaded;

and the loading module is used for loading the form to be loaded according to the form frame.

Optionally, the node set is a document object model DOM tree, and the determining module includes:

the processing submodule is used for sequentially traversing a plurality of levels of the DOM tree according to a target direction, the target direction is a direction from a root node of the DOM tree to a leaf node, and each level corresponds to at least one node in the plurality of nodes;

a determining submodule, configured to, for a target level to which the target level is currently traversed in the multiple levels, regard, as multiple nodes to be processed corresponding to the target level, a node that has a same parent node and does not belong to a leaf node in the at least one node corresponding to the target level;

the updating submodule is used for updating the DOM tree according to the plurality of nodes to be processed corresponding to the target hierarchy to obtain an updated DOM tree;

and the determining submodule is further configured to determine the target node according to the updated DOM tree after the traversal of the plurality of levels according to the target direction is completed.

Optionally, the update submodule is configured to:

Optionally, the determining sub-module is configured to:

Optionally, the node selecting step includes:

Optionally, the node selecting step further includes:

Optionally, the node type includes a text node, a button node, or an image node, and the rendering module includes:

a first rendering submodule, configured to, when a node type of the target node is the text node or the button node, obtain text information corresponding to the target node, where the text information includes a height, an inner distance, an outer distance, and a line height of a text, and render the target node according to position information of the element region corresponding to the target node and the text information;

and the second rendering submodule is used for acquiring the image information corresponding to the target node under the condition that the node type of the target node is the image node, wherein the image information comprises the height, the width and the inner edge distance of an image, and the target node is rendered according to the position information of the element region corresponding to the target node, the image information and a preset image.

According to a third aspect of embodiments of the present disclosure, there is provided a computer-readable storage medium on which a computer program is stored, which, when executed by a processor, implements the steps of the method for loading a form provided by the first aspect.

According to a fourth aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including:

a memory having a computer program stored thereon;

a processor for executing the computer program in the memory to implement the steps of the form loading method provided by the first aspect.

According to the technical scheme, the method comprises the steps of firstly obtaining a node set corresponding to the form to be loaded, wherein the node set comprises a plurality of nodes, each node is used for representing an element in a form page of the form to be loaded, then obtaining position information of an element area corresponding to each node on the form page, then determining a target node from the plurality of nodes according to the position information, rendering the target node according to the node type of the target node to obtain a form frame of the form to be loaded, and finally loading the form to be loaded according to the form frame. According to the method and the device, the form frame is loaded firstly, the form to be loaded is loaded on the basis of the form frame, the first screen loading page does not need to be established in advance according to the form page, the loading efficiency of the form to be loaded can be improved while the first screen loading speed is improved, the waiting time of a user is reduced, and the form to be loaded is continuously loaded on the basis of the form frame because the form frame is a part of the form to be loaded, so that the loading flow cannot be wasted.

Additional features and advantages of the disclosure will be set forth in the detailed description which follows.

Drawings

The accompanying drawings, which are included to provide a further understanding of the disclosure and are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the description serve to explain the disclosure without limiting the disclosure. In the drawings:

FIG. 1 is a flow diagram illustrating a method for loading forms in accordance with an illustrative embodiment;

FIG. 2 is a flow chart of one step 103 shown in the embodiment of FIG. 1;

FIG. 3 is a schematic diagram of a DOM tree shown in accordance with an exemplary embodiment;

FIG. 4 is a flowchart illustrating a node selection step in accordance with an exemplary embodiment;

FIG. 5 is a schematic diagram illustrating an intersection matrix in accordance with an exemplary embodiment;

FIG. 6 is a schematic diagram illustrating another intersection matrix in accordance with an exemplary embodiment;

FIG. 7 is a flow diagram illustrating another method of loading forms in accordance with an illustrative embodiment;

FIG. 8 is a schematic diagram illustrating a render-target node in accordance with an illustrative embodiment;

FIG. 9 is a block diagram illustrating an apparatus for loading forms in accordance with an exemplary embodiment;

FIG. 10 is a block diagram of a determination module shown in the embodiment of FIG. 9;

FIG. 11 is a block diagram of a rendering module shown in the embodiment of FIG. 9;

FIG. 12 is a block diagram illustrating an electronic device in accordance with an example embodiment.

Detailed Description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.

Before introducing the form loading method, device, storage medium and electronic device provided by the present disclosure, an application scenario related to each embodiment in the present disclosure is first introduced, where the application scenario may be a scenario for loading a form to be loaded. The form to be loaded may include a plurality of form components, each of which may include at least one form element, and a form element is an element that allows a user to input information in the form. The form components may be, for example, layout components, text components, button components, picture components, and user-defined components, among others.

FIG. 1 is a flow diagram illustrating a method for loading forms in accordance with an exemplary embodiment. As shown in fig. 1, the method comprises the steps of:

step 101, a node set corresponding to a form to be loaded is obtained, the node set includes a plurality of nodes, and each node is used for representing a form element on a form page of the form to be loaded.

For example, the process of loading the form to be loaded is actually a process of loading all form elements of the form to be loaded, and in order to improve the loading speed of the first screen and ensure the loading efficiency of the form to be loaded, the loading of the form may be optimized by using a mode of loading part of the form elements of the form to be loaded first as a loading interface of the first screen and continuing loading the form to be loaded on the basis of the form elements loaded first. For example, when a form to be loaded is loaded, a node set including a plurality of nodes corresponding to the form to be loaded may be obtained in advance, and each node corresponds to a form element on a form page of the form to be loaded. All form elements of the form to be loaded exhibit a hierarchical structure, except for the top level form element html (English: Hyper Text Markup Language, Chinese: hypertext Markup Language), all other form elements are contained in the other form elements. Therefore, the plurality of nodes included in the node set also have a hierarchical structure, and among the plurality of nodes, a node corresponding to the top level table element html may be used as a root node, and if a table element corresponding to a first node includes a table element corresponding to a second node, the first node may be used as a parent node of the second node, the second node may be used as a child node of the first node, and a node having no child node may be used as a leaf node.

And 102, acquiring the position information of the element area corresponding to each node on the form page.

For example, after the node set is obtained, the position information of the element area corresponding to each node on the form page may be obtained. The position information may be vertex coordinates of an element area corresponding to the node on the form page, and the manner of acquiring the position information may be: and pre-loading a complete form to be loaded once, then obtaining the vertex coordinates of the element area corresponding to each node on the form page from the form page of the loaded complete form to be loaded, and taking the obtained vertex coordinates of the element area corresponding to each node on the form page as the position information of the element area corresponding to the node. For example, when the element region corresponding to the node is a rectangle and the four acquired vertex coordinates are (10, 20), (10, 40), (30, 20), and (30, 40), the vertex coordinates (10, 20), (10, 40), (30, 20), and (30, 40) may be used as the position information of the element region corresponding to the node. Meanwhile, the position information may be further simplified, and the vertex coordinates may be represented in a form of four coordinates, for example, vertex coordinates (10, 20), (10, 40), (30, 20), and (30, 40) may be represented by (10, 20, 30, 40), that is, (10, 20, 30, 40) may be used as the position information of the element region corresponding to the node.

Step 103, determining a target node from the plurality of nodes according to the position information.

Specifically, loading part of the form elements of the form to be loaded as the first screen loading interface actually selects a target node from a plurality of nodes for loading, where the target node is a node corresponding to the form elements forming the first screen loading interface. After the location information is obtained, the plurality of nodes may be screened according to the location information, so as to select a target node from the plurality of nodes. For example, in the plurality of nodes, according to the direction from the high hierarchy to the low hierarchy, it may be determined whether the element regions corresponding to each two target non-leaf nodes intersect on the form page according to the position information of the element regions corresponding to the plurality of target non-leaf nodes that do not belong to the leaf node in the node corresponding to each hierarchy. And then discarding part of target non-leaf nodes with the corresponding element areas intersected on the form page (discarding a certain node, including not only discarding the node itself, but also discarding the child node of the node), so that the element areas corresponding to the remaining target non-leaf child nodes are not intersected on the form page, and thus, the screening of a plurality of nodes is completed. And finally, taking the nodes which belong to the leaf nodes in the screened nodes as target nodes.

And 104, rendering the target node according to the node type of the target node to obtain the form frame of the form to be loaded.

In this step, the nodes may be divided into nodes of different node types according to differences of specific elements included in the form elements corresponding to the nodes (for example, the form elements may include image elements, text elements, or button elements), where the node types may include text nodes, button nodes, or image nodes. Nodes of different node types are rendered in different ways, for example, when a node type of a certain node is an image node, image elements included in table elements corresponding to the node need to be rendered. In order to further improve the first screen loading speed, only the frame of the table element corresponding to the target node can be loaded when the target node is rendered. For example, loading modes corresponding to different node types may be preset, after the target node is determined, the loading mode corresponding to the node type of the target node is selected according to the node type of the target node, the target node is rendered, a frame of form elements corresponding to the target node is obtained, and a form frame of the form to be loaded is composed of the frames of the form elements corresponding to all the target nodes.

And 105, loading the form to be loaded according to the form frame.

For example, after the form frame of the form to be loaded is obtained, the unloaded part of the form element corresponding to the target node and the other nodes except the target node in the plurality of nodes may be continuously loaded on the basis of the form frame, so as to complete the loading of the form to be loaded, and obtain the complete form to be loaded.

In summary, in the disclosure, a node set corresponding to a form to be loaded is first obtained, where the node set includes a plurality of nodes, each node is used to represent an element in a form page of the form to be loaded, then position information of an element area corresponding to each node on the form page is obtained, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to a node type of the target node to obtain a form frame of the form to be loaded, and finally the form to be loaded is loaded according to the form frame. According to the method and the device, the form frame is loaded firstly, the form to be loaded is loaded on the basis of the form frame, the first screen loading page does not need to be established in advance according to the form page, the loading efficiency of the form to be loaded can be improved while the first screen loading speed is improved, the waiting time of a user is reduced, and the form to be loaded is continuously loaded on the basis of the form frame because the form frame is a part of the form to be loaded, so that the loading flow cannot be wasted.

Fig. 2 is a flow chart illustrating one step 103 of the embodiment shown in fig. 1. As shown in FIG. 2, the nodes are grouped into a DOM tree, and step 103 may include the following steps:

and step 1031, sequentially traversing a plurality of hierarchies of the DOM tree according to a target direction, wherein the target direction is a direction from a root node of the DOM tree to a leaf node, and each hierarchy corresponds to at least one node in the plurality of nodes.

For example, the node set may be a DOM tree composed of a plurality of levels, each level corresponding to at least one node, and a node corresponding to a highest level in the DOM tree is a root node. After the position information is obtained, the multiple levels of the DOM tree can be sequentially traversed according to the target direction from the root node to the leaf node of the DOM tree, namely, the multiple levels of the DOM tree are sequentially traversed from the root node of the DOM tree to the low level according to the direction from the high level to the low level.

Step 1032, regarding a target level traversed currently in the multiple levels, taking a node which has the same father node and does not belong to a leaf node in at least one node corresponding to the target level as multiple nodes to be processed corresponding to the target level.

For example, in the process of traversing multiple hierarchies of the DOM tree, for a target hierarchy currently traversed, the nodes corresponding to the target hierarchy may be preliminarily screened according to a node relationship between the node corresponding to the target hierarchy and the node corresponding to a previous hierarchy of the target hierarchy, so that the nodes corresponding to the target hierarchy have the same parent node and do not belong to leaf nodes, and the nodes serve as nodes to be processed. Taking the DOM tree shown in fig. 3 as an example for explanation (1-11 in fig. 3 represent different nodes, respectively, node 1 is a root node, a node located above the two connected nodes is a parent node, and a node located below the two connected nodes is a child node), when the target hierarchy is hierarchy 3, it can be determined that nodes corresponding to hierarchy 3 have

nodes

4, 5, 6, 7, and 8, where

nodes

4, 5, and 6 have the same parent node, and

nodes

4 and 6 do not belong to leaf nodes, and

nodes

7 and 8 have the same parent node, but

nodes

7 and 8 belong to leaf nodes, then

nodes

4 and 6 can be regarded as nodes to be processed. Furthermore, in all nodes corresponding to the target hierarchy, nodes not belonging to leaf nodes can be directly used as nodes to be processed, that is, the

nodes

4 and 6 can be directly used as nodes to be processed together.

And 1033, updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree.

In this step, in at least one to-be-processed node corresponding to the target hierarchy, there may be multiple sets of to-be-processed nodes where corresponding element regions intersect on the form page, where each set of to-be-processed nodes includes two to-be-processed nodes. In order to improve the first screen loading speed, a plurality of nodes to be processed can be further screened, and the part of nodes to be processed, where the element areas corresponding to the plurality of nodes to be processed are intersected, on the form page is discarded, so that the element areas corresponding to the remaining nodes to be processed in the discarded nodes to be processed are not intersected on the form page, and a DOM tree is updated, thereby reducing the number of nodes to be processed (namely reducing the number of table elements contained in a first screen loading interface) and improving the first screen loading speed. For example, after determining a plurality of nodes to be processed corresponding to a target hierarchy, a target node to be processed may be determined from the plurality of nodes to be processed through a node selection step according to position information of an element region corresponding to the plurality of nodes to be processed. The node selecting step may select, from the plurality of nodes to be processed, a plurality of nodes to be processed for which the corresponding element areas do not intersect on the form page as target nodes to be processed, according to the position information of the element areas corresponding to the plurality of nodes to be processed. And then, discarding branches of other nodes to be processed in the DOM tree except the target node to be processed to obtain an updated DOM tree. As shown in fig. 3, when the nodes to be processed include

nodes

4 and 6, the

nodes

4 and 6 are selected through a node selection step, and if it is determined that the target node to be processed is the node 6, the branch where the node 4 is located is discarded, that is, the

nodes

4, 9 and 10 are discarded.

And 1034, after traversing the multiple levels according to the target direction, determining a target node according to the updated DOM tree.

Specifically, after traversing the multiple levels according to the target direction is completed (i.e., after the nodes corresponding to each level are screened and the DOM tree is updated according to the target to-be-processed nodes corresponding to the levels obtained after screening), the nodes belonging to the leaf nodes in the updated DOM tree can be used as multiple candidate leaf nodes, and the target nodes are determined from the multiple candidate leaf nodes through the node selection step according to the position information of the element regions corresponding to the multiple candidate leaf nodes. The node selecting step may select, from the plurality of candidate leaf nodes, a plurality of candidate leaf nodes, as the target nodes, where the corresponding element regions do not have intersections on the form page, according to the position information of the element regions corresponding to the plurality of candidate leaf nodes. As shown in fig. 3, in the case that the updated DOM tree includes

nodes

1, 2, 3, 5, 6, 7, 8, and 11, it may be determined that the

nodes

5, 7, 8, and 11 are leaf nodes, and the

nodes

5, 7, 8, and 11 are candidate leaf nodes, and if the nodes obtained by selecting the

nodes

5, 7, 8, and 11 through the node selection step are 7 and 11, the

nodes

7 and 11 are target nodes.

It should be noted that the method for determining the target node is not limited to steps 1031 to 1034, and in an implementation manner, all leaf nodes in the DOM tree may be screened through the node selection step directly according to the position information of the element regions corresponding to all leaf nodes in the DOM tree, and the leaf nodes obtained after screening are used as the target nodes, and the target nodes are determined from a plurality of candidate leaf nodes. In another implementation manner, the target node may also be a non-leaf node, for example, a designated level may be preset, and when the target node is determined, the non-leaf node in the multiple levels between the root node of the DOM tree and the designated level may be screened through the node selection step directly according to the position information of the element region corresponding to the non-leaf node in the multiple levels between the root node of the DOM tree and the designated level, and the non-leaf node obtained after the screening is used as the target node.

Fig. 4 is a flow chart illustrating a node selection step in accordance with an exemplary embodiment. As shown in fig. 4, the node selecting step includes the following steps:

step 201, determining whether the element areas corresponding to every two designated nodes intersect on the form page according to the position information of the element areas corresponding to the designated nodes, wherein the designated nodes include nodes to be processed or candidate leaf nodes.

For example, when the position information is a vertex coordinate of an element region corresponding to a node on a form page, if a plurality of designated nodes (i.e., a plurality of nodes to be processed or a plurality of candidate leaf nodes) are screened, first, whether the element regions corresponding to every two designated nodes intersect with each other on the form page may be determined by using a preset formula according to the position information of the element regions corresponding to the plurality of designated nodes. For example, when the vertex coordinates are expressed in the form of four coordinates, the preset formula may be expressed as, for each first designated node and each second designated node included in two designated nodes:

|Xb2+Xb1-Xa2-Xa1|≤Xa2-Xa1+Xb2-Xb1

|Yb2+Yb1-Ya2-Ya1|≤Ya2-Ya1+Yb2-Yb1

xa1, Ya1, Xa2 and Ya2 are vertex coordinates corresponding to the first designated node, and Xb1, Yb1, Xb2 and Yb2 are vertex coordinates corresponding to the second designated node.

Step 202, if the element areas corresponding to any two designated nodes intersect on the form page, an intersection matrix is obtained, and the intersection matrix is used for representing whether the element areas corresponding to the designated nodes in the plurality of designated nodes intersect on the form page.

In this step, if the element areas corresponding to any two designated nodes intersect on the form page, an intersection matrix may be generated according to whether the element areas corresponding to every two designated nodes in the plurality of designated nodes intersect on the form page. The intersection matrix may be, for example, as shown in fig. 5, a-I in fig. 5 represent different designated nodes, and each number "1" in the intersection matrix is used to characterize that there is an intersection at the designated node corresponding to the [ I ] th row and [ j ] th column where the number "1" is located, where I, j are positive integers greater than 0. For example, when i is 2 and j is 3, it indicates that there is an intersection between the element areas corresponding to the designated node a and the designated node B on the form page.

Step 203, determining the number of intersections corresponding to each designated node in the plurality of designated nodes according to the intersection matrix, wherein the number of intersections is used for representing the element area corresponding to the designated node and the number of intersections with the element areas corresponding to other designated nodes except the designated node in the plurality of designated nodes.

After the intersection matrix is obtained, the number of intersections corresponding to each designated node may be further determined according to the intersection matrix. Taking fig. 5 as an example, as can be seen from the intersection matrix, if the element areas corresponding to the designated node a and the element areas corresponding to the designated node B, C intersect each other on the form page, the number of intersections corresponding to the designated node a is 2. If the element areas corresponding to the designated node B and the element areas corresponding to the designated node A, C, D intersect each other on the form page, the number of intersections corresponding to the designated node B is 3. If the element area corresponding to the designated node C intersects with the element area corresponding to the designated node A, B on the form page, the number of intersections corresponding to the designated node C is 2. By analogy, the number of intersections corresponding to the designated node D is 4, the number of intersections corresponding to the designated node E is 0, the number of intersections corresponding to the designated node F is 1, the number of intersections corresponding to the designated node G is 1, the number of intersections corresponding to the designated node H is 1, and the number of intersections corresponding to the designated node I is 0.

And step 204, discarding the designated node with the largest intersection number to obtain a plurality of updated designated nodes.

Specifically, in order to obtain multiple designated nodes where the corresponding element regions do not intersect on the form page and avoid discarding too many designated nodes, the designated node with the largest number of intersections may be discarded first, so as to obtain multiple updated designated nodes. As shown in fig. 5, the designated node with the largest intersection number in the plurality of designated nodes corresponding to fig. 5 is the designated node D, and the designated node D may be discarded to obtain the updated plurality of designated nodes: node A, B, C, E, F, G, H, I is designated.

And step 205, repeatedly executing the steps 201 to 204 according to the updated plurality of designated nodes until the element areas corresponding to the designated nodes in the updated plurality of designated nodes are not intersected on the form page.

For example, after obtaining the updated designated nodes, step 201 to step 204 may be repeatedly executed according to the updated designated nodes, so as to continuously discard the designated node with the largest number of intersections corresponding to the updated designated nodes, so as to continuously update the designated nodes until the element areas corresponding to the designated nodes in the updated designated nodes do not intersect with each other on the form page. For example, after discarding the designated node D with the largest intersection number in the plurality of designated nodes corresponding to fig. 5, the updated plurality of designated nodes are obtained: node A, B, C, E, F, G, H, I is designated. Then, it can be determined whether there is an intersection between the element areas corresponding to every two designated nodes in the designated node A, B, C, E, F, G, H, I on the form page according to the position information of the element areas corresponding to the designated node A, B, C, E, F, G, H, I. If the element areas corresponding to any two designated nodes in the designated node A, B, C, E, F, G, H, I intersect with each other on the form page, an intersection matrix may be generated according to whether the element areas corresponding to every two designated nodes in the designated node A, B, C, E, F, G, H, I intersect with each other on the form page, where the intersection matrix may be as shown in (a) in fig. 6. Further, since it is already given in the intersection matrix shown in fig. 5 whether there is an intersection on the form page in the element area corresponding to every two designated nodes in the designated node A, B, C, E, F, G, H, I, the intersection matrix shown in (a) in fig. 6 can be obtained by directly discarding the row and column where the designated node D is located in the intersection matrix shown in fig. 5.

Next, it may be determined that the number of intersections corresponding to the designated node A, B, C, E, F, G, H, I is 2, 0, respectively, based on the intersection matrix shown in (a) of fig. 6. At this time, the designated node with the largest number of intersections is the designated node A, B, C, any one of the designated nodes A, B, C may be discarded, and if the designated node C is discarded, the updated designated nodes may be: A. b, E, F, G, H, I are provided. The above steps may then be repeated to determine the intersection matrix corresponding to the designated node A, B, E, F, G, H, I, and the intersection matrix corresponding to A, B, E, F, G, H, I may be as shown in fig. 6 (b). Then, it can be determined that the number of intersections corresponding to the designated node A, B, E, F, G, H, I is 1, 0, respectively, based on the intersection matrix shown in (b) of fig. 6. At this time, the designated node with the largest number of intersections is the designated node A, B, any one of the designated nodes A, B may be discarded, and if the designated node B is discarded, the updated designated nodes may be: A. e, F, G, H, I are provided. The above steps are repeated to determine the intersection matrix corresponding to the designated node A, E, F, G, H, I, where the intersection matrix corresponding to the designated node A, E, F, G, H, I may be as shown in (c) in fig. 6, at this time, the element regions corresponding to the designated nodes in the designated node A, E, F, G, H, I do not intersect on the form page, that is, the designated node A, E, F, G, H, I is a plurality of updated designated nodes that need to be acquired finally.

And step 206, taking the updated designated nodes as target designated nodes, wherein the target designated nodes comprise target nodes to be processed or target nodes.

For example, after obtaining the final updated designated nodes, the updated designated nodes may be used as target designated nodes (the target designated nodes may be target nodes to be processed or target nodes). As shown in (c) of fig. 6, the designated node A, E, F, G, H, I may be the target designated node. Further, when determining whether the element areas corresponding to every two designated nodes intersect on the form page according to the position information of the element areas corresponding to the plurality of designated nodes for the first time, if the element areas corresponding to every two designated nodes do not intersect on the form page, the plurality of designated nodes can be directly used as target designated nodes.

Fig. 7 is a flow chart illustrating one step 104 of the embodiment shown in fig. 1. As shown in fig. 7, the node type includes a text node, a button node, or an image node, and step 104 includes the steps of:

step 1041, under the condition that the node type of the target node is a text node or a button node, obtaining text information corresponding to the target node, where the text information includes height, inner distance, outer distance, and line height of the text, and rendering the target node according to the position information of the element region corresponding to the target node and the text information.

In one scenario, after determining the target node, each target node of the plurality of target nodes may be traversed to determine a node type corresponding to each target node. For a target node of which the node type is a text node, text information including the height, the inner edge distance, the outer edge distance and the line height of the text corresponding to the target node can be acquired. And then, determining a text frame corresponding to the target node according to the height, the inner margin, the outer margin and the line height of the text. The text frame may be composed of a text box and a frame of each text line in a plurality of text lines included in the text, for example, when the height of the obtained text is 60px, the inner margin is 1px, and the outer margin is 3px, then the height actually occupied by the text may be calculated as: 60- (1+3) × 2 ═ 52px, and if the line height is 14px, it can be determined that the number of lines of text included in the text is 50% 14+1 ═ 4. Then, a text frame corresponding to the target node may be rendered at a position on the form page corresponding to the position information of the element area corresponding to the target node, as shown in (a) in fig. 8. For a target node with a node type of a button node, a button corresponding to the button node may be treated as a text (that is, a frame of the button is used as a text box, and an identifier corresponding to the button is used as a text), and the button frame corresponding to the target node is rendered in the same rendering manner as the text node, as shown in (b) in fig. 8.

And 1042, under the condition that the node type of the target node is an image node, acquiring image information corresponding to the target node, wherein the image information includes the height, width and inner edge distance of the image, and rendering the target node according to the position information, the image information and a preset image of an element region corresponding to the target node.

In another scenario, for a target node with a node type of an image node, image information corresponding to the target node and including the height, width, and inner edge distance of the image may be acquired. Then, an image frame corresponding to the target node can be determined according to the height, the width and the inner edge distance of the image. And rendering an image frame corresponding to the target node at a position corresponding to the position information of the element area corresponding to the target node on the form page. Then, the preset image (the preset image may be a gray image of 1 × 1, for example) is horizontally tiled in the horizontal direction of the image frame and vertically tiled in the vertical direction of the image frame within the range included in the image frame, so as to render the image frame into an image having the same width as the original image, as shown in (c) of fig. 8. By adopting the mode, in the process of loading the first screen loading page, all the target nodes with the node types of the image nodes only need to load the preset image without loading the original image, so that the first screen loading speed is increased. When the form to be loaded is loaded according to the form frame, the image frame corresponding to the target node can be directly replaced by the original image.

FIG. 9 is a block diagram illustrating an apparatus for loading forms in accordance with an exemplary embodiment. As shown in fig. 9, the apparatus 300 includes:

the obtaining module 301 is configured to obtain a node set corresponding to the form to be loaded, where the node set includes a plurality of nodes, and each node is used to represent one form element on a form page of the form to be loaded.

The obtaining module 301 is further configured to obtain location information of the element area corresponding to each node on the form page.

A determining module 302, configured to determine a target node from the plurality of nodes according to the location information.

And the rendering module 303 is configured to render the target node according to the node type of the target node, so as to obtain a form frame of the form to be loaded.

And the loading module 304 is configured to load the form to be loaded according to the form frame.

FIG. 10 is a block diagram of one type of determination module shown in the embodiment shown in FIG. 9. As shown in fig. 10, the node set is a document object model DOM tree, and the determining module 302 includes:

the processing submodule 3021 is configured to sequentially traverse multiple levels of the DOM tree according to a target direction, where the target direction is a direction from a root node to a leaf node of the DOM tree, and each level corresponds to at least one node of the multiple nodes.

The determining submodule 3022 is configured to, for a target hierarchy currently traversed to in the multiple hierarchies, regard, as multiple nodes to be processed corresponding to the target hierarchy, a node which has the same parent node and does not belong to a leaf node in at least one node corresponding to the target hierarchy.

The update submodule 3023 is configured to update the DOM tree according to the multiple nodes to be processed corresponding to the target hierarchy, so as to obtain an updated DOM tree.

The determining submodule 3022 is further configured to determine a target node according to the updated DOM tree after traversing the multiple hierarchies according to the target direction.

Optionally, the update submodule 3023 is configured to:

and determining a target node to be processed from the plurality of nodes to be processed through a node selection step according to the position information of the element areas corresponding to the plurality of nodes to be processed.

And discarding branches of other nodes to be processed except the target node to be processed in the nodes to be processed in the DOM tree to obtain an updated DOM tree.

Optionally, the determining submodule 3022 is configured to:

and taking the nodes belonging to the leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes.

And determining a target node from the candidate leaf nodes through a node selection step according to the position information of the element region corresponding to the candidate leaf nodes.

Optionally, the node selecting step includes:

and determining whether the element areas corresponding to every two designated nodes are intersected on the form page or not according to the position information of the element areas corresponding to the designated nodes, wherein the designated nodes comprise nodes to be processed or candidate leaf nodes.

If the element areas corresponding to any two designated nodes intersect on the form page, an intersection matrix is obtained, and the intersection matrix is used for representing whether the element areas corresponding to the designated nodes in the plurality of designated nodes intersect on the form page.

And determining the number of intersections corresponding to each designated node in the plurality of designated nodes according to the intersection matrix, wherein the number of intersections is used for representing the element area corresponding to the designated node and the number of intersections with the element areas corresponding to other designated nodes except the designated node in the plurality of designated nodes.

And discarding the appointed node with the maximum intersection number to obtain a plurality of updated appointed nodes.

And according to the plurality of updated designated nodes, repeatedly executing the step of determining whether the element areas corresponding to every two designated nodes are intersected on the form page or not according to the position information of the element areas corresponding to the plurality of designated nodes, and discarding the designated node with the largest intersection number to obtain the plurality of updated designated nodes until the element areas corresponding to the designated nodes in the plurality of updated designated nodes are not intersected on the form page.

And taking the plurality of updated designated nodes as target designated nodes, wherein the target designated nodes comprise target nodes to be processed or target nodes.

Optionally, the node selecting step further includes:

and if the element areas corresponding to every two designated nodes are not intersected on the form page, taking the designated nodes as target designated nodes.

FIG. 11 is a block diagram of a rendering module shown in the embodiment of FIG. 9. As shown in fig. 11, the node type includes a text node, a button node, or an image node, and the rendering module 303 includes:

the first rendering submodule 3031 is configured to, when the node type of the target node is a text node or a button node, obtain text information corresponding to the target node, where the text information includes a height, an inner distance, an outer distance, and a line height of the text, and render the target node according to the position information and the text information of the element region corresponding to the target node.

The second rendering submodule 3032 is configured to, when the node type of the target node is an image node, obtain image information corresponding to the target node, where the image information includes a height, a width, and an inner edge distance of the image, and render the target node according to the position information, the image information, and a preset image of an element region corresponding to the target node.

With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.

Fig. 12 is a block diagram illustrating an electronic device 700 according to an example embodiment. As shown in fig. 12, the electronic device 700 may include: a processor 701 and a memory 702. The electronic device 700 may also include one or more of a multimedia component 703, an input/output (I/O) interface 704, and a communication component 705.

The processor 701 is configured to control the overall operation of the electronic device 700, so as to complete all or part of the steps in the above-mentioned method for loading a form. The memory 702 is used to store various types of data to support operation at the electronic device 700, such as instructions for any application or method operating on the electronic device 700 and application-related data, such as contact data, transmitted and received messages, pictures, audio, video, and the like. The Memory 702 may be implemented by any type of volatile or non-volatile Memory device or combination thereof, such as Static Random Access Memory (SRAM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Erasable Programmable Read-Only Memory (EPROM), Programmable Read-Only Memory (PROM), Read-Only Memory (ROM), magnetic Memory, flash Memory, magnetic disk, or optical disk. The multimedia components 703 may include screen and audio components. Wherein the screen may be, for example, a touch screen and the audio component is used for outputting and/or inputting audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signal may further be stored in the memory 702 or transmitted through the communication component 705. The audio assembly also includes at least one speaker for outputting audio signals. The I/O interface 704 provides an interface between the processor 701 and other interface modules, such as a keyboard, mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 705 is used for wired or wireless communication between the electronic device 700 and other devices. Wireless Communication, such as Wi-Fi, bluetooth, Near Field Communication (NFC), 2G, 3G, 4G, NB-IOT, eMTC, or other 5G, etc., or a combination of one or more of them, which is not limited herein. The corresponding communication component 705 may thus include: Wi-Fi module, Bluetooth module, NFC module, etc.

In an exemplary embodiment, the electronic Device 700 may be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components, for performing the above loading method of the form.

In another exemplary embodiment, there is also provided a computer readable storage medium including program instructions, which when executed by a processor, implement the steps of the above-described method of loading a form. For example, the computer readable storage medium may be the above-mentioned memory 702 comprising program instructions which are executable by the processor 701 of the electronic device 700 to perform the above-mentioned method of loading a form.

The preferred embodiments of the present disclosure are described in detail with reference to the accompanying drawings, however, the present disclosure is not limited to the specific details of the above embodiments, and various simple modifications may be made to the technical solution of the present disclosure within the technical idea of the present disclosure, and these simple modifications all belong to the protection scope of the present disclosure.

It should be noted that, in the foregoing embodiments, various features described in the above embodiments may be combined in any suitable manner, and in order to avoid unnecessary repetition, various combinations that are possible in the present disclosure are not described again.

In addition, any combination of various embodiments of the present disclosure may be made, and the same should be considered as the disclosure of the present disclosure, as long as it does not depart from the spirit of the present disclosure.

Claims

1. A method for loading a form, the method comprising:

and loading the form to be loaded according to the form frame.

2. The method of claim 1, wherein the set of nodes is a Document Object Model (DOM) tree, and wherein determining a target node from the plurality of nodes based on the location information comprises:

3. The method according to claim 2, wherein the updating the DOM tree according to the plurality of nodes to be processed corresponding to the target hierarchy to obtain an updated DOM tree comprises:

4. The method of claim 2, wherein determining the target node according to the updated DOM tree comprises:

5. The method according to claim 3 or 4, wherein the node selection step comprises:

6. The method of claim 5, wherein the node selection step further comprises:

7. The method of claim 1, wherein the node type comprises a text node, a button node, or an image node, and wherein rendering the target node according to the node type of the target node comprises:

8. An apparatus for loading forms, the apparatus comprising:

9. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 7.

10. An electronic device, comprising:

a memory having a computer program stored thereon;

a processor for executing the computer program in the memory to carry out the steps of the method of any one of claims 1 to 7.