CN111782995B - Graphics paging loading method and device - Google Patents
Graphics paging loading method and device Download PDFInfo
- Publication number
- CN111782995B CN111782995B CN202010476453.7A CN202010476453A CN111782995B CN 111782995 B CN111782995 B CN 111782995B CN 202010476453 A CN202010476453 A CN 202010476453A CN 111782995 B CN111782995 B CN 111782995B
- Authority
- CN
- China
- Prior art keywords
- current point
- position information
- node
- current
- loading
- 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 97
- 238000000034 method Methods 0.000 claims abstract description 30
- 238000012163 sequencing technique Methods 0.000 claims abstract description 5
- 238000012545 processing Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 8
- 238000012544 monitoring process Methods 0.000 claims description 5
- 238000012546 transfer Methods 0.000 claims description 3
- 238000011176 pooling Methods 0.000 claims 1
- 238000010586 diagram Methods 0.000 description 15
- 230000008569 process Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 4
- 230000006399 behavior Effects 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000004931 aggregating effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 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
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)
- Processing Or Creating Images (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a graphics paging loading method and device, and relates to the technical field of computers. One specific implementation mode of the method comprises the steps of obtaining graphic loading data of a current page, and sequencing the graphic loading data based on time so as to sequentially cycle through; determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure, and further positioning each father node position of the current point; and after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element. Therefore, the embodiment of the invention can solve the problems of low loading efficiency and poor user experience of the existing graphic data.
Description
Technical Field
The present invention relates to the field of computer technologies, and in particular, to a graphics paging loading method and apparatus.
Background
Gitlab-network-graph code repository when exposing a Git graph (the Git graph is used to record the commit record graph of the code repository), all commit information of the repository is obtained at once (the commit information is represented as points, each point is a commit record), and then the graph is drawn using svg (the scalable vector graph is based on the extensible markup language).
In the process of implementing the present invention, the inventor finds that at least the following problems exist in the prior art:
Currently, a third party library related to the Git graph needs to acquire all commit information at one time when page display is performed. When the commit data size is large, not only is the network transmission time consuming, but also the front-end page presentation consumes a lot of time. Therefore, the loading time of the graphics paging is too long, and page jam and even page collapse can occur, so that the user experience is very unfriendly.
Disclosure of Invention
In view of the above, the embodiments of the present invention provide a method and an apparatus for loading graphics pages, which can solve the problems of low efficiency and poor user experience of the existing graphics data loading.
In order to achieve the above object, according to an aspect of an embodiment of the present invention, there is provided a graphics paging loading method, including obtaining graphics loading data of a current page, and sorting the graphics loading data based on time to sequentially cycle through; determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure, and further positioning each father node position of the current point; and after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
Optionally, determining the current point location information and the corresponding connection line includes:
Judging whether the current point position information exists in the Map structure or not according to the current traversed graph loading data; if yes, traversing the sub-nodes corresponding to the current point position information, and drawing a connecting line from each sub-node to the current point position information so as to draw a graph of the current point; if not, judging whether the current point position information has a father node, if so, drawing a current point graph according to the father node; if not, generating a new branch according to the position information of the current point so as to draw the graph of the current point.
Optionally, traversing the sub-nodes corresponding to the current point position information, and drawing a connection line from each sub-node to the current point position information to draw a graph of the current point, including:
traversing the sub-nodes corresponding to the current point position information, and drawing the connecting line from each sub-node to the current point position information to obtain a plurality of corresponding branch lines;
And converging the plurality of branch lines to one preset reserved branch line, and deleting redundant branch lines.
Optionally, aggregating the plurality of branch lines onto one of the preset reserved branch lines includes:
Selecting the branch line with the smallest abscissa from all the branch lines as a converged preset reserved branch line;
Judging whether the abscissa of the current point position information is equal to the abscissa of the reserved branch line, if so, drawing a connecting line of the child node and the current point, and deleting the branch line where the child node is located; if not, the connection line from the child node to the branch line where the abscissa of the current point is located is drawn, and then the connection line from the child node to the preset reserved branch line is drawn.
Optionally, locating each parent node location of the current point includes:
Judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+interval, cy) and is positioned on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node; the position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
Optionally, obtaining graphics loading data of the current page includes:
The transfer of graphics load data is monitored by the watch method of vue.
Optionally, after loading the graphics data based on the parent element, further comprising:
and monitoring a preset target behavior event to trigger loading of the next page of graphic data.
In addition, the invention also provides a graphics paging loading device, which comprises an acquisition module, a processing module and a processing module, wherein the acquisition module is used for acquiring graphics loading data of a current page, and sequencing the graphics loading data based on time so as to sequentially cycle through;
The processing module is used for determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure and further positioning each father node position of the current point; and after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
One embodiment of the above invention has the following advantages or benefits: the technical means that the current point position information and the corresponding connecting lines are determined according to the current traversed graph loading data and updated into the Map structure is adopted, so that the technical effects of presetting the position of a father node and paging the position of a locating point can be achieved simply and quickly when the data is loaded.
Further effects of the above-described non-conventional alternatives are described below in connection with the embodiments.
Drawings
The drawings are included to provide a better understanding of the invention and are not to be construed as unduly limiting the invention. Wherein:
FIG. 1 is a schematic diagram of the main flow of a graphics page loading method according to one embodiment of the invention;
FIG. 2 is a schematic diagram of a main flow of a graphics page loading method according to another embodiment of the present invention;
FIG. 3 is a schematic diagram of the main flow of a graphics page loading method according to another embodiment of the present invention;
FIG. 4 is a schematic diagram of main modules of a graphics page loading device according to an embodiment of the present invention;
FIG. 5 is an exemplary system architecture diagram in which embodiments of the present invention may be applied;
fig. 6 is a schematic diagram of a computer system suitable for use in implementing an embodiment of the invention.
Detailed Description
Exemplary embodiments of the present invention will now be described with reference to the accompanying drawings, in which various details of the embodiments of the present invention are included to facilitate understanding, and are to be considered merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the invention. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
FIG. 1 is a schematic diagram of a main flow of a graphics page loading method according to an embodiment of the present invention, as shown in FIG. 1, the graphics page loading method includes:
Step S101, obtaining graphic loading data of a current page, and sequencing the graphic loading data based on time so as to sequentially cycle through.
In some embodiments, in the process of drawing a git-graph, the front end acquires the graph loading data of the current page from the back end, generates an array ordered by time, and only performs one cycle traversal on the acquired graph loading data in order to minimize the time complexity.
As a preferred embodiment, whether new data is transmitted or not can be monitored through a switch method of vue, and if so, the acquired new pattern loading data is processed.
Step S102, according to the currently traversed graph loading data, determining the current point position information and the corresponding connecting lines, updating the current point position information and the corresponding connecting lines into a Map structure, and further positioning each father node position of the current point.
In an embodiment, the Map structure is an Object-like Object, is a set of key pairs, and is a more perfect hash structure. Preferably, the embodiment of the invention establishes commits Map a structure, further determines the position information of the current commit point and the corresponding connecting line according to the currently traversed graph loading data, updates the current commit point and the corresponding connecting line into the commits Map structure, and further locates each father node position of the current commit point. Wherein, commits Map uses commitId as key value, and value stores x and y coordinate values of the commit point and branch line information of the commit point.
In some embodiments, when determining the current point position information and the corresponding connection line, it may be determined whether the current point position information already exists in the Map structure according to the currently traversed graphic loading data. And traversing the sub-nodes corresponding to the current point position information according to the judging result, and drawing the connecting line from each sub-node to the current point position information to draw the graph of the current point. If not, judging whether the current point position information has a father node, if so, drawing a current point graph according to the father node; if not, generating a new branch according to the position information of the current point so as to draw the graph of the current point.
In a further embodiment, traversing the sub-nodes corresponding to the current point position information, and drawing a connection line from each sub-node to the current point position information, so that when drawing the graph of the current point, traversing the sub-nodes corresponding to the current point position information, and drawing the connection line from each sub-node to the current point position information, thereby obtaining a plurality of corresponding branch lines. And then converging the plurality of branch lines to one preset reserved branch line, and deleting the redundant branch lines. The branch line is in a Map structure, the key value is a coordinate cx value, the value stores the latest cy position of the branch line, and the method of drawing a connecting line is provided. In an embodiment of the invention, each cx value represents a spur.
That is, if the current commit point already exists in the commits Map structure, its child nodes are first traversed, the wiring of each child node to the current node is drawn, and then the svg graph of the commit point is drawn. If the current commit point does not exist in the commits Map structure, but its parent node already exists in the commits Map structure, then the svg graph for that commit point can be directly drawn. If the current commit point does not exist and the parent node does not exist in the commits Map structure either, then a new branch needs to be generated and then the svg graph for that point is drawn.
In addition, when the plurality of branch lines are converged on one preset reserved branch line, the specific implementation process comprises the following steps:
and selecting the branch line with the smallest abscissa from all the branch lines as a converged preset reserved branch line. Then judging whether the abscissa of the current point position information is equal to the abscissa of the reserved branch line, if so, drawing a connecting line of the child node and the current point, and deleting the branch line where the child node is located; if not, the connection line from the child node to the branch line where the abscissa of the current point is located is drawn, and then the connection line from the child node to the preset reserved branch line is drawn.
That is, when there are a plurality of child nodes, it is described that a plurality of branch lines are to be converged on one of the branch lines, wherein it is necessary to ensure that each line can be in the correct position and delete the redundant branch lines. First, the leg (minx) with the smallest x coordinate among all the legs is determined as the reserved leg that is finally converged. If the abscissa cx= = =minx of the current commit point, then the connection line between the child node and the current commit point is drawn, and the branch line where the child node is located is deleted. If the abscissa cx of the current commit point-! When the node is= minx, a line from a child node to the branch line where the abscissa cx of the current commit point is located is drawn, and then a line from the child node to the branch line where the minx is located is drawn.
As still other embodiments, when locating each parent node location of the current point, the specific implementation process includes:
Judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+interval, cy) and is located on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node. The position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
That is, when locating the position of each parent node of the current commit point (cx, cy), if the current parent node already exists, the position information of the current commit node is stored in the child field of the parent node. If the current parent node does not already exist, the parent node is located at (cx+interval, cy) and is located on a new leg (cx+interval) (i.e., a new leg is generated), and the current commit point information is stored in the child field of the parent node. The parent node is stored or updated into commits Map structures.
And step S103, after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
In an embodiment, after the loop traversal is finished, all parent node positions corresponding to the graph loading data are added to a parent element (the parent element refers to a DOM element), namely, points and lines generated by the new graph loading data are inserted into the parent element at one time, and then the page is rendered.
As some embodiments, after loading the graphics data based on the parent element, further comprising:
And monitoring a preset target behavior event to trigger loading of the next page of graphic data. For example: and monitoring a mouse scrolling event, judging whether the next page needs to be loaded, if so, jumping to the step 101, and if not, ending.
In summary, the graphics paging loading method of the present invention realizes that the front end acquires data from the back end multiple times, that is, the page rolls to a certain position to automatically acquire the next page data, then processes the acquired data, and draws the svg graphics. Therefore, the method reduces the graphics paging loading time, and a user can smoothly check all the submitting historical pictures of the warehouse without waiting, so that the user experience is greatly improved. Meanwhile, the method can be perfectly combined with vue to realize a reusable assembly.
FIG. 2 is a schematic diagram of a main flow of a graphics page loading method according to another embodiment of the present invention, as shown in FIG. 2, the graphics page loading method includes:
In step S201, the transmission of the graphics loading data of the current page is monitored through a switch method of vue.
Step S202, sorting the graphic loading data of the current page based on time to sequentially cycle through.
Step S203, according to the currently traversed graphic loading data, determining the current point position information and the corresponding connecting lines, updating the current point position information and the corresponding connecting lines into a Map structure, and further positioning each father node position of the current point.
And step S204, after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
Step S205, monitor the mouse and roll the incident, judge whether need load the next page, if yes, return to step S201, otherwise withdraw from the flow.
FIG. 3 is a schematic diagram illustrating a main flow of a graphics page loading method according to another embodiment of the present invention, and as shown in FIG. 3, the graphics page loading method includes:
Step S301, graphics loading data of a current page are obtained, and the graphics loading data are ordered based on time to sequentially cycle through.
Step S302, judging whether the current point position information exists in the Map structure according to the currently traversed graphic loading data, if yes, proceeding to step S303, otherwise proceeding to step S304.
Step S303, traversing the sub-nodes corresponding to the current point position information, drawing the connection line from each sub-node to the current point position information to draw the graph of the current point, and performing step S307.
In some embodiments, traversing the sub-nodes corresponding to the current point position information, and drawing the connection line from each sub-node to the current point position information to obtain a plurality of corresponding branch lines; and converging the plurality of branch lines to one preset reserved branch line, and deleting redundant branch lines.
Preferably, when a plurality of branch lines are converged on one preset reserved branch line, a branch line with the smallest abscissa is selected from all the branch lines as a converged preset reserved branch line, whether the abscissa of the current point position information is equal to the abscissa of the reserved branch line is judged, if so, a connection line between a child node and the current point is drawn, and the branch line where the child node is located is deleted; if not, the connection line from the child node to the branch line where the abscissa of the current point is located is drawn, and then the connection line from the child node to the preset reserved branch line is drawn.
Step S304, judging whether the current point position information has a father node, if yes, proceeding to step S305, otherwise proceeding to step S306.
Step S305 is performed by drawing a current point pattern from the parent node, and step S307 is performed.
Step S306, generating a new branch according to the current point position information to draw the graph of the current point, and performing step S307.
Step S307, the current point position information and the drawn graph are updated into the Map structure.
Step S308, each parent node position of the current point is located.
In some embodiments, judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+ i nterval, cy) and is positioned on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node; the position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
Step S309, after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
Fig. 4 is a schematic diagram of main modules of a graphics paging loading device according to an embodiment of the present invention, and as shown in fig. 4, the graphics paging loading device 400 includes an acquisition module 401 and a processing module 402. The acquisition module 401 acquires graphic loading data of a current page, and sorts the graphic loading data based on time so as to sequentially cycle through; the processing module 402 determines the current point position information and the corresponding connecting lines according to the current traversed graph loading data, updates the current point position information and the corresponding connecting lines into a Map structure and further positions each father node position of the current point; and after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
In some embodiments, the processing module 402 determines the current point location information and corresponding links and updates to the Map structure, including:
Judging whether the current point position information exists in the Map structure or not according to the current traversed graph loading data; if yes, traversing the sub-nodes corresponding to the current point position information, and drawing a connecting line from each sub-node to the current point position information so as to draw a graph of the current point; if not, judging whether the current point position information has a father node, if so, drawing a current point graph according to the father node; if not, generating a new branch according to the position information of the current point so as to draw the graph of the current point.
In some embodiments, the processing module 402 traverses the sub-nodes corresponding to the current point location information, and draws a connection line from each sub-node to the current point location information to draw a graph of the current point, including:
Traversing the sub-nodes corresponding to the current point position information, and drawing the connecting line from each sub-node to the current point position information to obtain a plurality of corresponding branch lines; and converging the plurality of branch lines to one preset reserved branch line, and deleting redundant branch lines.
In some embodiments, the processing module 402 aggregates the plurality of branches onto one of the preset reserved branches, including:
Selecting the branch line with the smallest abscissa from all the branch lines as a converged preset reserved branch line; judging whether the abscissa of the current point position information is equal to the abscissa of the reserved branch line, if so, drawing a connecting line of the child node and the current point, and deleting the branch line where the child node is located; if not, the connection line from the child node to the branch line where the abscissa of the current point is located is drawn, and then the connection line from the child node to the preset reserved branch line is drawn.
In some embodiments, processing module 402 locates each parent node location of the current point, including:
Judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+interval, cy) and is positioned on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node; the position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
In some embodiments, the obtaining module 401 obtains graphics loading data of the current page, including:
The transfer of graphics load data is monitored by the watch method of vue.
In some embodiments, after loading the graphics data based on the parent element, the processing module 402 further includes:
and monitoring a preset target behavior event to trigger loading of the next page of graphic data.
It should be noted that, in the graphics page loading method and the graphics page loading device of the present invention, there is a corresponding relationship between the implementation contents, so the repetitive contents will not be described.
FIG. 5 illustrates an exemplary system architecture 500 to which the graphics page loading method or graphics page loading apparatus, graphics page loading arbitration or graphics page loading arbitration apparatus of embodiments of the present invention may be applied.
As shown in fig. 5, the system architecture 500 may include terminal devices 501, 502, 503, a network 504, and a server 505. The network 504 is used as a medium to provide communication links between the terminal devices 501, 502, 503 and the server 505. The network 504 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
A user may interact with the server 505 via the network 504 using the terminal devices 501, 502, 503 to receive or send messages or the like. Various communication client applications may be installed on the terminal devices 501, 502, 503, such as shopping class applications, web browser applications, search class applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only).
The terminal devices 501, 502, 503 may be various electronic devices having a graphic page loading screen or a graphic page loading discrimination screen and supporting web browsing, including but not limited to smartphones, tablet computers, laptop and desktop computers, and the like.
The server 505 may be a server providing various services, such as a background management server (by way of example only) providing support for shopping-type websites browsed by users using the terminal devices 501, 502, 503. The background management server may analyze and process the received data such as the product information query request, and feedback the processing result (e.g., the target push information, the product information—only an example) to the terminal device.
It should be noted that, the graphics page loading method or the graphics page loading determining method according to the embodiments of the present invention is generally executed by the server 505, and accordingly, the computing device is generally disposed in the server 505.
It should be understood that the number of terminal devices, networks and servers in fig. 5 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
Referring now to FIG. 6, there is illustrated a schematic diagram of a computer system 600 suitable for use in implementing an embodiment of the present invention. The terminal device shown in fig. 6 is only an example, and should not impose any limitation on the functions and the scope of use of the embodiment of the present invention.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU) 601, which can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. In the RAM603, various programs and data required for the operation of the computer system 800 are also stored. The CPU601, ROM602, and RAM603 are connected to each other through a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, mouse, etc.; an output portion 607 including a Cathode Ray Tube (CRT), a liquid crystal graphics page Loader (LCD), and the like, and a speaker, and the like; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The drive 610 is also connected to the I/O interface 605 as needed. Removable media 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is installed as needed on drive 610 so that a computer program read therefrom is installed as needed into storage section 608.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication portion 609, and/or installed from the removable medium 611. The above-described functions defined in the system of the present invention are performed when the computer program is executed by a Central Processing Unit (CPU) 601.
The computer readable medium shown in the present invention may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present invention, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules involved in the embodiments of the present invention may be implemented in software or in hardware. The described modules may also be provided in a processor, for example, as: a processor includes an acquisition module and a processing module. The names of these modules do not constitute a limitation on the module itself in some cases.
As another aspect, the present invention also provides a computer-readable medium that may be contained in the apparatus described in the above embodiments; or may be present alone without being fitted into the device. The computer readable medium carrying one or more programs which, when executed by the apparatus, cause the apparatus to include obtaining graphics load data for a current page, the graphics load data being ordered based on time to cycle through in turn; determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure, and further positioning each father node position of the current point; and after the loop traversal is finished, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element.
According to the technical scheme provided by the embodiment of the invention, the problems of low loading efficiency and poor user experience of the existing graphic data can be solved.
The above embodiments do not limit the scope of the present invention. It will be apparent to those skilled in the art that various modifications, combinations, sub-combinations and alternatives can occur depending upon design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of the present invention.
Claims (8)
1. A graphics page loading method, comprising:
the method comprises the steps of obtaining graphic loading data of a current page, and sequencing the graphic loading data based on time so as to sequentially cycle and traverse;
Determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure, and further positioning each father node position of the current point;
After the circulation traversal is finished in sequence, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element;
The method for determining the current point position information and the corresponding connecting line comprises the following steps: judging whether the current point position information exists in the Map structure or not according to the current traversed graph loading data; if yes, traversing the sub-nodes corresponding to the current point position information, and drawing a connecting line from each sub-node to the current point position information so as to draw a graph of the current point; if not, judging whether the current point position information has a father node, if so, drawing a current point graph according to the father node; if not, generating a new branch according to the position information of the current point so as to draw the graph of the current point;
Locating each parent node location of the current point includes: judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+interval, cy) and is positioned on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node; the position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
2. The method of claim 1, wherein traversing the child nodes corresponding to the current point location information and drawing a line from each child node to the current point location information to draw a graph of the current point comprises:
traversing the sub-nodes corresponding to the current point position information, and drawing the connecting line from each sub-node to the current point position information to obtain a plurality of corresponding branch lines;
And converging the plurality of branch lines to one preset reserved branch line, and deleting redundant branch lines.
3. The method of claim 2, wherein pooling the plurality of branch lines onto one of the predetermined reserved branch lines comprises:
Selecting the branch line with the smallest abscissa from all the branch lines as a converged preset reserved branch line;
Judging whether the abscissa of the current point position information is equal to the abscissa of the reserved branch line, if so, drawing a connecting line of the child node and the current point, and deleting the branch line where the child node is located; if not, the connection line from the child node to the branch line where the abscissa of the current point is located is drawn, and then the connection line from the child node to the preset reserved branch line is drawn.
4. The method of claim 1, wherein obtaining graphics load data for a current page comprises:
The transfer of graphics load data is monitored by the watch method of vue.
5. The method of any of claims 1-4, further comprising, after loading graphics data based on the parent element:
and monitoring a preset target behavior event to trigger loading of the next page of graphic data.
6. A graphics page loading apparatus, comprising:
The acquisition module is used for acquiring the graphic loading data of the current page, and sequencing the graphic loading data based on time so as to sequentially cycle through;
The processing module is used for determining the position information of the current point and the corresponding connecting line according to the current traversed graph loading data, updating the current point position information and the corresponding connecting line into a Map structure and further positioning each father node position of the current point; after the circulation traversal is finished in sequence, adding all the parent node positions corresponding to the graphic loading data into the parent element so as to load the graphic data based on the parent element;
The method for determining the current point position information and the corresponding connecting line comprises the following steps: judging whether the current point position information exists in the Map structure or not according to the current traversed graph loading data; if yes, traversing the sub-nodes corresponding to the current point position information, and drawing a connecting line from each sub-node to the current point position information so as to draw a graph of the current point; if not, judging whether the current point position information has a father node, if so, drawing a current point graph according to the father node; if not, generating a new branch according to the position information of the current point so as to draw the graph of the current point;
Locating each parent node location of the current point includes: judging whether a parent node exists in the current point, if so, storing the position information of the current point into a sub-field of the parent node; if not, the position information of the father node is (cx+interval, cy) and is positioned on the generated branch line (cx+interval), and the current point information is stored in the sub-field of the father node; the position information of the current point is (cx, cy), and interval is the interval distance between two branch lines.
7. An electronic device, comprising:
one or more processors;
Storage means for storing one or more programs,
When executed by the one or more processors, causes the one or more processors to implement the method of any of claims 1-5.
8. A computer readable medium, on which a computer program is stored, characterized in that the program, when being executed by a processor, implements the method according to any of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010476453.7A CN111782995B (en) | 2020-05-29 | 2020-05-29 | Graphics paging loading method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010476453.7A CN111782995B (en) | 2020-05-29 | 2020-05-29 | Graphics paging loading method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111782995A CN111782995A (en) | 2020-10-16 |
| CN111782995B true CN111782995B (en) | 2024-05-17 |
Family
ID=72754001
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010476453.7A Active CN111782995B (en) | 2020-05-29 | 2020-05-29 | Graphics paging loading method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111782995B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114925131B (en) * | 2021-12-31 | 2024-05-07 | 中企云链股份有限公司 | Automatic traversal method for data synchronization |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1862533A (en) * | 2005-12-31 | 2006-11-15 | 珠海金山软件股份有限公司 | Demonstration data file capable of being processed by SVG application program |
| CN103853417A (en) * | 2012-11-30 | 2014-06-11 | 腾讯科技（深圳）有限公司 | Rolling and pagination display method and device for network dynamic picture |
| CN106503026A (en) * | 2015-09-08 | 2017-03-15 | 华为技术有限公司 | A kind of method and apparatus of video data |
| CN109165364A (en) * | 2018-09-12 | 2019-01-08 | 广州视源电子科技股份有限公司 | Page rendering method, device, equipment and storage medium |
| CN109891406A (en) * | 2016-11-04 | 2019-06-14 | 微软技术许可有限责任公司 | Multi-stage data paging |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170293593A1 (en) * | 2016-04-12 | 2017-10-12 | International Business Machines Corporation | Managing node pagination for a graph data set |
-
2020
- 2020-05-29 CN CN202010476453.7A patent/CN111782995B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1862533A (en) * | 2005-12-31 | 2006-11-15 | 珠海金山软件股份有限公司 | Demonstration data file capable of being processed by SVG application program |
| CN103853417A (en) * | 2012-11-30 | 2014-06-11 | 腾讯科技（深圳）有限公司 | Rolling and pagination display method and device for network dynamic picture |
| CN106503026A (en) * | 2015-09-08 | 2017-03-15 | 华为技术有限公司 | A kind of method and apparatus of video data |
| CN109891406A (en) * | 2016-11-04 | 2019-06-14 | 微软技术许可有限责任公司 | Multi-stage data paging |
| CN109165364A (en) * | 2018-09-12 | 2019-01-08 | 广州视源电子科技股份有限公司 | Page rendering method, device, equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 基于WebGIS的图形加载性能优化研究;叶娜;雒伟民;张峰;肖康;;福建电脑;20131125(11);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111782995A (en) | 2020-10-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110019350B (en) | Data query method and device based on configuration information | |
| CN110473036B (en) | Method and device for generating order number | |
| CN110766348B (en) | Method and device for combining goods picking tasks | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| CN115470432A (en) | Page rendering method and device, electronic equipment and computer readable medium | |
| CN111782995B (en) | Graphics paging loading method and device | |
| CN114297278A (en) | Method, system and device for quickly writing batch data | |
| CN113282852A (en) | Method and device for editing webpage | |
| CN112256254A (en) | Method and device for generating layout code | |
| CN111026629A (en) | Method and device for automatically generating test script | |
| CN112445394B (en) | Screenshot method and screenshot device | |
| CN113626472A (en) | Method and device for processing order data | |
| CN115129936A (en) | Directed graph generation method and device, electronic equipment and computer readable medium | |
| CN107885774B (en) | Data processing method and system | |
| CN110888583A (en) | Page display method, system and device and electronic equipment | |
| CN113127416A (en) | Data query method and device | |
| CN112784195A (en) | Page data publishing method and system | |
| CN111695059A (en) | Information view list processing method and device and display equipment | |
| CN113762570B (en) | Method and device for sorting task group list | |
| CN115495518B (en) | Method and device for generating chart | |
| CN111274586B (en) | Method and device for storing data | |
| CN113760860B (en) | Data reading method and device | |
| CN113449215B (en) | Picture loading method and device | |
| CN110750410B (en) | Method and device for monitoring database logs | |
| CN114741055A (en) | Component state management method and device |
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 |