CN112100546B - Form loading method and device, storage medium and electronic equipment - Google Patents
Form loading method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN112100546B CN112100546B CN202010955628.2A CN202010955628A CN112100546B CN 112100546 B CN112100546 B CN 112100546B CN 202010955628 A CN202010955628 A CN 202010955628A CN 112100546 B CN112100546 B CN 112100546B
- Authority
- CN
- China
- Prior art keywords
- node
- nodes
- target
- designated
- loaded
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 94
- 238000000034 method Methods 0.000 claims abstract description 32
- 238000009877 rendering Methods 0.000 claims abstract description 31
- 239000011159 matrix material Substances 0.000 claims description 33
- 238000004590 computer program Methods 0.000 claims description 6
- 238000012545 processing Methods 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 12
- 238000004891 communication Methods 0.000 description 7
- 238000012216 screening Methods 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- KLDZYURQCUYZBL-UHFFFAOYSA-N 2-[3-[(2-hydroxyphenyl)methylideneamino]propyliminomethyl]phenol Chemical compound OC1=CC=CC=C1C=NCCCN=CC1=CC=CC=C1O KLDZYURQCUYZBL-UHFFFAOYSA-N 0.000 description 1
- 201000001098 delayed sleep phase syndrome Diseases 0.000 description 1
- 208000033921 delayed sleep phase type circadian rhythm sleep disease Diseases 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Image Analysis (AREA)
- User Interface Of Digital Computer (AREA)
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 element areas corresponding to each node on a 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. 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 is not wasted.
Description
Technical Field
The disclosure relates to the technical field of form loading, in particular to a form loading method, a form loading device, a storage medium and electronic equipment.
Background
The form is used as one of important elements in the webpage and is mainly responsible for the data acquisition function. Increasing the first screen loading speed of the form is always an important optimization target for form loading. In the related art, a loading technician performs first screen rendering by pre-loading a preset image or a first screen loading interface established according to a form page of a form to be loaded in advance before loading the form to be loaded. However, a user typically sets multiple custom components in the form to be loaded, making the final form page unpredictable (i.e., the form page unfixed), making it difficult for a technician to establish a head screen loading interface from the form page. And the preset image is directly loaded to perform first screen rendering, and the preset image is loaded before the form to be loaded is loaded each time, so that the loading efficiency of the form to be loaded is reduced, and the waiting time of a user is increased. Meanwhile, the preset images are loaded more, so that the waste of the loading flow is caused.
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, an apparatus, a storage medium, and an electronic device.
To achieve the above object, according to a first aspect of embodiments of the present disclosure, there is provided a form loading 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 one 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 framework.
Optionally, the node set is a document object model DOM tree, and determining the target node from the plurality of nodes according to the position information includes:
traversing a plurality of layers of the DOM tree in sequence according to a target direction, wherein the target direction is a direction pointing to leaf nodes from a root node of the DOM tree, and each layer corresponds to at least one node in the plurality of nodes;
aiming at a target level currently traversed to 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 plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree;
and after the multiple layers are traversed according to the target direction, determining the target node according to the updated DOM tree.
Optionally, updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level, and obtaining the updated DOM tree includes:
determining a target to-be-processed node from the plurality of to-be-processed nodes through a node selection step according to the position information of the element area corresponding to the plurality of to-be-processed nodes;
And discarding branches of the DOM tree, in which other nodes to be processed except the target node to be processed, in the plurality of nodes to be processed are located, so as to obtain the updated DOM tree.
Optionally, the determining the target node according to the updated DOM tree includes:
taking nodes belonging to leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes;
And determining the target node from the plurality of candidate leaf nodes through the node selection step according to the position information of the element region corresponding to the plurality of candidate leaf nodes.
Optionally, the node selection step includes:
Determining whether the element areas corresponding to each two designated nodes are intersected on the form page 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 are intersected 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 plurality of designated nodes are intersected on the form page;
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 areas 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 designated node with the largest intersecting number to obtain a plurality of updated designated nodes;
Repeatedly executing the step of determining whether the element areas corresponding to each two designated nodes intersect on the form page according to the position information of the element areas corresponding to the plurality of updated designated nodes until the designated nodes with the largest intersecting number are discarded to obtain updated plurality of designated nodes, until the element areas corresponding to the designated nodes in the updated plurality of designated nodes do not intersect on the form page;
and taking the updated multiple designated nodes as target designated nodes, wherein the target designated nodes comprise the target to-be-processed nodes or the target nodes.
Optionally, the node selection 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 the target designated nodes.
Optionally, the node type includes a text node, a button node, or an image node, and the 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, text information corresponding to the target node is obtained, the text information comprises the height, the inner margin, the outer margin and the height of a text, and the target node is rendered 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 margin of an image, and rendering the target node according to the image information and the preset image and the position information of the element region corresponding to the target node.
According to a second aspect of embodiments of the present disclosure, there is provided a form loading apparatus, the apparatus including:
The system comprises an acquisition module, a loading module and a loading 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 one form element on a form page of the form to be loaded;
The acquisition module is further used for acquiring the position information of the 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 a 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 framework.
Optionally, the node set is a document object model DOM tree, and the determining module comprises:
the processing submodule is used for traversing a plurality of layers of the DOM tree in sequence according to a target direction, wherein the target direction is a direction pointing to leaf nodes from a root node of the DOM tree, and each layer corresponds to at least one node in the plurality of nodes;
The determining submodule is used for aiming at a target level which is traversed to the current level in the multiple levels, and the node which has the same father node in the at least one node corresponding to the target level and does not belong to a leaf node is used as multiple nodes to be processed corresponding to the target level;
the updating sub-module is used for updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree;
and the determination submodule is further used for determining the target node according to the updated DOM tree after the multiple layers are traversed according to the target direction.
Optionally, the update submodule is configured to:
determining a target to-be-processed node from the plurality of to-be-processed nodes through a node selection step according to the position information of the element area corresponding to the plurality of to-be-processed nodes;
And discarding branches of the DOM tree, in which other nodes to be processed except the target node to be processed, in the plurality of nodes to be processed are located, so as to obtain the updated DOM tree.
Optionally, the determining submodule is configured to:
taking nodes belonging to leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes;
And determining the target node from the plurality of candidate leaf nodes through the node selection step according to the position information of the element region corresponding to the plurality of candidate leaf nodes.
Optionally, the node selection step includes:
Determining whether the element areas corresponding to each two designated nodes are intersected on the form page 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 are intersected 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 plurality of designated nodes are intersected on the form page;
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 areas 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 designated node with the largest intersecting number to obtain a plurality of updated designated nodes;
Repeatedly executing the step of determining whether the element areas corresponding to each two designated nodes intersect on the form page according to the position information of the element areas corresponding to the plurality of updated designated nodes until the designated nodes with the largest intersecting number are discarded to obtain updated plurality of designated nodes, until the element areas corresponding to the designated nodes in the updated plurality of designated nodes do not intersect on the form page;
and taking the updated multiple designated nodes as target designated nodes, wherein the target designated nodes comprise the target to-be-processed nodes or the target nodes.
Optionally, the node selection 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 the target designated nodes.
Optionally, the node type includes a text node, a button node, or an image node, and the rendering module includes:
The first rendering sub-module is used for acquiring text information corresponding to the target node when the node type of the target node is the text node or the button node, wherein the text information comprises the height, the inner margin, the outer margin and the height of a text, and rendering the target node according to the position information of the element region corresponding to the target node and the text information;
The second rendering sub-module is used for acquiring image information corresponding to the target node when the node type of the target node is the image node, wherein the image information comprises the height, the width and the inner margin of an image, and rendering the target node according to the image information and the preset image and the position information of the element area corresponding to the target node.
According to a third aspect of embodiments of the present disclosure, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the form loading method provided by the first aspect.
According to a fourth aspect of embodiments of the present disclosure, there is provided an electronic device, comprising:
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 in the first aspect.
According to the technical scheme, firstly, the node set corresponding to the form to be loaded is obtained, wherein the node set comprises a plurality of nodes, each node is used for representing one form element on a form page of the form to be loaded, then, the position information of an element area corresponding to each node on the form page is obtained, then, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to the node type of the target node, a form frame of the form to be loaded is obtained, 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 is not wasted.
Additional features and advantages of the present disclosure will be set forth in the detailed description which follows.
Drawings
The accompanying drawings are included to provide a further understanding of the disclosure, and are incorporated in and constitute a part of this specification, illustrate the disclosure and together with the description serve to explain, but do not limit the disclosure. In the drawings:
FIG. 1 is a flow chart illustrating a method of loading forms according to an exemplary 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 according to an exemplary embodiment;
FIG. 5 is a schematic diagram of an intersection matrix shown in accordance with an exemplary embodiment;
FIG. 6 is a schematic diagram of another intersection matrix shown in accordance with an exemplary embodiment;
FIG. 7 is a flowchart illustrating another form loading method according to an example embodiment;
FIG. 8 is a schematic diagram of a rendering target node, shown according to an example embodiment;
FIG. 9 is a block diagram of a form loading apparatus according to an example embodiment;
FIG. 10 is a block diagram of one 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 of an electronic device, according to an example embodiment.
Detailed Description
Reference will now be made in detail to exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numbers in different drawings refer to the same or similar elements, unless otherwise indicated. The implementations described in the following exemplary examples are not representative of all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with some aspects of the present disclosure as detailed in the accompanying claims.
Before introducing the form loading method, device, storage medium and electronic equipment provided by the present disclosure, an application scenario involved in each embodiment of the present disclosure is first described, where the application scenario may be a scenario in which a form to be loaded is loaded. The form to be loaded may include a plurality of form components, and each form component may include at least one form element, where the form element is an element that allows a user to input information in the form. The form component may be, for example, a layout component, a text component, a button component, a picture component, a user-defined component, and the like.
FIG. 1 is a flow chart illustrating a method of loading forms according to an exemplary embodiment. As shown in fig. 1, the method comprises the steps of:
step 101, obtaining 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 one 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 the table unit elements of the form to be loaded, and in order to ensure the loading efficiency of the form to be loaded while improving the loading speed of the first screen, a mode of loading part of the form elements of the form to be loaded as the first screen loading interface and continuously loading the form to be loaded on the basis of the form elements loaded in advance can be adopted to optimize the loading of the form. For example, when a form to be loaded is loaded, a node set corresponding to the form to be loaded and including a plurality of nodes may be obtained in advance, where 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, with the exception of the top level form element html (english: hyper Text Markup Language, chinese: hypertext markup language), all other form elements being included 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 the table element corresponding to the first node includes the table element corresponding to the 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 without a child node may be used as a leaf node.
Step 102, obtaining the position information of the element area corresponding to each node on the form page.
For example, after the node set is obtained, the location information of the element area corresponding to each node on the form page may be obtained. The location information may be the vertex coordinates of the element area corresponding to the node on the form page, and the manner of obtaining the location information may be: the method comprises the steps of pre-loading a complete form to be loaded once, obtaining vertex coordinates of element areas corresponding to each node on a form page from the loaded complete form page of the form to be loaded, and taking the obtained vertex coordinates of the element areas corresponding to each node on the form page as position information of the element areas corresponding to the nodes. For example, when the element region corresponding to a node is rectangular, and the four obtained 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 positional 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 the form of four coordinates, for example, the 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 regarded as the position information of the element region corresponding to the node.
And step 103, determining a target node from the plurality of nodes according to the position information.
Specifically, the loading of part of form elements of the form to be loaded as the first screen loading interface is to select a target node from a plurality of nodes for loading, wherein 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 to select a target node from the plurality of nodes. For example, in the plurality of nodes, according to the direction from the high level to the low level, whether the element areas corresponding to each two target non-leaf nodes intersect on the form page may be determined according to the position information of the element areas corresponding to the plurality of target non-leaf nodes not belonging to the leaf node in the nodes corresponding to each level. And discarding part of target non-leaf nodes (discarding a node not only includes discarding the node itself but also includes discarding child nodes of the node) where the corresponding element areas have intersections on the form page, so that the element areas corresponding to the remaining target non-leaf nodes have no intersections on the form page, and screening of a plurality of nodes is completed. And finally, taking the node belonging to the leaf node in the plurality of screened nodes as a target node.
And 104, rendering the target node according to the node type of the target node to obtain a form frame of the form to be loaded.
In this step, according to the difference of specific elements included in the form element corresponding to the node (for example, the form element may include an image element, a text element, or a button element), the node may be divided into nodes of different node types, where the node types may include a text node, a button node, or an image node. The rendering manners of the nodes with different node types are different, for example, when the node type of a certain node is an image node, the image element included in the form element corresponding to the node needs to be rendered. In order to further improve the loading speed of the first screen, only the frames of the form elements corresponding to the target node can be loaded when the target node is rendered. For example, loading modes corresponding to different node types can 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, frames of form elements corresponding to the target node are obtained, and the frames of form elements corresponding to all the target node form frames of the form to be loaded.
And 105, loading the form to be loaded according to the form framework.
For example, after the form frame of the form to be loaded is obtained, loading the unloaded portion of the form element corresponding to the target node and other nodes except the target node in the plurality of nodes may be continued on the basis of the form frame, so as to complete loading of the form to be loaded and obtain the complete form to be loaded.
In summary, the method includes the steps that firstly, a node set corresponding to a form to be loaded is obtained, wherein the node set comprises a plurality of nodes, each node is used for representing a form element on 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, then, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to the node type of the target node, a form frame of the form to be loaded is obtained, 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 is not wasted.
Fig. 2 is a flow chart illustrating one step 103 of the embodiment shown in fig. 1. As shown in fig. 2, the node set is a DOM tree, and step 103 may include the steps of:
Step 1031, traversing a plurality of levels of the DOM tree in sequence according to a target direction, wherein the target direction is a direction pointing from a root node of the DOM tree to a leaf node, and each level corresponds to at least one node of the plurality of nodes.
For example, the node set may be a DOM tree composed of multiple levels, each level corresponds to at least one node, and the node corresponding to the highest level in the DOM tree is the root node. After the position information is obtained, the multiple levels of the DOM tree can be traversed sequentially in a target direction from the root node of the DOM tree to the leaf node, that is, the multiple levels of the DOM tree are traversed sequentially in a direction from a high level to a low level from the root node of the DOM tree.
Step 1032, regarding the target level currently traversed to among the multiple levels, using the node which has the same father node and does not belong to the leaf node in at least one node corresponding to the target level as multiple to-be-processed nodes corresponding to the target level.
For example, in the process of traversing multiple levels of the DOM tree, for a target level traversed currently, the node corresponding to the target level may be initially screened according to the node relationship between the node corresponding to the target level and the node corresponding to the previous level of the target level, so that the node corresponding to the target level has the same father node and does not belong to the leaf node, and is used as the node to be processed. Taking the DOM tree shown in fig. 3 as an example (1-11 in fig. 3 respectively represent different nodes, node 1 is a root node, a node located above of two connected nodes is a parent node, a node located below is a child node), and in the case that the target level is level 3, it may be determined that the nodes corresponding to level 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 may be regarded as nodes to be processed. Furthermore, the nodes which do not belong to leaf nodes in all the nodes corresponding to the target level can be directly used as the nodes to be processed, namely the nodes 4 and 6 are directly used as the nodes to be processed together.
And 1033, updating the DOM tree according to the plurality of to-be-processed nodes corresponding to the target level, and obtaining the updated DOM tree.
In this step, in at least one to-be-processed node corresponding to the target level, there may be multiple groups of to-be-processed nodes intersecting each other in the form page in the corresponding element region, where each group of to-be-processed nodes includes two to-be-processed nodes. In order to improve the loading speed of the first screen, the plurality of nodes to be processed can be further screened, the part of the nodes to be processed, which are intersected with each other, of the element areas corresponding to the plurality of nodes to be processed are discarded on the form page, so that the element areas corresponding to the remaining nodes to be processed in the plurality of nodes to be processed after being discarded are not intersected with each other on the form page, the DOM tree is updated, the number of the nodes to be processed is reduced (namely, the number of form elements contained in the loading interface of the first screen is reduced), and the loading speed of the first screen is improved. For example, after determining a plurality of to-be-processed nodes corresponding to the target hierarchy, the target to-be-processed node may be determined from the plurality of to-be-processed nodes through the node selection step according to the position information of the element area corresponding to the plurality of to-be-processed nodes. The node selecting step may select, from the plurality of to-be-processed nodes, a plurality of to-be-processed nodes, for which the corresponding element regions do not intersect on the form page, as the target to-be-processed nodes, according to the position information of the element regions corresponding to the plurality of to-be-processed nodes. And discarding branches of the DOM tree, where other nodes except the target node to be processed, in the plurality of nodes to be processed are located, so as to obtain an updated DOM tree. As shown in fig. 3, in the case that the node to be processed includes the nodes 4 and 6, the nodes 4 and 6 are selected through the node selecting step, 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.
Step 1034, after traversing the multiple hierarchies according to the target direction, determining the target node according to the updated DOM tree.
Specifically, after traversing the multiple levels according to the target direction (i.e. after screening the nodes corresponding to each level, and updating the DOM tree according to the target to-be-processed node corresponding to the level 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 node is 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 selection step may select, from the plurality of candidate leaf nodes, a plurality of candidate leaf nodes, as the target node, for which the element regions corresponding to the target nodes do not intersect on the form page, according to the position information of the element regions corresponding to the candidate leaf nodes. As shown in fig. 3, in the case where the updated DOM tree includes the nodes 1,2, 3, 5, 6, 7, 8, 11, it may be determined that the nodes 5, 7, 8, 11 are leaf nodes, and the nodes 5, 7, 8, 11 are candidate leaf nodes, and if the nodes obtained by selecting the nodes 5, 7, 8, 11 through the node selecting step are 7, 11, the nodes 7, 11 are target nodes.
It should be noted that, the manner of determining the target node is not limited to the steps 1031 to 1034, and in one possible manner, the method may directly select all the leaf nodes in the DOM tree according to the position information of the element areas corresponding to all the leaf nodes in the DOM tree, and use the leaf nodes obtained after the selection as the target node, and determine the target node from the 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 determining the target node, the node selecting step may be used to screen the non-leaf node in the plurality of levels between the root node of the DOM tree and the designated level, and the non-leaf node obtained after screening is used as the target node directly according to the position information of the element region corresponding to the non-leaf node in the plurality of levels between the root node of the DOM tree and the designated level.
Fig. 4 is a flowchart illustrating a node selection step according to an exemplary embodiment. As shown in fig. 4, the node selection step includes the steps of:
Step 201, determining whether the element areas corresponding to each 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 comprise nodes to be processed or candidate leaf nodes.
For example, when the position information is the vertex coordinates of the element areas corresponding to the nodes on the 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 filtered, whether the element areas corresponding to each two designated nodes intersect on the form page or not may be determined by using a preset formula according to the position information of the element areas corresponding to the designated nodes. For example, when the vertex coordinates are expressed in the form of four coordinates, the preset formula may be expressed as follows for the first designated node and the second designated node included in each two designated nodes:
|Xb2+Xb1-Xa2-Xa1|≤Xa2-Xa1+Xb2-Xb1
|Yb2+Yb1-Ya2-Ya1|≤Ya2-Ya1+Yb2-Yb1
wherein Xa1, ya1, xa2, ya2 are vertex coordinates corresponding to the first designated node, and Xb1, yb1, xb2, yb2 are vertex coordinates corresponding to the second designated node.
Step 202, if the element areas corresponding to any two designated nodes are intersected 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 plurality of designated nodes are intersected 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 each two designated nodes in the plurality of designated nodes intersect on the form page. For example, as shown in fig. 5, a-I in fig. 5 respectively represents different designated nodes, and each number "1" in the intersecting matrix is used to represent that the designated node corresponding to the [ I ] th row and the [ j ] th column where the number "1" is located has an intersection, where I and j are positive integers greater than 0. For example, when i=2, j=3, it means that the element areas corresponding to the designated node a and the designated node B intersect 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, where the number of intersections is used to characterize the element area corresponding to the designated node, and the number of intersections corresponding to the element areas corresponding to other designated nodes except the designated node in the plurality of designated nodes.
For example, 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 for illustration, as shown by the intersection matrix, if the element regions corresponding to the designated node a respectively intersect with the element regions corresponding to the designated node B, C on the form page, the number of intersections corresponding to the designated node a is 2. And if the element areas corresponding to the designated node B are intersected with the element areas corresponding to the designated node A, C, D on the form page, the intersection number corresponding to the designated node B is 3. And if the element areas corresponding to the designated node C are intersected with the element areas corresponding to the designated node A, B on the form page, the intersection number corresponding to the designated node C is 2. And 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.
Step 204, discarding the designated node with the largest intersection number to obtain a plurality of updated designated nodes.
Specifically, in order to obtain that a plurality of designated nodes which do not intersect in the corresponding element area do not exist on the form page and avoid discarding too many designated nodes, the designated node with the largest intersecting number may be discarded first, so as to obtain a plurality of updated designated nodes. As shown in fig. 5, the designated node with the largest intersecting number among the designated nodes corresponding to fig. 5 is designated node D, and the designated node D may be discarded to obtain updated designated nodes: node A, B, C, E, F, G, H, I is designated.
Step 205, repeating steps 201 to 204 according to the updated plurality of designated nodes until the element regions corresponding to the designated nodes in the updated plurality of designated nodes do not intersect on the form page.
For example, after obtaining the updated plurality of designated nodes, the steps 201 to 204 may be repeatedly performed according to the updated plurality of designated nodes, so as to discard the designated node with the largest number of intersections among the updated plurality of designated nodes, so as to continuously update the plurality of designated nodes until the element area corresponding to each designated node among the updated plurality of designated nodes has no intersection on the form page. For example, after discarding the designated node D having the largest number of intersections among 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, according to the position information of the element areas corresponding to the designated nodes A, B, C, E, F, G, H, I, it can be determined whether the element areas corresponding to every two designated nodes in the designated nodes A, B, C, E, F, G, H, I intersect on the form page. If the element areas corresponding to any two designated nodes in the designated nodes A, B, C, E, F, G, H, I are intersected 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 nodes A, B, C, E, F, G, H, I are intersected on the form page, where the intersection matrix may be as shown in (a) in fig. 6. Further, since whether or not the element areas corresponding to each two designated nodes in the designated nodes A, B, C, E, F, G, H, I intersect on the form page has already been given in the intersection matrix shown in fig. 5, the intersection matrix shown in fig. 6 (a) can be obtained directly by discarding the row and column in which the designated node D is located in the intersection matrix shown in fig. 5.
Next, the intersection matrix shown in FIG. 6 (a) may be used, determining that the number of intersections corresponding to the designated node A, B, C, E, F, G, H, I is 22, 0. At this time, the designated node with the largest number of intersections is designated node A, B, C, any one of designated nodes A, B, C may be discarded, and if designated node C is discarded, a plurality of updated designated nodes may be obtained as: A. b, E, F, G, H, I. 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, the intersection matrix shown in (b) of fig. 6 may be used, the number of intersections corresponding to the designated node A, B, E, F, G, H, I is determined to be 1, 0, respectively. At this time, the designated node with the largest number of intersections is designated node A, B, any one of designated nodes A, B may be discarded, and if designated node B is discarded, a plurality of updated designated nodes may be obtained as: A. e, F, G, H, I. The above steps are repeated to determine the intersection matrix corresponding to the designated node A, E, F, G, H, I, and the intersection matrix corresponding to the designated node A, E, F, G, H, I may be as shown in (c) in fig. 6, where the element regions corresponding to the designated nodes in the designated node A, E, F, G, H, I do not have any intersection on the form page, that is, the designated node A, E, F, G, H, I is the updated plurality of designated nodes that are finally acquired.
And 206, taking the updated multiple designated nodes as target designated nodes, wherein the target designated nodes comprise target pending nodes or target nodes.
For example, after the final updated plurality of designated nodes are acquired, the updated plurality of designated nodes may be regarded as target designated nodes (the target designated nodes may be target pending nodes or target nodes). As shown in fig. 6 (c), the designated node A, E, F, G, H, I may be regarded as a target designated node. Further, when determining whether the element areas corresponding to each 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 each 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 of the steps 104 shown in the embodiment of 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, obtaining text information corresponding to the target node when the node type of the target node is text node or button node, where the text information includes a height, an inner margin, an outer margin and a height of the text, and rendering the target node according to the location information and the text information of the element region corresponding to the target node.
In one scenario, after determining the target nodes, each of the plurality of target nodes may be traversed to determine a node type corresponding to each target node. Aiming at a target node with the node type being a text node, text information which corresponds to the target node and comprises the text height, the inner margin, the outer margin and the line height can be obtained. And then, determining the 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 acquired text has a height of 60px, an inner margin of 1px and an outer margin of 3px, the actual occupied height of the text may be calculated as: 60- (1+3) x 2 = 52px, if the line height is 14px, the line number of the text line included in the text can be determined to be 50%14+1 = 4. Then, a text frame corresponding to the target node may be rendered at a position corresponding to the position information of the element region corresponding to the target node on the form page, as shown in (a) of fig. 8. For the target node with the node type being the button node, the button corresponding to the button node can be treated as a text (namely, the frame of the button is used as a text box, the identifier corresponding to the button is used as a text), and the button frame corresponding to the target node is rendered by adopting the same rendering mode as the text node, as shown in (b) of fig. 8.
Step 1042, in the case that the node type of the target node is an image node, obtaining image information corresponding to the target node, where the image information includes height, width and inner margin of the 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.
In another scenario, for a target node whose node type is an image node, image information including a height, a width, and an inner margin of an image corresponding to the target node may be acquired. Then, according to the height, width and inner margin of the image, determining the image frame corresponding to the target node. And rendering an image frame corresponding to the target node at a position corresponding to the position information of the element region corresponding to the target node on the form page. Then, a preset image (the preset image may be, for example, a gray image of 1*1) is transversely tiled in the transverse direction of the image frame and longitudinally tiled in the longitudinal direction of the image frame within the range included in the image frame to render the image frame into an image of the same height and 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 target nodes with the node type being image nodes only need to load preset images, the original images do not need to be loaded, and the first screen loading speed is improved. 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.
In summary, the method includes the steps that firstly, a node set corresponding to a form to be loaded is obtained, wherein the node set comprises a plurality of nodes, each node is used for representing a form element on 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, then, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to the node type of the target node, a form frame of the form to be loaded is obtained, 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 is not wasted.
FIG. 9 is a block diagram illustrating a form loading apparatus according to an example embodiment. As shown in fig. 9, the apparatus 300 includes:
The obtaining module 301 is configured to obtain a node set corresponding to a form to be loaded, where the node set includes a plurality of nodes, and each node is configured to characterize a form element on a form page of the form to be loaded.
The obtaining module 301 is further configured to obtain location information of an element area corresponding to each node on a form page.
A determining module 302 is configured to determine a target node from a 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 framework.
Fig. 10 is a block diagram of a determination module shown in the embodiment of 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 traverse multiple levels of the DOM tree in sequence according to a target direction, where 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 of the multiple nodes.
The determining submodule 3022 is configured to, for a target hierarchy currently traversed to among the multiple hierarchies, use a node that has the same parent node in at least one node corresponding to the target hierarchy and does not belong to a leaf node as multiple nodes to be processed corresponding to the target hierarchy.
And the updating submodule 3023 is used for updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree.
The determining submodule 3022 is further configured to determine the target node according to the updated DOM tree after traversing the multiple levels according to the target direction is completed.
Optionally, the update sub-module 3023 is configured to:
And determining a target to-be-processed node from the plurality of to-be-processed nodes through a node selection step according to the position information of the element areas corresponding to the plurality of to-be-processed nodes.
And discarding branches of the DOM tree, in which other nodes to be processed except the target node to be processed, in the plurality of nodes to be processed are located, so as 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 plurality of candidate leaf nodes through a node selection step according to the position information of the element areas corresponding to the plurality of candidate leaf nodes.
Optionally, the node selection step includes:
and determining whether the element areas corresponding to each 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 comprise nodes to be processed or candidate leaf nodes.
If the element areas corresponding to any two designated nodes are intersected 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 are intersected on the form page or not.
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 areas corresponding to the designated nodes and the number of intersections of the element areas corresponding to other designated nodes except the designated node in the plurality of designated nodes.
Discarding the designated node with the largest intersection number to obtain a plurality of updated designated nodes.
And repeatedly executing the steps from determining whether the element areas corresponding to each two designated nodes intersect on the form page to discarding the designated node with the largest intersection number according to the updated position information of the element areas corresponding to the designated nodes to obtain updated designated nodes until the element areas corresponding to the designated nodes in the updated designated nodes do not intersect on the form page.
And taking the updated multiple designated nodes as target designated nodes, wherein the target designated nodes comprise target nodes to be processed or target nodes.
Optionally, the node selection step further includes:
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 obtain text information corresponding to the target node when the node type of the target node is a text node or a button node, where the text information includes a height, an inner margin, an outer margin and a line height of the text, and render the target node according to the location information and the text information of the element area corresponding to the target node.
The second rendering sub-module 3032 is configured to obtain, when the node type of the target node is an image node, image information corresponding to the target node, where the image information includes a height, a width, and an inner margin of an image, and render the target node according to the position information of the element area corresponding to the target node, the image information, and a preset image.
The specific manner in which the various modules perform the operations in the apparatus of the above embodiments have been described in detail in connection with the embodiments of the method, and will not be described in detail herein.
In summary, the method includes the steps that firstly, a node set corresponding to a form to be loaded is obtained, wherein the node set comprises a plurality of nodes, each node is used for representing a form element on 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, then, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to the node type of the target node, a form frame of the form to be loaded is obtained, 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 is not wasted.
Fig. 12 is a block diagram of an electronic device 700, according to an example embodiment. As shown in fig. 12, the electronic device 700 may include: a processor 701, 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 to complete all or part of the steps in the form loading method described above. The memory 702 is used to store various types of data to support operation on the electronic device 700, which may include, for example, instructions for any application or method operating on the electronic device 700, as well as application-related data, such as contact data, messages sent and received, pictures, audio, video, and so forth. The Memory 702 may be implemented by any type or combination of volatile or non-volatile Memory devices, such as static random access Memory (Static Random Access Memory, SRAM for short), electrically erasable programmable Read-Only Memory (ELECTRICALLY ERASABLE PROGRAMMABLE READ-Only Memory, EEPROM for short), erasable programmable Read-Only Memory (Erasable Programmable Read-Only Memory, EPROM for short), programmable Read-Only Memory (Programmable Read-Only Memory, PROM for short), read-Only Memory (ROM for short), magnetic Memory, flash Memory, magnetic disk, or optical disk. The multimedia component 703 can include a screen and an audio component. Wherein the screen may be, for example, a touch screen, the audio component being for outputting and/or inputting audio signals. For example, the audio component may include a microphone for receiving external audio signals. The received audio signals may be further stored in the memory 702 or transmitted through the communication component 705. The audio assembly further comprises at least one speaker for outputting audio signals. The I/O interface 704 provides an interface between the processor 701 and other interface modules, which may be a keyboard, mouse, buttons, etc. These buttons may be virtual buttons or physical buttons. The communication component 705 is for wired or wireless communication between the electronic device 700 and other devices. Wireless Communication, such as Wi-Fi, bluetooth, near Field Communication (NFC) for short, 2G, 3G, 4G, NB-IOT, eMTC, or other 5G, etc., or one or a combination of more of them, is not limited herein. The corresponding communication component 705 may thus comprise: 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 (ASIC), digital signal Processor (DIGITAL SIGNAL Processor, DSP), digital signal processing device (DIGITAL SIGNAL Processing Device, DSPD), programmable logic device (Programmable Logic Device, PLD), field programmable gate array (Field Programmable GATE ARRAY, FPGA), controller, microcontroller, microprocessor, or other electronic component for executing the form loading method described above.
In another exemplary embodiment, a computer readable storage medium is also provided, comprising program instructions which, when executed by a processor, implement the steps of the form loading method described above. For example, the computer readable storage medium may be the memory 702 including program instructions described above, which are executable by the processor 701 of the electronic device 700 to perform the form loading method described above.
In summary, the method includes the steps that firstly, a node set corresponding to a form to be loaded is obtained, wherein the node set comprises a plurality of nodes, each node is used for representing a form element on 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, then, a target node is determined from the plurality of nodes according to the position information, the target node is rendered according to the node type of the target node, a form frame of the form to be loaded is obtained, 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 is not wasted.
The preferred embodiments of the present disclosure have been described in detail above with reference to the accompanying drawings, but the present disclosure is not limited to the specific details of the embodiments described above, and various simple modifications may be made to the technical solutions of the present disclosure within the scope of the technical concept of the present disclosure, and all the simple modifications belong to the protection scope of the present disclosure.
In addition, the specific features described in the foregoing embodiments may be combined in any suitable manner, and in order to avoid unnecessary repetition, the present disclosure does not further describe various possible combinations.
Moreover, any combination between the various embodiments of the present disclosure is possible as long as it does not depart from the spirit of the present disclosure, which should also be construed as the disclosure of the present disclosure.
Claims (8)
1. A method of loading forms, the method comprising:
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 one 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;
Loading the form to be loaded according to the form frame;
the node set is a document object model DOM tree, and the determining a target node from the plurality of nodes according to the location information comprises:
traversing a plurality of layers of the DOM tree in sequence according to a target direction, wherein the target direction is a direction pointing to leaf nodes from a root node of the DOM tree, and each layer corresponds to at least one node in the plurality of nodes;
aiming at a target level currently traversed to 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 plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree;
after traversing the multiple layers according to the target direction, determining the target node according to the updated DOM tree;
the determining the target node according to the updated DOM tree includes:
taking nodes belonging to leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes;
and determining the target node from the plurality of candidate leaf nodes through a node selection step according to the position information of the element region corresponding to the plurality of candidate leaf nodes.
2. The method of claim 1, wherein updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level, the obtaining the updated DOM tree comprises:
determining a target to-be-processed node from the plurality of to-be-processed nodes through a node selection step according to the position information of the element area corresponding to the plurality of to-be-processed nodes;
And discarding branches of the DOM tree, in which other nodes to be processed except the target node to be processed, in the plurality of nodes to be processed are located, so as to obtain the updated DOM tree.
3. The method according to claim 1 or 2, wherein the node selection step comprises:
Determining whether the element areas corresponding to each two designated nodes are intersected on the form page 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 are intersected 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 plurality of designated nodes are intersected on the form page;
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 areas 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 designated node with the largest intersecting number to obtain a plurality of updated designated nodes;
Repeatedly executing the step of determining whether the element areas corresponding to each two designated nodes intersect on the form page according to the position information of the element areas corresponding to the plurality of updated designated nodes until the designated nodes with the largest intersecting number are discarded to obtain updated plurality of designated nodes, until the element areas corresponding to the designated nodes in the updated plurality of designated nodes do not intersect on the form page;
and taking the updated multiple designated nodes as target designated nodes, wherein the target designated nodes comprise the target to-be-processed nodes or the target nodes.
4. A method according to claim 3, wherein the node selection step further comprises:
and if the element areas corresponding to every two designated nodes are not intersected on the form page, taking the designated nodes as the target designated nodes.
5. 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:
Under the condition that the node type of the target node is the text node or the button node, text information corresponding to the target node is obtained, the text information comprises the height, the inner margin, the outer margin and the height of a text, and the target node is rendered 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 margin of an image, and rendering the target node according to the image information and the preset image and the position information of the element region corresponding to the target node.
6. A form loading apparatus, said apparatus comprising:
The system comprises an acquisition module, a loading module and a loading 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 one form element on a form page of the form to be loaded;
The acquisition module is further used for acquiring the position information of the 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 a form frame of the form to be loaded;
The loading module is used for loading the form to be loaded according to the form frame;
the node set is a document object model DOM tree, and the determining module comprises:
the processing submodule is used for traversing a plurality of layers of the DOM tree in sequence according to a target direction, wherein the target direction is a direction pointing to leaf nodes from a root node of the DOM tree, and each layer corresponds to at least one node in the plurality of nodes;
The determining submodule is used for aiming at a target level which is traversed to the current level in the multiple levels, and the node which has the same father node in the at least one node corresponding to the target level and does not belong to a leaf node is used as multiple nodes to be processed corresponding to the target level;
the updating sub-module is used for updating the DOM tree according to the plurality of nodes to be processed corresponding to the target level to obtain an updated DOM tree;
The determining submodule is further used for determining the target node according to the updated DOM tree after the multiple layers are traversed according to the target direction;
The determining submodule is used for taking nodes belonging to leaf nodes in the updated DOM tree as a plurality of candidate leaf nodes; and determining the target node from the plurality of candidate leaf nodes through a node selection step according to the position information of the element region corresponding to the plurality of candidate leaf nodes.
7. A computer readable storage medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the steps of the method according to any one of claims 1-5.
8. An electronic device, comprising:
a memory having a computer program stored thereon;
a processor for executing the computer program in the memory to implement the steps of the method of any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010955628.2A CN112100546B (en) | 2020-09-11 | 2020-09-11 | Form loading method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010955628.2A CN112100546B (en) | 2020-09-11 | 2020-09-11 | Form loading method and device, storage medium and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112100546A CN112100546A (en) | 2020-12-18 |
| CN112100546B true CN112100546B (en) | 2024-05-07 |
Family
ID=73752367
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010955628.2A Active CN112100546B (en) | 2020-09-11 | 2020-09-11 | Form loading method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112100546B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112417346A (en) * | 2021-01-25 | 2021-02-26 | 北京小米移动软件有限公司 | Rendering method, rendering device, electronic equipment and storage medium |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111639287A (en) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | Page processing method and device, terminal equipment and readable storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB0623912D0 (en) * | 2006-11-30 | 2007-01-10 | Bayne Duncan J | Improved electronic form software and brower programming methods |
-
2020
- 2020-09-11 CN CN202010955628.2A patent/CN112100546B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111639287A (en) * | 2020-04-29 | 2020-09-08 | 深圳壹账通智能科技有限公司 | Page processing method and device, terminal equipment and readable storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 基于完全渲染的网页首屏性能测量设计;吴清扬;赵栋;;电子制作(16);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112100546A (en) | 2020-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Muhsin et al. | Improved quadtree image segmentation approach to region information | |
| CN102710900B (en) | A kind of video matrix output display implement device, method and video matrix equipment | |
| CN110085194B (en) | Medical image display apparatus and control method for medical image display apparatus | |
| KR101083184B1 (en) | Screen transition control device | |
| CN111258575B (en) | Page layout processing method and device | |
| CN112100546B (en) | Form loading method and device, storage medium and electronic equipment | |
| CN111275054A (en) | Image processing method, image processing device, electronic equipment and storage medium | |
| CN113408241A (en) | Text data processing method and device, electronic equipment and readable medium | |
| CN110471700B (en) | Graphic processing method, apparatus, storage medium and electronic device | |
| CN111144081B (en) | Form generation method and device, storage medium and electronic equipment | |
| CN109242929B (en) | Conversion method, device, storage medium and equipment of path coordinate graph | |
| CN111783007B (en) | Display rendering method and device, electronic equipment and storage medium | |
| CN112085814B (en) | Electronic map display method, device, equipment and readable storage medium | |
| JPWO2014017003A1 (en) | Update area detector | |
| JP2007179183A (en) | Median filter and median filter program | |
| CN112631566A (en) | Code generation method and device, storage medium and electronic equipment | |
| KR101649822B1 (en) | Apparatus and method for building web-page | |
| CN116775015A (en) | Layer display method and device | |
| CN116245051A (en) | Simulation software rendering method and device, storage medium and electronic equipment | |
| CN116341642A (en) | Data processing method and device, storage medium and electronic equipment | |
| JP6790785B2 (en) | Human interface data creation device | |
| US10733340B2 (en) | System configuration creation supporting device | |
| CN104517273A (en) | Image super-resolution processing method and apparatus | |
| CN114241092A (en) | Multi-graph typesetting method, multi-graph typesetting device and electronic equipment | |
| CN111340871A (en) | Depth map prediction method, depth map prediction device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |