CN113742612A - Data rendering method and device, electronic equipment and storage medium - Google Patents
Data rendering method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113742612A CN113742612A CN202110061891.1A CN202110061891A CN113742612A CN 113742612 A CN113742612 A CN 113742612A CN 202110061891 A CN202110061891 A CN 202110061891A CN 113742612 A CN113742612 A CN 113742612A
- Authority
- CN
- China
- Prior art keywords
- data
- index
- scroll
- area
- visualization
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention is suitable for the technical field of front-end development and provides a data rendering method, a device, electronic equipment and a storage medium, wherein the data rendering method comprises the following steps: under the condition that a scroll event of a scroll bar is monitored, acquiring a first distance value between an upper boundary of a scroll area corresponding to the scroll bar in a browser and an upper boundary of a visual area of the browser; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region; determining a start index and an end index among the indexes of the index length based on the first distance value; extracting second data from the first data based on the start index and the end index; loading the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
Description
Technical Field
The present invention relates to the field of front-end development technologies, and in particular, to a data rendering method and apparatus, an electronic device, and a storage medium.
Background
The data is required to be rendered when the data is displayed on a browser webpage from the background. In the related art, in a service scene where the paging loading technology is not suitable, because the browser needs to render data in a full amount when rendering data with a large amount of data, rendering time of the browser is long, and a webpage is blocked.
Disclosure of Invention
In order to solve the above problem, embodiments of the present invention provide a data rendering method, an apparatus, an electronic device, and a storage medium, so as to at least solve the problem of webpage jamming when a browser fully renders large data in the related art.
The technical scheme of the invention is realized as follows:
in a first aspect, an embodiment of the present invention provides a data rendering method, where the method includes:
under the condition that a scroll event of a scroll bar is monitored, acquiring a first distance value between an upper boundary of a scroll area corresponding to the scroll bar in a browser and an upper boundary of a visual area of the browser; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region;
determining a start index and an end index among the indexes of the index length based on the first distance value;
extracting second data from the first data based on the start index and the end index;
loading the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
In the foregoing solution, the determining a start index and an end index in the index length indexes based on the first distance value includes:
determining the starting index based on the first distance value;
determining the end index based on the index lengths corresponding to the start index and the data loadable by the data container.
In the above scheme, the method further comprises:
determining an offset of the data container relative to the visualization area in case of a scroll event of a scroll bar;
adjusting relative coordinates of the data container in the visualization area based on the offset such that the data loaded in the data container is all shown in the visualization area.
In the above solution, the determining the offset of the data container with respect to the visualization area includes:
determining an offset of the data container relative to the visualization region based on the first distance value.
In the above scheme, the method further comprises:
creating the visualization region based on a set size;
creating the scroll region based on an index length of first data to be rendered in the visualization region;
creating the data container; the data container is used for loading data displayed in the visualization area.
In the above scheme, the method further comprises:
rendering the second data based on an unordered list tag where the first data characterizes table data.
In the above solution, the adjusting the relative coordinates of the data container in the visualization area based on the offset includes:
adjusting a first parameter of the data container based on the offset; the first parameter includes any one of:
a transform attribute value of the data container;
the style attribute value of the data container.
In a second aspect, an embodiment of the present invention provides a data rendering apparatus, where the apparatus includes:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a first distance value between the upper boundary of a scroll area corresponding to a scroll bar in a browser and the upper boundary of a visual area of the browser under the condition that a scroll event of the scroll bar is monitored; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region;
a determining module to determine a start index and an end index among the indexes of the index length based on the first distance value;
an extraction module for extracting second data from the first data based on the start index and the end index;
a loading module to load the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
In a third aspect, an embodiment of the present invention provides an electronic device, including a processor and a memory, where the processor and the memory are connected to each other, where the memory is used to store a computer program, and the computer program includes program instructions, and the processor is configured to call the program instructions to execute the steps of the data rendering method provided in the first aspect of the embodiment of the present invention.
In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, including: the computer-readable storage medium stores a computer program. The computer program, when executed by a processor, implements the steps of a data rendering method as provided by the first aspect of an embodiment of the invention.
According to the embodiment of the invention, under the condition that the occurrence of the scroll event of the scroll bar is monitored, the first distance value between the upper boundary of the scroll area corresponding to the scroll bar in the browser and the upper boundary of the visual area of the browser is obtained. A start index and an end index are then determined among the indexes of the index length based on the first distance value. And finally, extracting second data from the first data based on the starting index and the ending index, and loading the second data into a data container to render the second data in the visualization area. Wherein the data container is used for loading data displayed in the visualization area, and the height of the scrolling area is determined based on the index length of the first data to be rendered in the visualization area. According to the embodiment of the invention, after the scroll bar is scrolled, the initial index and the end index of the second data loaded in the data container are determined, the second data between the initial index and the end index are extracted from the first data, and the browser only needs to render the second data loaded in the data container after the scroll bar is scrolled every time, so that the problem of long rendering time caused by rendering the first data by the browser is avoided. The embodiment of the invention reduces the rendering time and accelerates the response speed of the webpage.
Drawings
Fig. 1 is a schematic flow chart illustrating an implementation of a data rendering method according to an embodiment of the present invention;
FIG. 2 is a schematic diagram of a browser page provided by an embodiment of the present invention;
FIG. 3 is a diagram illustrating a first distance value according to an embodiment of the present invention;
FIG. 4 is a schematic diagram of an implementation flow of another data rendering method according to an embodiment of the present invention;
FIG. 5 is a schematic diagram of an implementation flow of another data rendering method according to an embodiment of the present invention;
FIG. 6 is a schematic diagram of an implementation flow of another data rendering method according to an embodiment of the present invention;
FIG. 7 is a diagram illustrating a data rendering process according to an embodiment of the present invention;
FIG. 8 is a diagram of a data rendering apparatus according to an embodiment of the present invention;
fig. 9 is a schematic diagram of an electronic device according to an embodiment of the invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, not all, embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
At present, when a browser renders data with a large data volume, a paging loading technology is often adopted, paging loading is to divide the data requested by a user once into several pages, and the browser only loads and renders the content of one page each time. The paging loading technology can improve the interface readability, save the bandwidth and increase the processing speed of the server.
Some webpages cannot use a paging loading technology, such as waterfall stream data with close front-back relation, a browser renders data in a batch rendering data mode, however, the batch rendering data is actually data to be rendered by adding data to be rendered to the first screen rendering data in batches, and essentially all data still needs to be rendered, although the rendering time of the first screen data is reduced, the data volume of each rendering of the subsequent browsers is larger and longer, and the rendering time is longer and longer, and finally, page jamming is caused.
In view of the above drawbacks of the related art, embodiments of the present invention provide a data rendering method, which at least can reduce data rendering time of a browser. In order to explain the technical means of the present invention, the following description will be given by way of specific examples.
Fig. 1 is a schematic flow chart illustrating an implementation process of a data rendering method according to an embodiment of the present invention, where an execution subject of the data rendering method is an electronic device, and the electronic device includes a desktop computer, a notebook computer, a server, and the like. Referring to fig. 1, the data rendering method includes:
s101, under the condition that a scroll event of a scroll bar is monitored, acquiring a first distance value between an upper boundary of a scroll area corresponding to the scroll bar in a browser and an upper boundary of a visual area of the browser; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region.
When a front-end page is developed, a visual area is created in the page and used for displaying data content to a user, a scroll bar is arranged in the visual area, and when the scroll bar rolls, the scroll area corresponding to the scroll bar can roll along with the scroll bar, so that the data displayed in the visual area changes.
Referring to fig. 2, fig. 2 is a schematic diagram of a browser page according to an embodiment of the present invention. In an embodiment of the invention, a browser page includes a visualization area, the visualization area has a fixed height and width, a position attribute of the visualization area is set as a relative positioning attribute, and the position attribute specifies a positioning type of an element. The scroll bar is arranged on the right side of the visualization area, when the scroll bar rolls, the loaded data in the visualization area rolls along with the scroll bar, and the data exceeding the visualization area is hidden.
Creating a scroll area in the visualization area, setting a position attribute of the scroll area as absolute positioning attribute, wherein a height of the scroll area is determined based on an index length of first data to be rendered in the visualization area, for example, if each line of data in the first data corresponds to an index, the index length represents the number of indexes. If the height corresponding to each index is a and the index length is N, the height of the scrolling region is nxa. The first data may be any type of data, and if the first data is table type data, the height of the scroll area is obtained by multiplying the total number of table data and the height of the table item. Assuming that there are 10000 pieces of table data and each table entry is 20px in height, the height of the scroll zone is 10000 times 20 equals 20000 px. The scrolling area is a sub-element of the visualization area, after the scrolling area is established, the scrolling area props up the visualization area, and a scroll bar appears on the right side of the visualization area. When the user scrolls the scroll bar, the scroll area is changed, and the data displayed in the visual area is changed.
And creating a data container in the visualization area, setting the position attribute of the data container as absolute positioning attribute, and setting the z-index attribute of the data container as the highest attribute in the three layers of containers. The data container is used for loading the data displayed in the visualization area, rendering the data in the data container, and displaying the data in the visualization area. And after the scroll bar is rolled, updating the data in the data container, and correcting the CSS offset of the data container, so that rendering data corresponding to the data container is always displayed in the visual area.
After the scroll bar is scrolled, the scroll area changes in position relative to the visualization area, and a first distance value between the upper boundary of the scroll area and the upper boundary of the visualization area of the browser at the moment is acquired, wherein the default scroll bar scrolls up and down in the vertical scroll direction. The first distance value characterizes a height of the scroll region relative to an upper partially hidden region of the visualization region.
In practical applications, the first distance value may be obtained by a scrollTop method for setting or returning the vertical position of the scroll bar of the selected element. For example, in fig. 3, the scrollTop value is a distance value between the upper boundary of the visualization area and the upper boundary of the scroll area, and in the leftmost diagram of fig. 3, the scrollTop value is 0, indicating that the upper boundary of the scroll area and the upper boundary of the visualization area coincide. In an embodiment of the invention, the first distance value has the unit px, which is a relative length unit.
S102, determining a starting index and an ending index in the indexes of the index length based on the first distance value.
Here, the data between the start index and the end index in the first data is the data shown in the visualization area.
Referring to fig. 4, in an embodiment, the determining a start index and an end index among the indexes of the index length based on the first distance value includes:
s401, determining the starting index based on the first distance.
As described above, in an embodiment, each row of data in the first data corresponds to an index, and the index may be a row number of the first data, for example, a row number of the first data. The index length is equal to the total number of rows of the first data. According to the height corresponding to each index and the first distance value, a starting index can be determined, wherein the starting index is the number of the first rows of the first data.
Since the height of the scroll area is determined based on the index length of the first data, loading the first data into the scroll area just fills the scroll area. In another embodiment, the first data may be loaded into the scroll area, a line number of the first data corresponding to the first distance value in the scroll area is read, and the line number is determined as the start index.
In practical applications, when the first data is table-type data, the starting index may be determined by the following formula:
floor (scrollTop/table item height)
Wherein, scrollTop is the first distance value, and the height of the table entry refers to the height of the single table in the table, where the height of each table in the default table is the same. Floor () method is used to return the largest integer less than or equal to a given number.
S402, determining the ending index based on the index lengths corresponding to the starting index and the data which can be loaded by the data container.
There are several ways to determine the ending index, and in one embodiment, the first distance value may be directly added to the height of the visualization area to obtain a second distance value. And loading the first data into the rolling area, and determining the line number of the first data corresponding to the second distance value in the rolling area as an end index.
In one embodiment, the height of the data container is less than or equal to the height of the visualization area in which the data loaded in the data container is rendered. Since the heights of the data containers are all preset, the data amount which can be loaded by the data containers is known, and the index lengths corresponding to the data which can be loaded by the data containers are also known.
Here, the start index is added to the index length corresponding to the data that can be loaded in the data container to obtain the end index.
In practical application, when the first data is table type data, the starting index is added with the number of table items that can be displayed in the visualization area to obtain the ending index.
S103, extracting second data from the first data based on the starting index and the ending index.
Here, the second data refers to data displayed in the visualization area, and the data container is a carrier of the second data. After each scroll of the scroll bar, the second data loaded in the data container needs to be re-determined.
In the embodiment of the invention, the browser does not directly render the first data, but only renders the second data in the data container. After the scroll bar is scrolled, according to a first distance value corresponding to the scroll bar, a start index and an end index of second data loaded by a data container in the first data are determined, and the second data represent data positioned between the start index and the end index in the first data.
And reading data between the start index and the end index in the first data to determine as second data.
In practical applications, the data between the start index and the end index in the first data may be intercepted using an array. Wherein the slice method may return the selected element from an existing array.
S104, loading the second data into a data container to render the second data in the visualization area; the data container is used for loading data displayed in the visualization area.
And loading the second data into the data container, and rendering the second data by the browser, so that the content of the second data is displayed in the visualization area, and the response to the scroll bar scroll event is realized.
In an embodiment, where the first data characterizes table data, the second data is rendered based on the unordered list tag. The related art generally uses table tags in the code corresponding to the table data, so that the table can be rendered. In the embodiment of the invention, the unordered list tag is used for replacing the table tag in the code corresponding to the first data, the unordered list tag can also be used for rendering and generating the table, and the rendering speed of the table can be improved.
According to the embodiment of the invention, under the condition that the occurrence of the scroll event of the scroll bar is monitored, the first distance value between the upper boundary of the scroll area corresponding to the scroll bar in the browser and the upper boundary of the visual area of the browser is obtained. A start index and an end index are then determined among the indexes of the index length based on the first distance value. And finally, extracting second data from the first data based on the starting index and the ending index, and loading the second data into a data container to render the second data in the visualization area. Wherein the data container is used for loading data displayed in the visualization area, and the height of the scrolling area is determined based on the index length of the first data to be rendered in the visualization area. According to the embodiment of the invention, after the scroll bar is scrolled, the initial index and the end index of the second data loaded in the data container are determined, the second data between the initial index and the end index are extracted from the first data, and the browser only needs to render the second data loaded in the data container after the scroll bar is scrolled every time, so that the problem of long rendering time caused by rendering the first data by the browser is avoided. The embodiment of the invention reduces the rendering time and accelerates the response speed of the webpage.
Referring to fig. 5, in an embodiment, the method further comprises:
s501, when a scroll event of the scroll bar occurs, determining an offset of the data container with respect to the visualization area.
When the scroll bar scrolls, the data container will also scroll as the scroll bar scrolls. In order to always display the second data in the data container in the visualization area, the coordinates of the data container relative to the visualization area need to be adjusted in real time so that the position of the data container relative to the visualization area does not change.
In an embodiment, an offset of the data container relative to the visualization region may be determined based on the first distance value. Here, the offset amount is equal to the scroll distance of the scroll area.
S502, adjusting the relative coordinates of the data container in the visualization area based on the offset, so that all the data loaded in the data container are displayed in the visualization area.
In an embodiment, the adjusting the relative coordinates of the data container in the visualization region based on the offset includes:
adjusting a first parameter of the data container based on the offset. Here, the first parameter includes any one of:
a transform attribute value of the data container;
the style attribute value of the data container.
That is, the first parameter may be a transform attribute value or a style attribute value.
In practical application, the top attribute of the data container and the top attribute of the visualization area need to be made the same in real time, and the positioning of the data container in the vertical direction is changed by using a transform method of the transform attribute of the data container according to the offset list transform attribute value so as to be always in the visualization area. Among other things, the transform method of the transform attribute allows elements to be rotated, scaled, moved, tilted, etc.
According to the embodiment of the invention, the offset of the data container relative to the visualization area is determined, and the relative coordinate of the data container in the visualization area is adjusted based on the offset, so that all the data loaded in the data container are displayed in the visualization area.
Referring to fig. 6, in an embodiment, the data rendering method further includes:
s601, the visualization area is created based on the set size.
The set size is set by a front-end developer, for example, if the mobile phone is a mobile phone end, the set size may be the size of a mobile phone screen.
In practical application, the position attribute of the visualization area is set as a relative positioning attribute.
S602, the scroll area is created based on the index length of the first data to be rendered in the visualization area.
The method comprises the steps of creating a scroll area in a visualization area, setting a position attribute of the scroll area as an absolute positioning attribute, and determining the height of the scroll area based on the index length of first data to be rendered in the visualization area. The scrolling area is a sub-element of the visualization area, after the scrolling area is established, the scrolling area props up the visualization area, and a scroll bar appears on the right side of the visualization area. When the user scrolls the scroll bar, the scroll area is changed, and the data displayed in the visual area is changed.
S603, creating the data container; the data container is used for loading data displayed in the visualization area.
And creating a data container in the visualization area, setting the position attribute of the data container as absolute positioning attribute, and setting the z-index attribute of the data container as the highest attribute in the three layers of containers. The data container is used for loading the data displayed in the visualization area, rendering the data in the data container, and displaying the data in the visualization area. And after the scroll bar is rolled, updating the data in the data container, and correcting the CSS offset of the data container, so that rendering data corresponding to the data container is always displayed in the visual area.
Here, the size of the visualization area is fixed, and the size of the scroll area is determined according to the index length of the first data, and the size of the data container is also fixed. In practical applications, the visualization area, the scroll area, and the data container are all containers in nature, and may be DIV containers, for example.
Referring to fig. 7, fig. 7 is a schematic flowchart of a data rendering process according to an embodiment of the present invention, where the data rendering process includes:
s701, creating a visualization area.
The visualization area is created based on a set size, where the set size is set by a front-end developer, for example, if the front-end developer is a mobile phone, the set size may be the size of a mobile phone screen.
In practical application, the position attribute of the visualization area is set as a relative positioning attribute.
S702, a rolling area is created.
The method comprises the steps of creating a scroll area in a visualization area, setting a position attribute of the scroll area as an absolute positioning attribute, and determining the height of the scroll area based on the index length of first data to be rendered in the visualization area. The scrolling area is a sub-element of the visualization area, after the scrolling area is established, the scrolling area props up the visualization area, and a scroll bar appears on the right side of the visualization area. When the user scrolls the scroll bar, the scroll area is changed, and the data displayed in the visual area is changed.
S703, a data container is created.
And creating a data container in the visualization area, setting the position attribute of the data container as absolute positioning attribute, and setting the z-index attribute of the data container as the highest attribute in the three layers of containers. The data container is used for loading the data displayed in the visualization area, rendering the data in the data container, and displaying the data in the visualization area. And after the scroll bar is rolled, updating the data in the data container, and correcting the CSS offset of the data container, so that rendering data corresponding to the data container is always displayed in the visual area.
S704, monitoring a scroll bar scroll event.
S705, whether the scroll bar scrolls or not.
If the scroll bar is scrolled, S706 is performed.
S706, updating the second data in the data container.
Acquiring a first distance value between the upper boundary of a scroll area corresponding to a scroll bar and the upper boundary of a visual area of the browser; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region; determining a start index and an end index among the indexes of the index length based on the first distance value; extracting second data from the first data based on the start index and the end index; loading the second data into a data container.
S707, modifying the position of the data container.
Determining an offset of the data container relative to the visualization region; adjusting relative coordinates of the data container in the visualization area based on the offset such that the data loaded in the data container is all shown in the visualization area.
According to the application embodiment of the invention, after the scroll bar is scrolled, the start index and the end index of the second data loaded in the data container are determined, the second data between the start index and the end index are extracted from the first data, and the browser only needs to render the second data loaded in the data container after the scroll bar is scrolled every time, so that the problem of long rendering time caused by rendering the first data by the browser is avoided. The application embodiment of the invention reduces the rendering time and accelerates the response speed of the webpage.
It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.
It will be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
The technical means described in the embodiments of the present invention may be arbitrarily combined without conflict.
In addition, in the embodiments of the present invention, "first", "second", and the like are used for distinguishing similar objects, and are not necessarily used for describing a specific order or a sequential order.
Referring to fig. 8, fig. 8 is a schematic diagram of a data rendering apparatus according to an embodiment of the present invention, and as shown in fig. 8, the apparatus includes: the device comprises an acquisition module, a determination module, an extraction module and a loading module.
The system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a first distance value between the upper boundary of a scroll area corresponding to a scroll bar in a browser and the upper boundary of a visual area of the browser under the condition that a scroll event of the scroll bar is monitored; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region;
a determining module to determine a start index and an end index among the indexes of the index length based on the first distance value;
an extraction module for extracting second data from the first data based on the start index and the end index;
a loading module to load the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
The determining module is specifically configured to:
determining the starting index based on the first distance value;
determining the end index based on the index lengths corresponding to the start index and the data loadable by the data container.
The device further comprises:
an offset determination module for determining an offset of the data container relative to the visualization area when a scrolling event of the scrollbar occurs;
and the adjusting module is used for adjusting the relative coordinates of the data container in the visualization area based on the offset, so that all the data loaded in the data container are displayed in the visualization area.
The offset determination module is specifically configured to:
determining an offset of the data container relative to the visualization region based on the first distance value.
The device further comprises:
a first creation module for creating the visualization area based on a set size;
a second creation module to create the scroll region based on an index length of first data to be rendered in the visualization region;
a third creation module for creating the data container; the data container is used for loading data displayed in the visualization area.
The device further comprises:
a rendering module to render the second data based on the unordered list tag if the first data characterizes table data.
The adjustment module is specifically configured to:
adjusting a first parameter of the data container based on the offset; the first parameter includes any one of:
a transform attribute value of the data container;
the style attribute value of the data container.
In practical applications, the obtaining module, the determining module, the extracting module and the loading module may be implemented by a Processor in an electronic device, such as a Central Processing Unit (CPU), a Digital Signal Processor (DSP), a Micro Control Unit (MCU), or a Programmable gate array (FPGA).
It should be noted that: in the data rendering apparatus provided in the foregoing embodiment, only the division of the modules is exemplified when performing data rendering, and in practical applications, the processing may be distributed to different modules according to needs, that is, the internal structure of the apparatus is divided into different modules to complete all or part of the processing described above. In addition, the data rendering device and the data rendering method provided by the above embodiments belong to the same concept, and specific implementation processes thereof are detailed in the method embodiments and are not described herein again.
Based on the hardware implementation of the program module, in order to implement the method of the embodiment of the present application, an embodiment of the present application further provides an electronic device. Fig. 9 is a schematic diagram of a hardware structure of an electronic device according to an embodiment of the present application, and as shown in fig. 9, the electronic device includes:
the communication interface can carry out information interaction with other equipment such as network equipment and the like;
and the processor is connected with the communication interface to realize information interaction with other equipment, and is used for executing the method provided by one or more technical schemes on the electronic equipment side when running a computer program. And the computer program is stored on the memory.
Of course, in practice, the various components in an electronic device are coupled together by a bus system. It will be appreciated that a bus system is used to enable communications among the components. The bus system includes a power bus, a control bus, and a status signal bus in addition to a data bus. For clarity of illustration, however, the various buses are labeled as a bus system in fig. 9.
The memory in the embodiments of the present application is used to store various types of data to support the operation of the electronic device. Examples of such data include: any computer program for operating on an electronic device.
It will be appreciated that the memory can be either volatile memory or nonvolatile memory, and can include both volatile and nonvolatile memory. Among them, the nonvolatile Memory may be a Read Only Memory (ROM), a Programmable Read Only Memory (PROM), an Erasable Programmable Read-Only Memory (EPROM), an Electrically Erasable Programmable Read-Only Memory (EEPROM), a magnetic random access Memory (FRAM), a Flash Memory (Flash Memory), a magnetic surface Memory, an optical disk, or a Compact Disc Read-Only Memory (CD-ROM); the magnetic surface storage may be disk storage or tape storage. The volatile Memory may be a Random Access Memory (RAM) which serves as an external cache. By way of illustration and not limitation, many forms of RAM are available, such as Static Random Access Memory (SRAM), Synchronous Static Random Access Memory (SSRAM), Dynamic Random Access Memory (DRAM), Synchronous Dynamic Random Access Memory (SDRAM), Double Data Rate Synchronous Dynamic Random Access Memory (DDRSDRAM, Double Data Synchronous Random Access Memory), Enhanced Synchronous Dynamic Random Access Memory (ESDRAM, Enhanced Synchronous Dynamic Random Access Memory), Synchronous link Dynamic Random Access Memory (DRAM, Synchronous Dynamic Random Access Memory), Direct Memory (DRmb Random Access Memory). The memories described in the embodiments of the present application are intended to comprise, without being limited to, these and any other suitable types of memory.
The method disclosed in the embodiments of the present application may be applied to a processor, or may be implemented by a processor. The processor may be an integrated circuit chip having signal processing capabilities. In implementation, the steps of the above method may be performed by integrated logic circuits of hardware in a processor or instructions in the form of software. The processor described above may be a general purpose processor, a DSP, or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, or the like. The processor may implement or perform the methods, steps, and logic blocks disclosed in the embodiments of the present application. A general purpose processor may be a microprocessor or any conventional processor or the like. The steps of the method disclosed in the embodiments of the present application may be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules may be located in a storage medium located in a memory where a processor reads the programs in the memory and in combination with its hardware performs the steps of the method as previously described.
Optionally, when the processor executes the program, the corresponding process implemented by the electronic device in each method of the embodiment of the present application is implemented, and for brevity, no further description is given here.
In an exemplary embodiment, the present application further provides a storage medium, specifically a computer storage medium, for example, a first memory storing a computer program, where the computer program is executable by a processor of an electronic device to perform the steps of the foregoing method. The computer readable storage medium may be Memory such as FRAM, ROM, PROM, EPROM, EEPROM, Flash Memory, magnetic surface Memory, optical disk, or CD-ROM.
In the several embodiments provided in the present application, it should be understood that the disclosed apparatus, electronic device and method may be implemented in other ways. The above-described device embodiments are merely illustrative, for example, the division of the unit is only a logical functional division, and there may be other division ways in actual implementation, such as: multiple units or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented. In addition, the coupling, direct coupling or communication connection between the components shown or discussed may be through some interfaces, and the indirect coupling or communication connection between the devices or units may be electrical, mechanical or other forms.
The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, that is, may be located in one place, or may be distributed on a plurality of network units; some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, all functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may be separately regarded as one unit, or two or more units may be integrated into one unit; the integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional unit.
Those of ordinary skill in the art will understand that: all or part of the steps for implementing the method embodiments may be implemented by hardware related to program instructions, and the program may be stored in a computer readable storage medium, and when executed, the program performs the steps including the method embodiments; and the aforementioned storage medium includes: a removable storage device, a ROM, a RAM, a magnetic or optical disk, or various other media that can store program code.
Alternatively, the integrated units described above in the present application may be stored in a computer-readable storage medium if they are implemented in the form of software functional modules and sold or used as independent products. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or portions thereof contributing to the prior art may be embodied in the form of a software product stored in a storage medium, and including several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a removable storage device, a ROM, a RAM, a magnetic or optical disk, or various other media that can store program code.
The technical means described in the embodiments of the present application may be arbitrarily combined without conflict.
In addition, in the examples of the present application, "first", "second", and the like are used for distinguishing similar objects, and are not necessarily used for describing a specific order or a sequential order.
The above description is only for the specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. A method of data rendering, the method comprising:
under the condition that a scroll event of a scroll bar is monitored, acquiring a first distance value between an upper boundary of a scroll area corresponding to the scroll bar in a browser and an upper boundary of a visual area of the browser; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region;
determining a start index and an end index among the indexes of the index length based on the first distance value;
extracting second data from the first data based on the start index and the end index;
loading the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
2. The method of claim 1, wherein determining a start index and an end index in the index length indices based on the first distance value comprises:
determining the starting index based on the first distance value;
determining the end index based on the index lengths corresponding to the start index and the data loadable by the data container.
3. The method of claim 1, further comprising:
determining an offset of the data container relative to the visualization area in case of a scroll event of a scroll bar;
adjusting relative coordinates of the data container in the visualization area based on the offset such that the data loaded in the data container is all shown in the visualization area.
4. The method of claim 3, wherein the determining an offset of the data container relative to the visualization region comprises:
determining an offset of the data container relative to the visualization region based on the first distance value.
5. The method of claim 1, further comprising:
creating the visualization region based on a set size;
creating the scroll region based on an index length of first data to be rendered in the visualization region;
creating the data container; the data container is used for loading data displayed in the visualization area.
6. The method of claim 1, further comprising:
rendering the second data based on an unordered list tag where the first data characterizes table data.
7. The method of claim 3, wherein said adjusting relative coordinates of said data container in said visualization area based on said offset comprises:
adjusting a first parameter of the data container based on the offset; the first parameter includes any one of:
a transform attribute value of the data container;
the style attribute value of the data container.
8. A data rendering apparatus, comprising:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a first distance value between the upper boundary of a scroll area corresponding to a scroll bar in a browser and the upper boundary of a visual area of the browser under the condition that a scroll event of the scroll bar is monitored; the height of the scroll region is determined based on an index length of first data to be rendered in the visualization region;
a determining module to determine a start index and an end index among the indexes of the index length based on the first distance value;
an extraction module for extracting second data from the first data based on the start index and the end index;
a loading module to load the second data into a data container to render the second data in the visualization region; the data container is used for loading data displayed in the visualization area.
9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the data rendering method of any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program comprising program instructions that, when executed by a processor, cause the processor to perform the data rendering method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110061891.1A CN113742612A (en) | 2021-01-18 | 2021-01-18 | Data rendering method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110061891.1A CN113742612A (en) | 2021-01-18 | 2021-01-18 | Data rendering method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113742612A true CN113742612A (en) | 2021-12-03 |
Family
ID=78728187
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110061891.1A Pending CN113742612A (en) | 2021-01-18 | 2021-01-18 | Data rendering method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113742612A (en) |
Cited By (2)
| 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 |
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
-
2021
- 2021-01-18 CN CN202110061891.1A patent/CN113742612A/en active Pending
Cited By (2)
| 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 |
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108153565B (en) | Method and device for providing page information | |
| US9817794B2 (en) | Responsive rendering of data sets | |
| US20080077879A1 (en) | Interface with multiple rows of tabs having tabs at fixed relative positions | |
| US9171098B2 (en) | Decomposing markup language elements for animation | |
| CN112667330B (en) | Page display method and computer equipment | |
| CN113742612A (en) | Data rendering method and device, electronic equipment and storage medium | |
| CN113467871A (en) | H5 page display method, device, equipment and storage medium | |
| CN107526592B (en) | Page adaptation method and device | |
| CN106886511B (en) | Network table processing method and device | |
| WO2014093405A2 (en) | Preserving layout of region of content during modification | |
| CN112099690B (en) | Page scaling method, device, terminal and storage medium | |
| CN113190321A (en) | Method and equipment for application program page pull-up refreshing | |
| CN105320432A (en) | Scroll bar display method and apparatus | |
| CN110866202A (en) | Front-end paging method and device and readable storage medium | |
| CN113434138B (en) | Information display method and device and electronic equipment | |
| CN113421144A (en) | Page display method and device, equipment and storage medium | |
| CN109992580A (en) | Processing method and processing device, storage medium, the computer equipment of table data | |
| CN111428167B (en) | Page display method and device | |
| CN113204401A (en) | Browser rendering method, terminal and storage medium | |
| AU2016205616A1 (en) | Method of displaying content and electronic device implementing same | |
| CN112987992B (en) | Navigation element display method and device and electronic equipment | |
| CN115421691A (en) | Data rolling method and device based on virtual list and computer equipment | |
| CN109032476B (en) | Method for displaying big data set in graphical user interface | |
| US11330338B2 (en) | Method and system of displaying video comments, computing device, and readable storage medium | |
| CN110765377B (en) | Data loading 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 |