CN113190773A - Rendering method of display data, electronic equipment, mobile terminal and storage medium - Google Patents
Rendering method of display data, electronic equipment, mobile terminal and storage medium Download PDFInfo
- Publication number
- CN113190773A CN113190773A CN202110372925.9A CN202110372925A CN113190773A CN 113190773 A CN113190773 A CN 113190773A CN 202110372925 A CN202110372925 A CN 202110372925A CN 113190773 A CN113190773 A CN 113190773A
- Authority
- CN
- China
- Prior art keywords
- data
- rendered
- rendering
- subdata
- nodes
- 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.)
- Pending
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 160
- 238000000034 method Methods 0.000 title claims abstract description 61
- 238000000547 structure data Methods 0.000 claims abstract description 32
- 238000004590 computer program Methods 0.000 claims description 10
- 238000012545 processing Methods 0.000 abstract description 10
- 230000008569 process Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 8
- 238000004422 calculation algorithm Methods 0.000 description 5
- 230000004044 response Effects 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000003780 insertion Methods 0.000 description 2
- 230000037431 insertion Effects 0.000 description 2
- 241000257303 Hymenoptera Species 0.000 description 1
- 238000007792 addition Methods 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000001172 regenerating effect Effects 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
- 238000013515 script Methods 0.000 description 1
- 230000005236 sound signal Effects 0.000 description 1
Images
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
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)
- Information Transfer Between Computers (AREA)
Abstract
The application discloses a rendering method of browser display data, electronic equipment, a mobile terminal and a storage medium, wherein the method is used for acquiring data to be rendered, the data to be rendered is tree-structured data, and the tree-structured data comprises a plurality of nodes; dividing data to be rendered into a plurality of subdata, wherein each subdata comprises part of nodes; adding the plurality of sub-data into the rendering data set in batches, and rendering the data in the rendering data set after each addition. Through the mode, the method and the device for processing the tree-shaped structure data can relieve the pressure of the browser for rendering a large amount of tree-shaped structure data at one time, so that the browser is prevented from being jammed, page performance is improved, and user experience is improved.
Description
Technical Field
The present application relates to the field of browser display, and in particular, to a rendering method of display data, an electronic device, a mobile terminal, and a storage medium.
Background
Generally, with the requirement of convenience and rapidity for information viewing of people, when a browser is opened, a user often wants to be able to view a needed page quickly, so that the speed of rendering of data display of a browser page is particularly important.
Generally, a browser is converted into tree-structured data, the tree-structured data is flattened, all nodes are placed in a one-dimensional array, the dependency relationship between each node and each parent node and child node is recorded, different styles and layouts are set for nodes of different levels, and then a virtual list is formed, for example: monitoring page scrolling events and calculating data to be rendered.
At present, in the existing rendering scheme, in a form of a virtual list, processing is complex and line feed is difficult to perform height calculation when complex operations such as screening of tree data are processed, a large amount of tree structure data are often required to be processed in one-time rendering, and related nodes are thousands of or more, which causes that the overhead of processing browser page rendering by a memory is very large, so that a browser is jammed, and further, the page performance is reduced and the user experience is influenced.
Disclosure of Invention
A first aspect of an embodiment of the present application provides a rendering method for browser display data, where the method obtains data to be rendered, where the data to be rendered is tree structure data, and the tree structure data includes a plurality of nodes; dividing data to be rendered into a plurality of subdata, wherein each subdata comprises part of nodes; adding the plurality of sub-data into the rendering data set in batches, and rendering the data in the rendering data set after each addition.
A second aspect of an embodiment of the present application provides an electronic device, including: the system comprises an acquisition module, a rendering module and a display module, wherein the acquisition module is used for acquiring data to be rendered, the data to be rendered is tree structure data, and the tree structure data comprises a plurality of nodes; the dividing module is used for dividing the data to be rendered into a plurality of subdata, and each subdata comprises part of nodes; the device comprises an adding module and a rendering module, wherein the adding module is used for adding a plurality of subdata into a rendering data set in batches, and the rendering module is used for rendering the data in the rendering data set after each addition.
A third aspect of an embodiment of the present application provides a mobile terminal, including: the device comprises a processor and a memory, wherein the memory stores a computer program, and the processor is used for executing the computer program to realize the method provided by the first aspect of the embodiment of the application.
A fourth aspect of embodiments of the present application provides a computer-readable storage medium, in which a computer program is stored, and the computer program, when executed by a processor, implements the method provided by the first aspect of embodiments of the present application.
The beneficial effect of this application is: different from the situation in the prior art, according to the rendering technology for displaying data by the browser at present, the data to be rendered is divided into a plurality of subdata, each subdata comprises part of nodes, the subdata is added to the rendering data in batches to be rendered in a centralized mode, so that the partial nodes can be processed in batches, the cost for processing the page rendering of the browser by using a memory is saved, the pressure of the browser for rendering a large amount of tree-shaped structure data at one time can be relieved, the phenomenon that the browser is jammed is avoided, the page performance is improved, and the user experience is improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
FIG. 1 is a flowchart illustrating a rendering method for browser display data according to a first embodiment of the present disclosure;
FIG. 2 is a flowchart illustrating a rendering method for displaying data by a browser according to a second embodiment of the present disclosure;
FIG. 3 is a flowchart illustrating a specific step S24 in FIG. 2;
FIG. 4 is a flowchart illustrating a specific step S32 in FIG. 3;
FIG. 5 is a detailed flowchart of the present application after step S42 in FIG. 4;
FIG. 6 is a flowchart illustrating a specific step S12 of FIG. 1;
FIG. 7 is a flowchart illustrating a rendering method for displaying data by a browser according to an embodiment of the present disclosure;
FIG. 8 is a schematic block diagram of an embodiment of an electronic device of the present application;
FIG. 9 is a schematic block diagram of an embodiment of a mobile terminal of the present application;
FIG. 10 is a schematic block diagram of one embodiment of a computer-readable storage medium of the present application;
fig. 11 is a schematic block diagram of the hardware architecture of the smart phone of the present application.
Detailed Description
In the following description, for purposes of explanation and not limitation, specific details are set forth, such as particular system structures, techniques, etc. in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.
It will be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
It is also to be understood that the terminology used in the description of the present application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the specification of the present application and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.
It should be further understood that the term "and/or" as used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.
As used in this specification and the appended claims, the term "if" may be interpreted contextually as "when", "upon" or "in response to a determination" or "in response to a detection". Similarly, the phrase "if it is determined" or "if a [ described condition or event ] is detected" may be interpreted contextually to mean "upon determining" or "in response to determining" or "upon detecting [ described condition or event ]" or "in response to detecting [ described condition or event ]".
In order to explain the technical means of the present application, the following description will be given by way of specific examples. The technical scheme of the application is mainly suitable for rendering tree-structured data by a browser, particularly tree-structured data with a large number of nodes (nodes), such as more than 2000 nodes. Referring to fig. 1, fig. 1 is a schematic flowchart illustrating a rendering method for displaying data by a browser according to a first embodiment of the present application, where the rendering method specifically includes the following steps:
s11: acquiring data to be rendered;
generally, a server corresponding to a browser is provided with an Application Programming Interface (API). An API is some predefined interface (e.g. function, HTTP interface), or convention for linking different components of a software system, for obtaining the required data.
Through the API, data to be rendered can be obtained from a server side, generally, the data to be rendered is tree structure data, the tree structure data comprises a plurality of nodes, the nodes refer to data elements in a tree, and the nodes are formed by relations between data items and the data elements.
The tree structure refers to a nested non-linear data structure of a one-to-many tree relationship among data elements, and comprises a plurality of nodes, wherein the plurality of nodes comprise at least one of parent nodes and child nodes.
S12: dividing data to be rendered into a plurality of subdata, wherein each subdata comprises part of nodes;
generally, a browser is provided with a Web application, and the Web application can calculate the number of nodes and respective child nodes in the data, that is, the number of parent nodes and corresponding child nodes under the parent nodes, by a depth-first recursive traversal method.
In order to divide the rendering data into a plurality of sub-data, the node position of multiple times of the number of the newly added rendering data each time may be recorded in the counting process, for example, when 200 data are rendered each time, the node position at 200, 400, 600.
The positions of the nodes with the multiple number of the data to be rendered newly added at each time can be set according to the service requirement and the performance required by the browser, for example, the optimal performance set by the user.
S13: adding the plurality of sub-data into the rendering data set in batches, and rendering the data in the rendering data set after each addition.
The Document Object Model (DOM) is a browser, platform, language independent interface that allows users to access other standard components of a page. Because the elements of the DOM are very large, the performance problems of the pages tend to be mostly caused by DOM operations.
If the front-end work is abstracted, the state is maintained and the view is updated; and updating the view and maintaining the state requires DOM operations. In fact, in recent years, the main development direction of the framework of the front end is to liberate the complexity of DOM operations.
Therefore, in order to improve the performance of the page, a rendering data set storing a plurality of subdata can be set, the plurality of subdata are added into the rendering data set in batches, after the addition at each time is completed, one or more subdata added at each time are rendered in the rendering data set, and elements in the huge DOM are separated, so that the DOM is prevented from being directly rendered, and the performance of the page can be improved.
According to the rendering technology for the display data of the current browser, the data to be rendered are divided into the plurality of subdata, each subdata comprises part of nodes, the plurality of subdata are added to the rendering data in batches to be rendered, so that the part of nodes can be processed in batches, the cost for processing the page rendering of the browser through the memory is saved, the pressure for rendering a large amount of tree-shaped structure data by the browser at one time can be relieved, the browser is prevented from being stuck, and the page performance is improved and the user experience is improved.
Referring to fig. 2, fig. 2 is a schematic flowchart illustrating a rendering method for displaying data by a browser according to a second embodiment of the present application; wherein steps S21, S22, and S24 are similar to steps S11, S12, and S13 in fig. 1, and are not repeated herein, and further before adding a plurality of sub data to the rendering data set in batches and rendering the data in the rendering data set after each addition, the rendering method further includes:
s23: creating a null object, wherein the null object is used for storing a rendering data set;
as can be appreciated from FIG. 1 and the associated description, the render dataset may actually store a plurality of sub-data added in batches, so as to better store the plurality of sub-data added in batches, wherein, in particular, the render dataset is used for plug-in copying the node of the sub-data to be rendered next according to the node position of the sub-data rendered last time.
Specifically, in order to facilitate storage of the rendering data set, a new empty object for copying the data to be rendered may be created, and depth-first traversal is performed from the beginning of the first sub-data to be rendered obtained in batches from the data to be rendered until the number of the data to be rendered each time, for example, the sub-data to be rendered obtained by dividing the 200 nodes in step S12 in fig. 1, and the traversed sub-data to be rendered are copied to the newly created empty object at the same position in the data to be rendered.
And inserting and copying according to the node position, namely copying the subdata to be rendered in batches in a moving manner by ants from the rendering data, wherein the rendering is performed by the new object, namely the subdata to be rendered, the first subdata to be rendered is rendered for the first time, and after the rendering is completed, the first rendered subdata is used as the node insertion position of the subdata to be rendered next time, and the data to be rendered can be completely and completely copied in a reciprocating circulation manner.
Referring to fig. 3, fig. 3 is a specific flowchart illustrating step S24 in fig. 2, and further, the step of adding a plurality of sub-data into the rendering data set in batches and rendering the data in the rendering data set after each addition includes the following steps:
s31: inserting and copying the Nth subdata to be rendered into a rendering data set according to the node position corresponding to the (N-1) th rendered subdata, wherein N is a positive integer;
when N is 1, the rendering data set is first screen data, where the first screen data refers to a first subdata to be rendered, and if 500 nodes are divided each time, it is that the first subdata to be rendered contains 500 nodes; if there are 200 nodes in step S12 in fig. 1, the first sub-data to be rendered includes 200 nodes.
The first screen data is also in a tree structure, and the rendered new tree structure data is usually stored in the rendering data set, however, after the first screen data is inserted and copied into the rendering data set, there is no corresponding zeroth rendered subdata, and in order to further render the first screen data, the JS frame is used as the zeroth rendered subdata.
JS is an abbreviation of a scripting language javascript, which is generally used in a browser and other related scripts, and certainly can be used at a Server side of a dynamic Server Page (ASP), and the JS is a language which is executed while interpreting, does not need to be compiled, and therefore has no compiling state.
And after the rendering of the first screen data is finished, generating first rendered subdata, and when N is 2, 3 and … …, continuously inserting and copying the Nth subdata to be rendered into a rendering data set according to the node position corresponding to the (N-1) th rendered subdata, wherein N is a positive integer.
S32: and performing asynchronous rendering of the virtual document object model on the Nth subdata to be rendered.
The virtual Document Object Model (DOM) is equivalent to adding a cache between JS and the real DOM, and unnecessary DOM operations are avoided by using the DOM diff algorithm. The DOM node includes tags, attributes, and children. And constructing a real DOM tree according to the virtual DOM tree. The specific idea is as follows: and recursively constructing a real DOM tree according to the attributes and the child nodes of the virtual DOM nodes.
And performing virtual Document Object Model (DOM) asynchronous rendering on the Nth subdata to be rendered, wherein usually JavaScript performs virtual DOM comparison on rendering data, namely, new tree-like structure data generated by the added nodes is compared with old tree-like structure data, a patch is generated to render the new tree-like structure data, and the obtained data replaces the old tree-like structure data to serve as the basis for the next comparison.
When N is equal to 1, for the first screen data, the first screen data refers to the first subdata to be rendered, the JS frame is used as the zeroth rendered subdata, and the first rendered subdata can be obtained by comparing the first screen data with the JS frame and is used as the next round of old tree-shaped structure data to make a comparison basis for the added new data structure.
Referring to fig. 4, fig. 4 is a specific flowchart illustrating step S32 in fig. 3, and further, the performing asynchronous rendering of the virtual document object model on the nth sub-data to be rendered specifically includes the following steps:
s41: based on the virtual document object model, comparing the Nth subdata to be rendered with the (N-1) th rendered subdata in a traversal mode to obtain a data structure patch between the Nth subdata to be rendered and the (N-1) th rendered subdata;
as can be seen from step S32 of fig. 3, when N is 1, the data structure patch between the first-screen data and the JS frame is obtained by comparing the first-screen data with the JS frame based on the virtual document object model.
And when N is 2, 3 and … …, comparing the Nth sub data to be rendered with the (N-1) th rendered sub data in a traversal mode based on the virtual document object model to obtain a data structure patch between the Nth sub data to be rendered and the (N-1) th rendered sub data.
Aiming at the specific situation of the current front end, the DOM nodes are modified less in a cross-level mode, and the attributes of the nodes are generally modified, the sequence of the child nodes is adjusted, the child nodes are added, and the like. Therefore, only the nodes at the same level need to be compared, and the complexity of the diff algorithm is avoided.
A common method of comparing nodes at the same level is depth-first traversal. The depth-first traversal process generates a data structure patch for recording the difference between the two trees, namely the data structure patch for recording the difference between the nth subdata to be rendered and the N-1 th rendered subdata, and the real DOM can be modified minimally conveniently by using the data structure patch.
S42: and replacing the data structure patch to the Nth subdata to be rendered to obtain the Nth rendered subdata so as to render the data to be rendered.
Through the obtained data structure patch, the change type of the data object to be rendered, such as addition, modification and deletion of nodes, can be obtained, the addition of the nodes is taken as an example for detailed explanation, through new tree structure comparison, for example, 500 nodes to 1000 nodes, if 500 points which are newly added are data structure patches, the data structure patches are replaced to the nth subdata to be rendered, and therefore the nth rendered subdata can be obtained to render the data to be rendered.
Specifically, the diff algorithm is used for comparing the old and new virtual DOMs, namely comparing the performance of the two js objects which is not consumed so much, and comparing the performance of the two real DOMs which are consumed so that the performance of the virtual DOM is greatly improved.
diff algorithm: and comparing the same levels, using different key values (auxiliary marks) in the list, decomposing the tree structure according to the hierarchy, and only comparing the same level elements. Firstly, comparing whether top-level virtual DOM nodes are consistent or not, if so, then comparing the top-level virtual DOM nodes with the next-level DOM nodes, if not, stopping downward comparison, deleting all the DOMs and the DOMs below in the original page, regenerating a new virtual DOM, and then replacing the DOM of the original page, wherein the specific flow steps are as follows:
1) representing the structure of the DOM tree by using a JavaScript object structure;
2) this tree is then used to build a true DOM tree that is inserted into the document.
3) When the state is changed, reconstructing a new object tree;
4) then, comparing the new tree with the old tree, and recording the difference between the two trees;
5) applying the recorded differences to the real DOM tree constructed in step 2), so that the view is updated.
Referring to fig. 5, fig. 5 is a specific flowchart illustrating that after step S42 in fig. 4, the data structure patch is replaced to the nth sub data to be rendered, so as to render the data to be rendered, and the rendering method further includes the following steps:
s51: setting a waiting time;
because the operation shown in fig. 4 performs similar queuing loading, it usually takes several tens of milliseconds for each batch of nodes to be added, which is not perceived by human eyes, and the present application is directed to a plurality of nodes, for example, tens of thousands of nodes, and it needs to judge whether rendering is finished after each batch of data is rendered.
Therefore, a post-set waiting time may be set for determining whether the entire rendering process is finished. For example, using browser asynchronous processing, specifically, the setTimeout () code, which sets a specified wait time, for example, usually in thousandths of a second, millisecond, when it is time, the browser will execute a specified method (method) or function (function).
S52: judging whether the Nth rendered subdata meets the rendering end condition of the data to be rendered or not within the waiting time;
and starting a new round of nodes traversing unit number from the position of the last round of traversal ending, copying and adding the traversed node data to the data needing to be rendered, and rendering the new data to the page. The rendering end condition is set in the scheme and used for judging whether the data to be rendered are completely rendered, for example, whether the data to be rendered can be acquired, if the data to be rendered can be acquired, the representation also needs to be subjected to additional rendering, and if the data to be rendered can not be acquired, the representation does not need to be subjected to additional rendering.
And judging whether the Nth rendered subdata meets the rendering end condition of the data to be rendered within the waiting time. If yes, it indicates that the rendering step is completed, and the process proceeds to step S53: namely ending the rendering; if not, it indicates that the rendering step is not completed, and the process proceeds to step S54: that is, the (N + 1) th subdata to be rendered is extracted and is inserted and copied into the rendering data set according to the node position corresponding to the (N) th rendered subdata, and the (N + 1) th subdata is subjected to virtual document object model asynchronous rendering, that is, page rendering of the whole large-scale tree structure is realized through multi-round data traversal, addition and rendering.
In addition, the rendering end condition may also be set to: if the number of nodes of the newly added tree data and the original data is the same, or the last node is the same, or no node of the original data can traverse, the whole rendering process is ended, or other rendering ending conditions that occur to those skilled in the art may be used, and the selection may be more specifically required, which is not limited herein.
Referring to fig. 6, fig. 6 is a schematic flowchart illustrating a specific process of step S12 in fig. 1 according to the present application; dividing data to be rendered into a plurality of subdata, wherein each subdata comprises part of nodes, and the method specifically comprises the following steps:
s61: calculating the number of sub-nodes of the data to be rendered, wherein the number of the sub-nodes is used for planning the number of the sub-data to be rendered each time;
because the technical scheme of the application aims at more nodes, for example, ten thousand nodes are usually more than 2000 nodes, the number of the nodes usually needs to be specifically calculated, which provides an important reliable basis for planning the number of the sub data to be rendered each time.
Therefore, the number of child nodes of the data to be rendered needs to be calculated, where the number of child nodes is used to plan the number of child data to be rendered each time.
S62: setting the node position corresponding to the subdata to be rendered each time according to the number of the subdata to be rendered;
when the number of the sub data to be rendered is determined, it can be known that the node difference between each sub data to be rendered is also determined, and therefore the node position corresponding to each sub data to be rendered can be set by combining the node difference between each sub data to be rendered.
The node position actually refers to a path position of the node in the screen or a path position at the tree structure, and rendering can be performed according to the path position when the rendering is added later.
S63: and dividing the data to be rendered into a plurality of subdata according to the node positions.
The node position corresponding to the subdata to be rendered each time is set, the data to be rendered is divided into a plurality of subdata according to the node position, specifically, the data to be rendered can be divided into a plurality of subdata according to the node position, and the data to be rendered can be divided into a plurality of subdata through the path position represented by the node position.
Additionally, still further, the rendering method further comprises: rendering the first subdata to be rendered; according to the technical scheme, when the situation that the scroll bar of the data to be rendered in the rendering data set scrolls to the bottom of the browser is monitored, the rendering data is added.
Specifically, if full loading is not required, optimization can be further performed in combination with a lazy loading scheme, that is, only one screen of data is rendered for the first time, and when the browser monitors that the scroll bar of the container where the tree data is located scrolls to the bottom, the data is added, so that the running overhead of the browser can be effectively reduced.
In the following, a rendering method of the browser display data according to the present application will be described in detail with reference to specific application scenarios. Referring to fig. 7, fig. 7 is a schematic flowchart illustrating an embodiment of a rendering method for displaying data by a browser according to the present application, which includes the following steps:
s71: acquiring data to be rendered of a tree structure;
generally, a server corresponding to a browser is provided with an Application Programming Interface (API). Through the API, data to be rendered can be obtained from a server side, generally, the data to be rendered is tree structure data, the tree structure data comprises a plurality of nodes, the nodes refer to data elements in a tree, and the nodes are formed by relations between data items and the data elements.
S72: calculating the node number of data to be rendered in the tree structure;
generally, a browser is provided with a Web application, and the Web application can calculate the number of nodes and respective child nodes in data to be rendered in a tree structure, that is, the number of parent nodes and corresponding child nodes under the parent nodes, by a depth-first recursive traversal method.
S73: dividing data to be rendered into a plurality of subdata, and recording the node position corresponding to the subdata to be rendered each time;
setting is carried out according to the service requirement and the performance required by the browser, for example, the optimal performance set by a user is set, and the rendering data is divided into a plurality of subdata.
And node positions of multiple numbers of newly added rendering data each time can be recorded in the counting process, for example, node positions at 200, 400 and 600 degrees are recorded when 200 pieces of data are rendered each time, that is, node positions corresponding to sub data to be rendered each time are recorded. Wherein the node position actually refers to a path position of the node in the screen or a path position at the tree structure.
S74: creating an empty object to store a rendering dataset;
the diff algorithm is used for comparing the old and new virtual DOMs, namely comparing the performance of the two js objects is not so high, and comparing the performance of the two real DOMs is high, so that the performance of the virtual DOM is greatly improved.
Therefore, in order to better compare the two virtual DOM, a blank object for batch copying the data to be rendered can be created, and the blank object is used for storing the rendering data set, wherein the rendering data set can actually store a plurality of sub data added in batches, so as to better store the plurality of sub data added in batches.
S75: inserting and copying the Nth subdata to be rendered into a rendering data set according to the node position corresponding to the (N-1) th rendered subdata, wherein N is a positive integer;
and rendering the data set, and inserting and copying the node of the subdata to be rendered next time according to the node position of the subdata rendered last time. Therefore, the nth sub data to be rendered may be inserted and copied into the rendering data set according to the node position corresponding to the N-1 th rendered sub data, where N is a positive integer.
Specifically, when N is 1, the rendering data set is first screen data, where the first screen data refers to first sub data to be rendered, and if 500 nodes are divided each time, it is that the first sub data to be rendered contains 500 nodes; for example, as shown in fig. 1 with 200 nodes in step S12, the first sub-data to be rendered includes 200 nodes, and after the rendering of the first screen data is completed, the first rendered sub-data is generated, and when N is 2, 3, or … …, the insertion and copying may be performed continuously according to the node corresponding to the first rendered sub-data.
S76: performing virtual document object model asynchronous rendering on the Nth subdata to be rendered;
and performing virtual Document Object Model (DOM) asynchronous rendering on the Nth subdata to be rendered, wherein usually JavaScript performs virtual DOM comparison on rendering data, namely, new tree-like structure data generated by the added nodes is compared with old tree-like structure data, a patch is generated to render the new tree-like structure data, and the obtained data replaces the old tree-like structure data to serve as the basis for the next comparison.
When N is equal to 1, for the first screen data, the first screen data refers to the first subdata to be rendered, the JS frame is used as the zeroth rendered subdata, and the first rendered subdata can be obtained by comparing the first screen data with the JS frame and is used as the next round of old tree-shaped structure data to make a comparison basis for the added new data structure. And when N is equal to 1, comparing the first screen data with the JS framework based on the virtual document object model to obtain a data structure patch between the first screen data and the JS framework.
When N is 2, 3, and … …, based on the virtual document object model, comparing the nth sub data to be rendered with the N-1 th rendered sub data in a traversal manner to obtain a data structure patch between the nth sub data to be rendered and the N-1 th rendered sub data, and replacing the data structure patch with the nth sub data to be rendered to obtain the nth rendered sub data to render the data to be rendered.
If the new rendering data has changes, only the changed part is rendered, and the unchanged part is not changed. In the service processing of the scheme, only data addition is involved, and the data addition amount is small each time, so that the browser can finish rendering of the newly added data quickly.
S77: within the waiting time, whether the Nth rendered subdata meets the rendering end condition of the data to be rendered;
the post-set waiting time may be set for determining whether the entire rendering process is finished, and within the waiting time, determining whether the nth rendered sub-data satisfies the rendering finishing condition of the data to be rendered. If yes, the rendering step is finished; if not, it indicates that the rendering step is not completed, and the process proceeds to step S78.
S78: replacing N with N + 1;
and (4) replacing N with N +1, namely continuing to add rendering, entering step S75, extracting the (N + 1) th subdata to be rendered, inserting and copying the subdata into a rendering data set according to the node position corresponding to the Nth rendered subdata, and performing virtual document object model asynchronous rendering on the (N + 1) th subdata to be rendered, namely performing multi-round data traversal, addition and rendering to realize page rendering of the whole large-scale tree structure.
S79: and finishing the rendering.
And judging whether the rendering process of all the data is finished. And if the node numbers of the newly added tree data and the data to be rendered are the same or the last node is the same or no node can traverse the original data, ending the whole rendering process.
Therefore, the front-end framework rendered by adopting a virtual DOM technology is combined or the data structure is subjected to virtual DOM processing by self, the number of nodes and sub-nodes is counted, asynchronous rendering by a browser is utilized, the nodes needing to be rendered are added to the data needing to be rendered in batches, the virtual DOM does not process rendered data by comparing the change difference of rendered data, only new data nodes are additionally rendered to generate new DOM and render the new DOM until all data are rendered finally, and batch asynchronous rendering processing of a large amount of tree-shaped data is realized.
In addition, according to the technical scheme, large and even overlarge tree structure data can be quickly and smoothly rendered at the browser end by combining with the current advanced front-end framework, the phenomenon that a large amount of DOM nodes are generated by a large amount of data at one time and rendered to the page to cause the jamming and the collapse of the browser is avoided, the stability and the usability of the page are enhanced, and the unavailable waiting time from the time when the data is loaded to the time when the data is rendered is shortened.
Referring to fig. 8, fig. 8 is a schematic block diagram of an embodiment of an electronic device of the present application. The embodiment of the present application provides an electronic device 6, where the electronic device 6 includes:
an obtaining module 61, configured to obtain data to be rendered, where the data to be rendered is tree structure data, and the tree structure data includes multiple nodes;
a dividing module 62, configured to divide data to be rendered into multiple subdata, where each subdata includes a part of nodes;
an adding module 63 for adding the plurality of sub-data to the rendering dataset in batches, and a rendering module 64 for rendering the data in the rendering dataset after each addition.
According to the rendering technology for the display data of the current browser, the data to be rendered are divided into the plurality of subdata, each subdata comprises part of nodes, the plurality of subdata are added to the rendering data in batches to be rendered, so that the part of nodes can be processed in batches, the cost for processing the page rendering of the browser through the memory is saved, the pressure for rendering a large amount of tree-shaped structure data by the browser at one time can be relieved, the browser is prevented from being stuck, and the page performance is improved and the user experience is improved.
Further, referring to fig. 9, fig. 9 is a schematic block diagram of an embodiment of a mobile terminal. The embodiment of the present application provides a mobile terminal 7, including: the processor 71 and the memory 72, the memory 72 stores a computer program 721, and the processor 71 is configured to execute the computer program 721 in the method according to the first aspect of the embodiment of the present application, which is not described herein again.
Referring to fig. 10, fig. 10 is a schematic block diagram of an embodiment of a computer-readable storage medium of the present application. If implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in the computer readable storage medium 80. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage device and includes instructions (computer program 81) for causing a computer device (which may be a personal computer, a server, or a network device) or a processor (processor) to execute all or part of the steps of the method according to the embodiments of the present application. The aforementioned storage device includes: various media such as a usb disk, a portable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and electronic devices such as a computer, a mobile phone, a notebook computer, a tablet computer, and a camera having the storage medium.
The description of the implementation process of the computer program in the computer readable storage medium can refer to the above description of the method embodiment of the mobile terminal 7 of the present application, and will not be repeated here.
Referring to fig. 11, fig. 11 is a schematic block diagram of a hardware architecture of an electronic device according to the present application, where the electronic device 900 may be an industrial computer, a tablet computer, a mobile phone, a notebook computer, and the like, and the mobile phone is taken as an example in the embodiment. The electronic device 900 may include a Radio Frequency (RF) circuit 910, a memory 920, an input unit 930, a display unit 940, a sensor 950, an audio circuit 960, a wifi (wireless fidelity) module 970, a processor 980, a power supply 990, and the like. Wherein the RF circuit 910, the memory 920, the input unit 930, the display unit 940, the sensor 950, the audio circuit 960, and the WiFi module 970 are respectively connected to the processor 980; the power supply 990 is used to supply power to the entire electronic device 900.
Specifically, the RF circuit 910 is used for transmitting and receiving signals; the memory 920 is used for storing data instruction information; the input unit 930 is used for inputting information, and may specifically include a touch panel 931 and other input devices 932 such as operation keys; the display unit 940 may include a display panel or the like; the sensor 950 includes an infrared sensor, a laser sensor, etc. for detecting a user approach signal, a distance signal, etc.; a speaker 961 and a microphone 962 are connected to the processor 980 through the audio circuit 960 for emitting and receiving sound signals; the WiFi module 970 is configured to receive and transmit WiFi signals, and the processor 980 is configured to process data information of the mobile terminal.
The above description is only a part of the embodiments of the present application, and not intended to limit the scope of the present application, and all equivalent devices or equivalent processes performed by the content of the present application and the attached drawings, or directly or indirectly applied to other related technical fields, are also included in the scope of the present application.
Claims (10)
1. A rendering method for browser display data, the method comprising:
acquiring data to be rendered, wherein the data to be rendered is tree structure data, and the tree structure data comprises a plurality of nodes;
dividing the data to be rendered into a plurality of subdata, wherein each subdata comprises part of the nodes;
adding the plurality of subdata into a rendering data set in batches, and rendering the data in the rendering data set after each addition.
2. The method of claim 1,
before adding the plurality of sub-data into a rendering data set in batches and rendering the data in the rendering data set after each addition, the rendering method further includes:
creating an empty object, wherein the empty object is used for storing the rendering data set;
and the rendering data set is used for inserting and copying the node of the subdata to be rendered next time according to the node position of the subdata rendered last time.
3. The method of claim 2,
the adding the plurality of subdata into a rendering data set in batches, and rendering the data in the rendering data set after each addition comprises:
inserting and copying the Nth subdata to be rendered into the rendering data set according to the node position corresponding to the (N-1) th rendered subdata, wherein N is a positive integer;
and performing virtual document object model asynchronous rendering on the Nth subdata to be rendered.
4. The method of claim 3,
the performing asynchronous rendering of the virtual document object model on the nth sub data to be rendered includes:
based on a virtual document object model, comparing the Nth subdata to be rendered with the (N-1) th rendered subdata in a traversal mode to obtain a data structure patch between the Nth subdata to be rendered and the (N-1) th rendered subdata;
and replacing the data structure patch to the Nth subdata to be rendered to obtain the Nth rendered subdata so as to render the data to be rendered.
5. The method of claim 4,
after the replacing the data structure patch to the nth subdata to be rendered to render the data to be rendered, the method further includes:
setting a waiting time;
judging whether the Nth rendered subdata meets the rendering end condition of the data to be rendered or not within the waiting time;
and if not, extracting the (N + 1) th subdata to be rendered and inserting and copying the subdata to the rendering data set according to the node position corresponding to the (N) th rendered subdata, and performing virtual document object model asynchronous rendering on the (N + 1) th subdata to be rendered.
6. The method of claim 1,
the dividing the data to be rendered into a plurality of subdata, each subdata including a part of the nodes, includes:
calculating the number of child nodes of the data to be rendered, wherein the number of child nodes is used for planning the number of child data to be rendered each time;
setting the node position corresponding to the subdata to be rendered each time according to the number of the subdata to be rendered;
and dividing the data to be rendered into a plurality of subdata according to the node positions.
7. The method of claim 1,
the rendering method further includes:
rendering the first subdata to be rendered;
and when the condition that the scroll bar of the data to be rendered in the rendering data set scrolls to the bottom of the browser is monitored, adding rendering data.
8. An electronic device, comprising:
the system comprises an acquisition module, a rendering module and a display module, wherein the acquisition module is used for acquiring data to be rendered, the data to be rendered is tree structure data, and the tree structure data comprises a plurality of nodes;
the dividing module is used for dividing the data to be rendered into a plurality of subdata, and each subdata comprises part of the nodes;
the adding module is used for adding the plurality of subdata into a rendering data set in batches, and the rendering module is used for rendering the data in the rendering data set after each addition.
9. A mobile terminal, comprising: a processor and a memory, the memory having stored therein a computer program for execution by the processor to implement the method of any one of claims 1-7.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program which, when being executed by a processor, is adapted to carry out the method according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110372925.9A CN113190773A (en) | 2021-04-07 | 2021-04-07 | Rendering method of display data, electronic equipment, mobile terminal and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110372925.9A CN113190773A (en) | 2021-04-07 | 2021-04-07 | Rendering method of display data, electronic equipment, mobile terminal and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113190773A true CN113190773A (en) | 2021-07-30 |
Family
ID=76975466
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110372925.9A Pending CN113190773A (en) | 2021-04-07 | 2021-04-07 | Rendering method of display data, electronic equipment, mobile terminal and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113190773A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113867880A (en) * | 2021-10-15 | 2021-12-31 | 杭州安恒信息技术股份有限公司 | Tree structure display method, device, system, electronic device and storage medium |
| CN115268916A (en) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | Dynamic form implementation method and system based on low-code development platform |
| CN116089748A (en) * | 2022-11-11 | 2023-05-09 | 之江实验室 | Drug depth knowledge graph rendering and updating method, system and device |
| CN117473188A (en) * | 2023-12-28 | 2024-01-30 | 中移(苏州)软件技术有限公司 | Display data rendering method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170294043A1 (en) * | 2016-04-06 | 2017-10-12 | Samsung Electronics Co., Ltd. | Method and apparatus for performing path rendering |
| CN109683978A (en) * | 2017-10-17 | 2019-04-26 | 阿里巴巴集团控股有限公司 | A kind of method, apparatus and electronic equipment of the rendering of streaming layout interface |
| US20200020139A1 (en) * | 2018-07-16 | 2020-01-16 | Adobe Inc. | Rendering of Graphic Objects With Pattern Paint Using A Graphics Processing Unit |
| CN111984829A (en) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | Vue-based tree asynchronous loading method, device, equipment and medium |
| CN112069432A (en) * | 2020-07-15 | 2020-12-11 | 北京邮电大学 | Web-based data visualization chart rendering optimization method and system |
-
2021
- 2021-04-07 CN CN202110372925.9A patent/CN113190773A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170294043A1 (en) * | 2016-04-06 | 2017-10-12 | Samsung Electronics Co., Ltd. | Method and apparatus for performing path rendering |
| CN109683978A (en) * | 2017-10-17 | 2019-04-26 | 阿里巴巴集团控股有限公司 | A kind of method, apparatus and electronic equipment of the rendering of streaming layout interface |
| US20200020139A1 (en) * | 2018-07-16 | 2020-01-16 | Adobe Inc. | Rendering of Graphic Objects With Pattern Paint Using A Graphics Processing Unit |
| CN111984829A (en) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | Vue-based tree asynchronous loading method, device, equipment and medium |
| CN112069432A (en) * | 2020-07-15 | 2020-12-11 | 北京邮电大学 | Web-based data visualization chart rendering optimization method and system |
Non-Patent Citations (1)
| Title |
|---|
| 戴志诚;程劲草;: "基于虚拟DOM的Web前端性能优化研究", 计算机应用与软件, no. 12, 15 December 2017 (2017-12-15), pages 1 - 10 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113867880A (en) * | 2021-10-15 | 2021-12-31 | 杭州安恒信息技术股份有限公司 | Tree structure display method, device, system, electronic device and storage medium |
| CN115268916A (en) * | 2022-09-29 | 2022-11-01 | 泰豪软件股份有限公司 | Dynamic form implementation method and system based on low-code development platform |
| CN116089748A (en) * | 2022-11-11 | 2023-05-09 | 之江实验室 | Drug depth knowledge graph rendering and updating method, system and device |
| CN116089748B (en) * | 2022-11-11 | 2023-08-08 | 之江实验室 | Drug depth knowledge graph rendering and updating method, system and device |
| CN117473188A (en) * | 2023-12-28 | 2024-01-30 | 中移(苏州)软件技术有限公司 | Display data rendering method and device, electronic equipment and storage medium |
| CN117473188B (en) * | 2023-12-28 | 2024-04-09 | 中移(苏州)软件技术有限公司 | Display data rendering method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113190773A (en) | Rendering method of display data, electronic equipment, mobile terminal and storage medium | |
| CN105511873B (en) | User interface control display method and device | |
| CN113126990A (en) | Page development method, device, equipment and storage medium | |
| CN101667171A (en) | Method for generating report and report generating device | |
| KR20140121832A (en) | Filtering redundant consumer transaction rules | |
| CN110688121A (en) | Code completion method, device, computer device and storage medium | |
| CN111562920A (en) | Method and device for determining similarity of small program codes, server and storage medium | |
| CN112860265A (en) | Method and device for detecting operation abnormity of source code database | |
| CN113805871A (en) | Front-end code generation method and device and computer equipment | |
| CN107766036B (en) | Module construction method and device and terminal equipment | |
| CN113641591A (en) | Test case generation method and device and test method and device | |
| US20220207427A1 (en) | Method for training data processing model, electronic device and storage medium | |
| US20100191753A1 (en) | Extracting Patterns from Sequential Data | |
| CN112970011A (en) | Recording pedigrees in query optimization | |
| CN112069052A (en) | Abnormal object detection method, device, equipment and storage medium | |
| CN105740260A (en) | Method and device for extracting template file data structure | |
| CN110674033B (en) | Method, device, equipment and storage medium for processing code | |
| CN111143448A (en) | Knowledge base construction method | |
| US10706217B2 (en) | Quick access panel for displaying a web page on a mobile device | |
| CN114579136A (en) | Code processing method and device, computer equipment and storage medium | |
| KR102300444B1 (en) | Document editing device to check whether the font applied to the document is a supported font and operating method thereof | |
| CN114116096A (en) | Information processing method, device, equipment and storage medium | |
| Huang et al. | Web content adaptation for mobile device: A fuzzy-based approach | |
| CN105657473A (en) | Data processing method and device | |
| JP2019144873A (en) | Block diagram analyzer |
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 |