CN113467869A - Data rendering method and device, computer equipment and storage medium - Google Patents
Data rendering method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN113467869A CN113467869A CN202110691986.1A CN202110691986A CN113467869A CN 113467869 A CN113467869 A CN 113467869A CN 202110691986 A CN202110691986 A CN 202110691986A CN 113467869 A CN113467869 A CN 113467869A
- Authority
- CN
- China
- Prior art keywords
- data
- index
- rendered
- display area
- current
- 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 115
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000005096 rolling process Methods 0.000 claims abstract description 41
- 230000001960 triggered effect Effects 0.000 claims abstract description 13
- 238000004590 computer program Methods 0.000 claims description 13
- 238000012545 processing Methods 0.000 claims description 9
- 238000010586 diagram Methods 0.000 description 10
- 238000011068 loading method Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 238000012544 monitoring process Methods 0.000 description 2
- 208000003028 Stuttering Diseases 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application relates to a data rendering method, a data rendering device, computer equipment and a storage medium. The method comprises the following steps: the method comprises the steps that a computer device responds to a rolling operation triggered in a display area of a WEB interface, obtains a rolling value corresponding to the rolling operation, determines a current index of data to be rendered according to the rolling value and the number of pieces of data which can be displayed in the display area, obtains the data to be rendered corresponding to the current index from a preset database, and renders the data to be rendered into the display area. In the method, the data volume of each rendering of the computer equipment is the data volume within a certain range, even in a big data rendering environment, the data in the display area of the WEB interface can be quickly rendered, the problem of unsmooth data rendering of the WEB interface is avoided, the data rendering fluency of the WEB interface is optimized, and the data rendering performance of the WEB interface is improved.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a data rendering method and apparatus, a computer device, and a storage medium.
Background
In practical applications, a form often needs to be displayed in a WEB page, wherein a rendering operation of form data in the WEB page is usually performed in an infinite scroll loading manner.
The unlimited scroll loading method specifically includes that the computer device initializes and renders specified number of pieces of data in the WEB page, for example, the number of pieces of data rendered at one time is 100, after the computer device initializes and renders 1 st to 100 th pieces of data, a scroll event of the WEB page is monitored, and whether the computer device scrolls to the bottom of a visible area of the WEB page at present is judged; if the user scrolls to the bottom, the computer equipment continues to render the 101 st and 200 th data in the visual area of the WEB page. That is, each time the computer device listens to scroll to the bottom, it needs to render the next 100 pieces of data in the WEB page visible area.
In the above manner of infinite scroll loading, the manner of infinite scroll loading and rendering all data is required, and a problem of data loading is encountered.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a data rendering method, apparatus, computer device and storage medium for avoiding deadlock of data rendering on WEB pages.
In a first aspect, a data rendering method is provided, where the method includes:
responding to a rolling operation triggered in a display area of a WEB interface, and acquiring a rolling value corresponding to the rolling operation;
determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
and acquiring data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered to the display area.
In this embodiment, the computer device directly obtains the data to be rendered corresponding to the current index and renders the data to the display area of the WEB interface without rendering other data not in the display area in the background, so that the data volume rendered each time is a data volume within a certain range, and even in a large data rendering environment, the data in the display area of the WEB interface can still be quickly rendered, thereby avoiding the problem of unsmooth data rendering of the WEB interface, optimizing the data rendering fluency of the WEB interface, and improving the data rendering performance of the WEB interface.
In one optional embodiment, the current index includes a current start index and a current end index; determining the current index of the data to be rendered according to the scroll value and the number of displayable data pieces in the display area, wherein the step of determining the current index of the data to be rendered comprises the following steps:
determining a current initial index of data to be rendered in the display area according to the scroll value and the height of the single data in the display area;
and determining the current ending index of the data to be rendered in the display area according to the current starting index and the number of the data to be rendered.
In this embodiment, the computer determines the current start index and the current end index of the data to be rendered in the display area according to the obtained scroll value and the height of the single piece of data in the display area.
In one optional embodiment, determining a current starting index of data to be rendered in the display area according to the scroll value and the height of the single piece of data in the display area includes:
calculating a quotient of the scroll value and the height of the single piece of data in the display area;
and performing rounding-down processing on the quotient value, and determining the integer value obtained by processing as the current initial index of the data to be rendered.
In this embodiment, the computer determines the current starting index of the data to be rendered in the display area according to the obtained scroll value and the height of the single piece of data in the display area.
In an optional embodiment, determining a current ending index of the data to be rendered in the display area according to the current starting index and the number of the data pieces of the data to be rendered includes:
and determining the sum of the current starting index and the number of the data pieces as the current ending index.
In the embodiment, the computer determines the current ending index of the display area according to the sum of the current starting index and the number of the data strips, and the calculation method is simple and effective.
In one optional embodiment, the method further comprises:
acquiring a history starting index and a history ending index of data in a display area before executing the scrolling operation;
judging whether rendered data exist in the display area or not according to the current initial index, the current end index, the historical initial index and the historical end index of the data to be rendered;
determining a target starting index and a target ending index of the data to be rendered according to the judgment result;
acquiring data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered into a display area, wherein the data to be rendered comprises:
and acquiring data to be rendered from a preset database according to the target starting index and the target ending index, and rendering the data to be rendered into the display area.
In this embodiment, before determining the target start index and the target end index, the computer device may further determine whether an overlapping index region exists, that is, whether rendered data exists, and directly multiplex the rendering result of the rendered data in the case that the rendered data exists, so that the data amount of the rendered data is further reduced, and the performance of data rendering on the WEB interface is improved.
In one optional embodiment, determining the target start index and the target end index of the data to be rendered according to the determination result includes:
if the judgment result is that rendered data exists in the display area, determining a starting index and an ending index of the rendered data according to the rendered data;
taking the next index of the end index of the rendered data as the initial index of the unrendered data;
determining a starting index of unrendered data as a target starting index;
and determining the current end index as a target end index.
In the embodiment, the computer equipment determines the target starting index and the target ending index according to the starting index and the ending index of the rendered data, and the method is simple and effective and can determine the target starting index and the target ending index of unrendered data.
In one optional embodiment, rendering the data to be rendered into the display area includes:
multiplexing the rendering result of the rendered data in the WEB page according to the initial index and the end index of the rendered data;
and rendering unrendered data into the display area.
In this embodiment, when rendered data exists, the rendering results of the rendered data are directly multiplexed, thereby further reducing the data size of the current rendering data.
In one optional embodiment, determining the target start index and the target end index of the data to be rendered according to the determination result includes:
and if the judgment result is that rendered data does not exist in the display area, determining the current initial index of the data to be rendered as the target initial index of the data to be rendered, and determining the current end index of the data to be rendered as the target end index.
In this embodiment, when it is determined that rendered data does not exist, the computer device directly determines the current start index as the target start index of the data to be rendered, and determines the current end index of the data to be rendered as the target end index.
In one optional embodiment, the manner of acquiring the number of displayable data pieces in the display area includes:
determining the height of a display area in the WEB page according to the size of the WEB page;
and determining the number of pieces of data which can be displayed in the display area according to the height of the display area and the height of the single piece of data in the display area.
In the embodiment, the computer determines the number of pieces of data which can be displayed in the display area according to the height of the display area and the height of a single piece of data in the display area, the calculation method is simple and effective, and data support is provided for the subsequent computer equipment to determine the current index of the data to be rendered in the display area according to the scroll value.
In a second aspect, there is provided a data rendering apparatus, the apparatus comprising:
the acquisition module is used for responding to the rolling operation triggered in the display area of the WEB interface and acquiring a rolling value corresponding to the rolling operation;
the determining module is used for determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
and the rendering module is used for acquiring the data to be rendered corresponding to the current index from the preset database and rendering the data to be rendered to the display area.
In a third aspect, a computer device is provided, which includes a memory and a processor, wherein the memory stores a computer program, and the processor implements the data rendering method according to any one of the first aspect when executing the computer program.
In a fourth aspect, there is provided a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the data rendering method of any of the first aspects described above.
According to the data rendering method, the data rendering device, the computer device and the storage medium, the computer device responds to the rolling operation triggered in the display area of the WEB interface, obtains the rolling value corresponding to the rolling operation, determines the current index of the data to be rendered according to the rolling value and the number of data which can be displayed in the display area, obtains the data to be rendered corresponding to the current index from the preset database, and renders the data to be rendered into the display area. In the method, after the computer equipment determines the number of data pieces which can be displayed in the display area of the WEB interface, the current index of the data to be rendered can be calculated through the acquired scroll value and the number of the data pieces, the data to be rendered corresponding to the current index is directly acquired and rendered into the display area of the WEB interface, and other data which are not in the display area are not required to be rendered in a background mode.
Drawings
FIG. 1 is a diagram of an application environment of a data rendering method in one embodiment;
FIG. 2 is a flow diagram illustrating a method for data rendering in one embodiment;
FIG. 3 is a flow diagram illustrating a method for data rendering in one embodiment;
FIG. 4 is a flow diagram illustrating a method for data rendering in one embodiment;
FIG. 5 is a flow diagram that illustrates a method for data rendering in one embodiment;
FIG. 6 is a flow diagram that illustrates a method for data rendering in one embodiment;
FIG. 7 is a flow diagram that illustrates a method for data rendering in one embodiment;
FIG. 8 is a flowchart of a data rendering method in one embodiment;
FIG. 9 is a flowchart of a data rendering method according to an embodiment;
FIG. 10 is a block diagram showing a configuration of a data rendering apparatus according to one embodiment;
FIG. 11 is a block diagram showing a configuration of a data rendering apparatus according to one embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.
The existing data rendering technology for WEB pages includes a method of directly loading all data in one page, a method of rendering data using a false page, a method of rendering data using a true page, and a method of rendering data using a wireless page.
The first method is a method of directly loading all data in one page, namely rendering all data in a database at one time, and once the data volume is increased, the problem of data rendering stagnation occurs. The second, third and fourth methods all use paging technology and monitoring of scrolling events, and the main point is that data is rendered in batches according to the scrolling events and paging results, that is, only a part of data is rendered at one time, and new data can be rendered after the previous data rendering is completed. For example, the computer device monitors that the scroll is performed to the bottom twice continuously, the computer device needs to render and initialize the corresponding 1 st to 100 th pieces of data first, and render and scroll the corresponding 101-.
Based on the problems in the prior art, the present application provides a data rendering method, which can be applied to the application environment shown in fig. 1. In one embodiment, a computer device is provided, which may be a server, the internal structure of which may be as shown in fig. 1. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless communication can be realized through WIFI, an operator network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a data rendering method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
Those skilled in the art will appreciate that the architecture shown in fig. 1 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
The following describes in detail the technical solutions of the present application and how the technical solutions of the present application solve the above technical problems by embodiments and with reference to the drawings. The following several specific embodiments may be combined with each other, and details of the same or similar concepts or processes may not be repeated in some embodiments. It should be noted that the data rendering method provided in the embodiments of fig. 2 to fig. 9 of the present application is mainly executed by a computer device, and may also be a data rendering apparatus, where the data rendering apparatus may be a part or all of the computer device through software, hardware, or a combination of software and hardware. In the following method embodiments, the execution subject is a computer device as an example.
In an embodiment, as shown in fig. 2, a data rendering method is provided, which relates to a process in which a computer device responds to a scroll operation triggered in a display area of a WEB interface, obtains a scroll value corresponding to the scroll operation, determines a current index of data to be rendered according to the scroll value and the number of pieces of data displayable in the display area, obtains data to be rendered corresponding to the current index from a preset database, and renders the data to be rendered into the display area, and includes the following steps:
s201, responding to a rolling operation triggered in a display area of the WEB interface, and acquiring a rolling value corresponding to the rolling operation.
The WEB interface can be an interface of a PC (personal computer) end or an interface of a mobile terminal; the scroll operation may be a scroll operation based on a mouse wheel, a touch screen sliding operation, or a sliding operation of dragging on an interface.
In this embodiment, when the computer device may set a monitoring event based on the WEB interface, monitor whether a scroll operation occurs in the display area in the WEB interface, and when it is monitored that the scroll operation occurs in the display area in the WEB interface, obtain a current scroll value corresponding to the scroll operation in response to the scroll operation, which is not limited in this embodiment.
S202, determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area.
Wherein, alternatively, the display area may be understood as a table display area, the display area is composed of a plurality of rows of data, each row of data is regarded as one piece of data, each piece of data has a uniform data height, and the display area may determine the number of pieces of data that can be displayed based on the single data height.
In this embodiment, the computer device may determine, as the current index, an index of the first piece of data and an index of the last piece of data currently displayed in the display area according to the obtained scroll value and the number of pieces of data displayable in the display area. Optionally, the obtained scroll value is a value determined based on a WEB interface initialization state and a state formed by a scroll operation, and the computer device may calculate a quotient of the scroll value and a height of a single piece of data to determine an index of a first piece of data in a display area formed by the current scroll operation; or, the computer device may further determine the number of data scroll bars corresponding to a scroll value formed by scrolling once, determine scroll bar number data according to the scroll value, and determine the number of scroll data bars and the value of the initial first data index as the current index of the first data. Then, correspondingly, after the current index of the first piece of data is determined, the sum of the current index of the first piece of data and the displayable data condition in the display area is determined as the current index of the last piece of data. This embodiment is not limited to this.
S203, obtaining data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered to a display area.
The preset database stores all data which can be displayed in a display area of a WEB interface, and the storage format of the data in the database is consistent with the display format in the display area, so that the rendering data corresponding to the current index can be acquired from the database based on the current index of the data to be rendered determined in the display area.
In this embodiment, the computer device determines, according to a current index of data to be rendered, data to be rendered corresponding to the current index from the database, and when rendering the data to be rendered into the display area, the computer device implements rendering of the data corresponding to the current index based on a Document Object Model (DOM), which is not limited in this embodiment.
In the data rendering method, the computer device responds to the rolling operation triggered in the display area of the WEB interface, obtains the rolling value corresponding to the rolling operation, determines the current index of the data to be rendered according to the rolling value and the number of data which can be displayed in the display area, obtains the data to be rendered corresponding to the current index from the preset database, and renders the data to be rendered into the display area. In the method, after the computer equipment determines the number of data pieces which can be displayed in the display area of the WEB interface, the current index of the data to be rendered can be calculated through the acquired scroll value and the number of the data pieces, the data to be rendered corresponding to the current index is directly acquired and rendered into the display area of the WEB interface, and other data which are not in the display area are not required to be rendered in a background mode.
The display rendering data in the display area includes a first piece of data and a last piece of data, and accordingly, the front index includes a current start index and a current end index. In one embodiment, as shown in fig. 3, determining the current index of the data to be rendered according to the scroll value and the number of pieces of data displayable in the display area includes:
s301, determining the current initial index of the data to be rendered in the display area according to the scroll value and the height of the single data in the display area.
The height of the single piece of data in the display area may be a height specified by the user, or may also be an adaptive height determined by the computer device according to the height of the display area, and the computer device calculates a current starting index of the data to be rendered according to the obtained scroll value and the height of the single piece of data in the display area, optionally, as shown in fig. 4, the method includes:
s401, calculating a quotient value of the rolling value and the height of the single data in the display area.
S402, rounding down the quotient value, and determining the integer value obtained by processing as the current initial index of the data to be rendered.
In this embodiment, the scroll value obtained by the computer is scrollTop, the height of the single piece of data in the display area is h, the computer device calculates a quotient value between the scroll value and the height of the single piece of data in the display area, performs rounding-down on the quotient value, and determines the processed integer value as the current start index StartIndex of the data to be rendered, which may be represented as:
StartIndex＝Math.floor(scrollTop/h)
wherein, the Math.floor () function is a floor function.
S302, determining a current ending index of the data to be rendered in the display area according to the current starting index and the number of the data to be rendered.
Optionally, as shown in fig. 5, the determining, by the computer device, a manner of the number of displayable data pieces in the display area includes:
s501, determining the height of a display area in the WEB page according to the size of the WEB page.
In this embodiment, the computer device may directly obtain the size parameter of the WEB page, and determine the height ScreenHeight of the display area according to the size of the WEB page.
S502, determining the number of data pieces which can be displayed in the display area according to the height of the display area and the height of the single data in the display area.
In this embodiment, the computer device calculates the number ShowX of data pieces displayable in the display area according to the height ScreenHeight of the display area, and optionally, the calculation mode may be expressed as:
ShowX＝Math.ceil(ScreenHeight/h)
wherein, Math.ceil () is a ceiling function.
Then, in one embodiment, the computer device may determine the sum of the current start index StartIndex and the number of data strips ShowX as the current end index EndIndex, and for example, the manner in which the computer device determines the current end index EndIndex of the data to be rendered may be expressed as:
EndIndex＝StartIndex+ShowX
in this embodiment, the computer determines the current start index and the current end index of the data to be rendered in the display area according to the obtained scroll value and the height of the single piece of data in the display area.
In order to further optimize the data rendering performance of the WEB interface display area, in an embodiment, as shown in fig. 6, the method further includes:
s601, acquiring a history starting index and a history ending index of data in the display area before the scroll operation is executed.
The historical start index of the data in the display area before the scroll operation is executed, that is, the start index calculated last time by the computer device, and the historical end index of the data in the display area before the scroll operation is executed, that is, the end index calculated last time by the computer device. The computer device obtains a last start index and a last end index based on the historical data.
S602, judging whether rendered data exist in the display area or not according to the current starting index, the current ending index, the historical starting index and the historical ending index of the data to be rendered.
In this embodiment, the computer device determines whether an overlapping index exists according to the current start index, the current end index, the historical start index, and the historical end index, where data corresponding to the overlapping index is rendered data.
S603, determining a target start index and a target end index of the data to be rendered according to the judgment result.
Wherein, the judgment result comprises the existence of the overlapped index, namely the existence of the rendered data; or no overlapped index exists, namely the data to be rendered are all unrendered data.
In a scenario where the determination result is that rendered data exists in the display area, as shown in fig. 7, determining a target start index and a target end index of the data to be rendered according to the determination result includes:
and S701, if the judgment result is that rendered data exists in the display area, determining a starting index and an ending index of the rendered data according to the rendered data.
In this embodiment, the computer device determines an overlapping index interval according to a current start index, a current end index, a history start index, and a history end index of the data to be rendered, determines a start index of the overlapping index interval as a start index of the rendered data, and determines an end index of the overlapping index interval as an end index of the rendered data. Alternatively, the starting index of the rendered data may be the current starting index as determined by the computer device.
S702, the next index of the end index of the rendered data is used as the start index of the unrendered data.
In this embodiment, the computer device determines the end index of the rendered data according to the overlapping index interval, and accordingly, the next index adjacent to the end index of the rendered data is the start index of the unrendered data.
And S703, determining the initial index of the unrendered data as a target initial index.
In this embodiment, the computer device needs to perform a rendering operation on unrendered data according to the target starting index, and then the computer device may determine the starting index of unrendered data as the target starting index.
S704, determining the current ending index as a target ending index.
In this embodiment, the computer device may directly determine the current end index as the end index of unrendered data, that is, as the target end index.
In a scenario where the determination result is that rendered data exists in the display area, and after determining the target start index and the target end index based on the embodiment shown in fig. 7, in an embodiment, as shown in fig. 8, rendering data to be rendered into the display area includes:
s801, multiplexing rendering results of rendered data in a WEB page according to the initial index and the end index of the rendered data.
In this embodiment, the computer device may determine the DOM corresponding to the rendered data according to the start index and the end index of the rendered data, and directly multiplex the rendering result of the rendered data in the DOM without performing a rendering operation on the rendered data again.
S802, rendering unrendered data to a display area.
In this embodiment, after multiplexing the rendering result of the rendered data, the computer device performs a rendering operation on unrendered data according to a normal rendering operation flow, and renders the unrendered data into the display area.
In a scenario where the determination result is that rendered data does not exist in the display area, in an embodiment, determining a target start index and a target end index of data to be rendered according to the determination result includes:
and if the judgment result is that rendered data does not exist in the display area, determining the current initial index of the data to be rendered as the target initial index of the data to be rendered, and determining the current end index of the data to be rendered as the target end index.
In this embodiment, the computer device determines that there is no overlapping index interval according to the current start index, the current end index, the historical start index and the historical end index of the data to be rendered, that is, data corresponding to the current start index and the current end index interval are unrendered data, at this time, the computer device directly determines the current start index of the data to be rendered as the target start index of the data to be rendered, and determines the current end index of the data to be rendered as the target end index.
S604, obtaining data to be rendered from a preset database according to the target starting index and the target ending index, and rendering the data to be rendered to the display area.
In this embodiment, the computer device determines the corresponding target start index and target end index in different scenes, so as to obtain the DOM corresponding to the data to be rendered from the preset database based on the target start index and the target end index, and fill all the DOMs without rendering data into the data, that is, render the data to be rendered into the display area.
In this embodiment, before determining the target start index and the target end index, the computer device may further determine whether an overlapping index region exists, that is, whether rendered data exists, and directly multiplex the rendering result of the rendered data in the presence of the rendered data, thereby further reducing the data amount of the rendered data, avoiding the problem of stuttering of data rendering of the WEB interface, optimizing the fluency of data rendering of the WEB interface, and improving the performance of data rendering of the WEB interface.
To better explain the above method, as shown in fig. 9, the present embodiment provides a data rendering method, which specifically includes:
s101, determining the height of a display area in a WEB page according to the size of the WEB page;
s102, determining the number of data which can be displayed in the display area according to the height of the display area and the height of the single data in the display area;
s103, responding to a rolling operation triggered in a display area of the WEB interface, and acquiring a rolling value corresponding to the rolling operation;
s104, calculating a quotient of the rolling value and the height of the single data in the display area;
s105, carrying out downward rounding processing on the quotient, and determining an integer value obtained by processing as a current initial index of the data to be rendered;
s106, determining the sum of the current initial index and the number of the data pieces as a current ending index;
s107, acquiring a history starting index and a history ending index of data in a display area before the scroll operation is executed;
s108, judging whether rendered data exist in the display area or not according to the current initial index, the current end index, the historical initial index and the historical end index of the data to be rendered;
s109, if the judgment result is that rendered data exists in the display area, determining a starting index and an ending index of the rendered data according to the rendered data;
s110, taking the next index of the end index of the rendered data as the initial index of the unrendered data;
s111, determining the initial index of unrendered data as a target initial index;
s112, determining the current ending index as a target ending index;
s113, multiplexing a rendering result of the rendered data in the WEB page according to the initial index and the end index of the rendered data;
s114, rendering unrendered data to a display area;
s115, if the judgment result is that rendered data does not exist in the display area, determining the current initial index of the data to be rendered as a target initial index of the data to be rendered, and determining the current end index of the data to be rendered as a target end index;
and S116, acquiring data to be rendered from a preset database according to the target starting index and the target ending index, and rendering the data to be rendered to the display area.
In this embodiment, after determining the number of data pieces displayable in the display area of the WEB interface, the computer device may calculate the current index of the data to be rendered by using the obtained scroll value and the number of data pieces, directly obtain the data to be rendered corresponding to the current index, render the data to be rendered in the display area of the WEB interface, and do not need to render other data not in the display area in the background, so that the data amount to be rendered each time is a data amount within a certain range, even in a large data rendering environment, fast rendering of the data in the display area of the WEB interface can be still achieved, and further, after obtaining the current index of the data to be rendered by calculation, a determination of the rendered data is performed, and in a case where the rendered data is determined to exist, the rendering result of the rendered data can be directly multiplexed, thereby further reducing the data amount of the rendered data this time, the problem of unsmooth data rendering of the WEB interface is avoided, the data rendering smoothness of the WEB interface is optimized, and the data rendering performance of the WEB interface is improved.
The data rendering method provided by the above embodiment has similar implementation principles and technical effects to those of the above method embodiment, and is not described herein again.
It should be understood that although the various steps in the flow charts of fig. 2-9 are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least some of the steps in fig. 2-9 may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed in turn or alternately with other steps or at least some of the other steps.
In one embodiment, as shown in fig. 10, there is provided a data rendering apparatus including:
the acquiring module 01 is used for responding to a rolling operation triggered in a display area of a WEB interface and acquiring a rolling value corresponding to the rolling operation;
the determining module 02 is used for determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
the rendering module 03 is configured to obtain data to be rendered corresponding to the current index from a preset database, and render the data to be rendered to the display area.
In one optional embodiment, the current index includes a current start index and a current end index; the determining module 02 is used for determining the current initial index of the data to be rendered in the display area according to the scrolling value and the height of the single data in the display area; and determining the current ending index of the data to be rendered in the display area according to the current starting index and the number of the data to be rendered.
In one optional embodiment, the determining module 02 is configured to calculate a quotient of the scroll value and the height of the single piece of data in the display area; and performing rounding-down processing on the quotient value, and determining the integer value obtained by processing as the current initial index of the data to be rendered.
In one optional embodiment, the determining module 02 is configured to determine the sum of the current start index and the number of data pieces as the current end index.
In one alternative embodiment, as shown in fig. 11, the apparatus further includes a determining module 04;
the acquisition module 01 is further configured to acquire a history start index and a history end index of data in the display area before the scroll operation is performed;
the judging module 04 is configured to judge whether rendered data exists in the display area according to a current start index, a current end index, a historical start index, and a historical end index of the data to be rendered;
the determining module 02 is further configured to determine a target start index and a target end index of the data to be rendered according to the determination result;
the rendering module 03 is further configured to obtain data to be rendered from a preset database according to the target start index and the target end index, and render the data to be rendered to the display area.
In an optional embodiment, the determining module 02 is further configured to determine, according to rendered data, a starting index and an ending index of the rendered data if the determination result indicates that the rendered data exists in the display area; taking the next index of the end index of the rendered data as the initial index of the unrendered data; determining a starting index of unrendered data as a target starting index; and determining the current end index as a target end index.
In an optional embodiment, the rendering module 03 is further configured to multiplex a rendering result of the rendered data in the WEB page according to the start index and the end index of the rendered data; and rendering unrendered data into the display area.
In an optional embodiment, the determining module 02 is further configured to determine, if the determination result is that rendered data does not exist in the display area, a current start index of the data to be rendered as a target start index of the data to be rendered, and determine a current end index of the data to be rendered as a target end index.
In one optional embodiment, the obtaining module 01 is further configured to determine a height of a display area in the WEB page according to the size of the WEB page; and determining the number of pieces of data which can be displayed in the display area according to the height of the display area and the height of the single piece of data in the display area.
For specific limitations of the data rendering apparatus, reference may be made to the above limitations of the data rendering method, which will not be described herein again. The modules in the data rendering device can be wholly or partially implemented by software, hardware and a combination thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, comprising a memory and a processor, the memory having a computer program stored therein, the processor implementing the following steps when executing the computer program:
responding to a rolling operation triggered in a display area of a WEB interface, and acquiring a rolling value corresponding to the rolling operation;
determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
and acquiring data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered to the display area.
The implementation principle and technical effect of the computer device provided by the above embodiment are similar to those of the above method embodiment, and are not described herein again.
In one embodiment, a computer-readable storage medium is provided, having a computer program stored thereon, which when executed by a processor, performs the steps of:
responding to a rolling operation triggered in a display area of a WEB interface, and acquiring a rolling value corresponding to the rolling operation;
determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
and acquiring data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered to the display area.
The implementation principle and technical effect of the computer-readable storage medium provided by the above embodiments are similar to those of the above method embodiments, and are not described herein again.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database or other medium used in the embodiments provided herein can include at least one of non-volatile and volatile memory. Non-volatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical storage, or the like. Volatile Memory can include Random Access Memory (RAM) or external cache Memory. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), among others.
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (11)
1. A method of data rendering, the method comprising:
responding to a rolling operation triggered in a display area of a WEB interface, and acquiring a rolling value corresponding to the rolling operation;
determining the current index of the data to be rendered according to the scroll value and the number of displayable data in the display area;
and acquiring data to be rendered corresponding to the current index from a preset database, and rendering the data to be rendered to the display area.
2. The method of claim 1, wherein the current index comprises a current start index and a current end index; the determining a current index of data to be rendered according to the scroll value and the number of displayable data in the display area includes:
determining the current initial index of the data to be rendered in the display area according to the scroll value and the height of the single data in the display area;
and determining the current ending index of the data to be rendered in the display area according to the current starting index of the data to be rendered and the number of the data.
3. The method of claim 2, wherein determining a current starting index of data to be rendered in the display area based on the scroll value and a height of the single piece of data in the display area comprises:
calculating a quotient of the scroll value and the height of the single piece of data in the display area;
and performing rounding-down processing on the quotient, and determining an integer value obtained by processing as the current initial index of the data to be rendered.
4. The method of claim 2, further comprising:
acquiring a history starting index and a history ending index of data in a display area before the scroll operation is executed;
judging whether rendered data exist in the display area or not according to the current starting index, the current ending index, the historical starting index and the historical ending index of the data to be rendered;
determining a target start index and a target end index of the data to be rendered according to a judgment result;
the obtaining of the data to be rendered corresponding to the current index from a preset database and rendering of the data to be rendered to the display area includes:
and acquiring the data to be rendered from the preset database according to the target starting index and the target ending index, and rendering the data to be rendered to the display area.
5. The method according to claim 4, wherein the determining the target start index and the target end index of the data to be rendered according to the determination result comprises:
if the judgment result is that rendered data exists in the display area, determining a starting index and an ending index of the rendered data according to the rendered data;
taking the next index of the end index of the rendered data as the start index of unrendered data;
determining a starting index of the unrendered data as the target starting index;
determining the current end index as the target end index.
6. The method of claim 5, wherein the rendering the data to be rendered into the display area comprises:
multiplexing the rendering result of the rendered data in the WEB page according to the initial index and the end index of the rendered data;
rendering the unrendered data into the display area.
7. The method according to claim 4, wherein the determining the target start index and the target end index of the data to be rendered according to the determination result comprises:
if the judgment result is that rendered data does not exist in the display area, determining the current start index of the data to be rendered as the target start index of the data to be rendered, and determining the current end index of the data to be rendered as the target end index.
8. The method according to any one of claims 1 to 7, wherein the manner of obtaining the number of displayable data pieces in the display area comprises:
determining the height of a display area in the WEB page according to the size of the WEB page;
and determining the number of the data which can be displayed in the display area according to the height of the display area and the height of the single data in the display area.
9. An apparatus for data rendering, the apparatus comprising:
the acquisition module is used for responding to the rolling operation triggered in the display area of the WEB interface and acquiring a rolling value corresponding to the rolling operation;
the determining module is used for determining the current index of the data to be rendered according to the scroll value and the number of the displayable data in the display area;
and the rendering module is used for acquiring the data to be rendered corresponding to the current index from a preset database and rendering the data to be rendered to the display area.
10. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method of any of claims 1 to 8.
11. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110691986.1A CN113467869A (en) | 2021-06-22 | 2021-06-22 | Data rendering method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110691986.1A CN113467869A (en) | 2021-06-22 | 2021-06-22 | Data rendering method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113467869A true CN113467869A (en) | 2021-10-01 |
Family
ID=77869116
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110691986.1A Pending CN113467869A (en) | 2021-06-22 | 2021-06-22 | Data rendering method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113467869A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114327222A (en) * | 2021-12-07 | 2022-04-12 | 特赞（上海）信息科技有限公司 | Data rendering method and device, terminal and storage medium |
| CN114510190A (en) * | 2022-04-18 | 2022-05-17 | 苏州万店掌网络科技有限公司 | Front-end page rendering method, device, equipment and storage medium |
| CN114748873A (en) * | 2022-06-14 | 2022-07-15 | 北京新唐思创教育科技有限公司 | Interface rendering method, device, equipment and storage medium |
| CN115442664A (en) * | 2022-08-19 | 2022-12-06 | 武汉斗鱼鱼乐网络科技有限公司 | Display method, device, medium and electronic equipment of panel view |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102449665A (en) * | 2009-06-02 | 2012-05-09 | 高通股份有限公司 | Displaying a visual representation of performance metrics for rendered graphics elements |
| US20190266905A1 (en) * | 2017-08-15 | 2019-08-29 | Honeywell International Inc. | Aircraft stand management |
| CN110244993A (en) * | 2018-12-25 | 2019-09-17 | 蔚来汽车有限公司 | Front end page loading method, device, controller and medium |
| CN112068834A (en) * | 2020-09-03 | 2020-12-11 | 杭州天宽科技有限公司 | JS-based data rendering method and device |
| CN112287258A (en) * | 2020-09-25 | 2021-01-29 | 长沙市到家悠享网络科技有限公司 | Page rendering method, device, equipment and storage medium |
| CN112765947A (en) * | 2021-01-22 | 2021-05-07 | 平安资产管理有限责任公司 | Table rendering display method and device, computer equipment and storage medium |
| CN112926000A (en) * | 2021-02-26 | 2021-06-08 | 北京百度网讯科技有限公司 | Display area rendering method, device and equipment, readable storage medium and product |
-
2021
- 2021-06-22 CN CN202110691986.1A patent/CN113467869A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102449665A (en) * | 2009-06-02 | 2012-05-09 | 高通股份有限公司 | Displaying a visual representation of performance metrics for rendered graphics elements |
| US20190266905A1 (en) * | 2017-08-15 | 2019-08-29 | Honeywell International Inc. | Aircraft stand management |
| CN110244993A (en) * | 2018-12-25 | 2019-09-17 | 蔚来汽车有限公司 | Front end page loading method, device, controller and medium |
| CN112068834A (en) * | 2020-09-03 | 2020-12-11 | 杭州天宽科技有限公司 | JS-based data rendering method and device |
| CN112287258A (en) * | 2020-09-25 | 2021-01-29 | 长沙市到家悠享网络科技有限公司 | Page rendering method, device, equipment and storage medium |
| CN112765947A (en) * | 2021-01-22 | 2021-05-07 | 平安资产管理有限责任公司 | Table rendering display method and device, computer equipment and storage medium |
| CN112926000A (en) * | 2021-02-26 | 2021-06-08 | 北京百度网讯科技有限公司 | Display area rendering method, device and equipment, readable storage medium and product |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114327222A (en) * | 2021-12-07 | 2022-04-12 | 特赞（上海）信息科技有限公司 | Data rendering method and device, terminal and storage medium |
| CN114510190A (en) * | 2022-04-18 | 2022-05-17 | 苏州万店掌网络科技有限公司 | Front-end page rendering method, device, equipment and storage medium |
| CN114748873A (en) * | 2022-06-14 | 2022-07-15 | 北京新唐思创教育科技有限公司 | Interface rendering method, device, equipment and storage medium |
| CN115442664A (en) * | 2022-08-19 | 2022-12-06 | 武汉斗鱼鱼乐网络科技有限公司 | Display method, device, medium and electronic equipment of panel view |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113467869A (en) | Data rendering method and device, computer equipment and storage medium | |
| US8949739B2 (en) | Creating and maintaining images of browsed documents | |
| EP3489904A1 (en) | Method and device for generating thermodynamic diagram | |
| AU2014308633B2 (en) | Swipe toolbar to switch tabs | |
| CN109388317B (en) | Picture loading method, terminal device and storage medium | |
| US20110145730A1 (en) | Utilization of Browser Space | |
| CN112131331B (en) | Map data processing method, map data processing device, computer equipment and storage medium | |
| CN109375973A (en) | Page display method, device, computer equipment and computer readable storage medium | |
| CN112990699A (en) | Power data processing method and device, computer equipment and storage medium | |
| CN106168959B (en) | Webpage layout method and device | |
| CN112000906A (en) | Data rendering method, device, equipment and storage medium | |
| WO2015166318A1 (en) | System and method for dynamically optimizing map tile quality and detail | |
| CN111400633A (en) | Page resource loading method and device | |
| CN114327449A (en) | Page display method and system and computer equipment | |
| CN111143731A (en) | Display method and device for webpage interface zooming and terminal equipment | |
| CN111177605B (en) | Single-page loading performance monitoring method and device and related equipment | |
| CN116185547A (en) | Data rendering method and device based on virtual list | |
| CN110909276A (en) | Data rendering method and device, computer equipment and storage medium | |
| GB2527672A (en) | Measuring device performance | |
| CN114117274A (en) | Data rendering method and device, computer equipment and storage medium | |
| CN111372240B (en) | Picture uploading method and device, computer equipment and storage medium | |
| WO2015166319A1 (en) | System and method for dynamically optimizing map scaling animation | |
| CN114021050B (en) | Data processing method, data processing device, computer equipment and storage medium | |
| CN110059281B (en) | Picture display method, device, terminal and computer readable storage medium | |
| CN109032476B (en) | Method for displaying big data set in graphical user interface |
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 |