CN108197153B - Method for rapidly rendering table data based on scroll bar positioning - Google Patents
Method for rapidly rendering table data based on scroll bar positioning Download PDFInfo
- Publication number
- CN108197153B CN108197153B CN201711286609.XA CN201711286609A CN108197153B CN 108197153 B CN108197153 B CN 108197153B CN 201711286609 A CN201711286609 A CN 201711286609A CN 108197153 B CN108197153 B CN 108197153B
- Authority
- CN
- China
- Prior art keywords
- data
- cached
- height
- scroll bar
- display page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
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
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a method for rapidly rendering table data based on scroll bar positioning, which comprises the following steps of calculating the height of total data in a table, which needs to be occupied, according to the total data number in the table and the height of one piece of data in the table: calculating the index of the data on the same horizontal line with the top end of the vertical scroll bar in the total data according to the height of the vertical scroll bar from the top end of the table; setting the number of data blocks to be cached in a table; calculating the number of data blocks which are not displayed and need to be cached and are positioned above the current table display page by taking the current table display page as a central block and the number of data blocks which are not displayed and need to be cached and are positioned below the current table display page according to the number of the data blocks which need to be cached in the table; calculating a starting index S and an ending index E of all cache data required to be rendered in the current table, and rendering data from the S to the E in the table; the invention can effectively improve the rendering speed of the table and improve the user experience.
Description
Technical Field
The invention relates to the technical field of Web front ends, in particular to a method for quickly rendering table data based on scroll bar positioning.
Background
In a Web page, a form is a friendly visual communication form and is a convenient means for organizing and arranging data. Is widely applied to various occasions.
However, when the amount of data in the table exceeds a certain scale (more than 1000), the GUI rendering engine of the browser will greatly increase the table rendering time (more than 5-7 seconds), which greatly affects the user experience. How to accelerate the rendering speed of the table without reducing the user experience is a problem that needs to be solved by each Web front-end developer.
The existing solution mainly avoids the problem by displaying the table in a paging way or displaying transition animation in the rendering process. However, the paging method cannot quickly browse data in a wide range. By using the transitional animation mode, the user cannot see the data in the table and cannot perform any operation on the table before the rendering is finished and the animation disappears.
Disclosure of Invention
The technical problem to be solved by the present invention is to provide a method for rapidly rendering table data based on scroll bar positioning, aiming at solving the problem that user experience is greatly reduced when paging or animation cannot be used to avoid slow rendering speed.
In order to achieve the technical purpose, the technical scheme adopted by the invention is as follows:
a method for fast rendering table data based on scroll bar positioning comprises the following steps:
step 1: calculating the height of the total data in the table required to be occupied according to the total data number in the table and the height of one piece of data in the table:
H = N * h；
n is the total data number in the table, H is the height of one piece of data in the table, H is the height of the total data needing to be occupied in the table, and the height H of the total data needing to be occupied in the table is set as the occupied height of a vertical scroll bar in the table;
step 2: and calculating the index of the data on the same horizontal line with the top end of the vertical scroll bar in the total data according to the height of the vertical scroll bar from the top end of the table:
I = X / h；
wherein, X is the height of the vertical scroll bar from the top of the table, and I is the index of the data on the same horizontal line with the top of the vertical scroll bar in the total data;
and step 3: setting the number of data blocks to be cached in the table by taking the number of data displayed on a display page of the current table as one data block;
and 4, step 4: calculating the number of data blocks which are not displayed and need to be cached and are positioned above the current table display page and the number of data blocks which are not displayed and need to be cached and are positioned below the current table display page by taking the current table display page as a central block according to the number of the data blocks which need to be cached in the table:
p = (P – 1) / 2；
wherein P is the number of data blocks which need to be cached in the table, and P is the number of data blocks which need to be cached and are not displayed above the display page of the current table or the number of data blocks which need to be cached and are not displayed below the display page of the current table;
and 5: calculating the starting index and the ending index of all cache data pieces needing to be rendered by the current table:
s = I-p V, S = 0 when S is less than 0;
e = I + (p +1) × V-1, S = N when S is greater than N;
v is the number of data displayed on a display page of the current table, S is a starting index of the number of all cache data to be rendered by the current table, and E is an ending index of the number of all cache data to be rendered by the current table;
step 6: the data of the S-th to E-th bars are rendered in the table.
As a further improved technical scheme of the invention, the number of the data blocks which need to be cached in the set table is an odd number.
The invention has the beneficial effects that: according to the method, the number of the data blocks (namely the number of the cached data pieces) needing caching in the table is reasonably set according to the number of the data pieces displayed on the display page of the current table, and by using the method, the rendering speed of the table can be effectively improved, and the primary rendering of the table can be completed within 500-700 milliseconds; and when the user operates the vertical scroll bar and browses the data in any area of the table, the data in the browsing area designated by the user can be rendered and displayed in the same extremely short time, so that the user experience is improved.
Drawings
FIG. 1 is a flow chart of the operation of the present invention.
Detailed Description
The following further illustrates an embodiment of the invention according to fig. 1:
referring to fig. 1, a method for fast rendering table data based on scroll bar positioning includes the following steps:
step 1: calculating the height of the total data in the table required to be occupied according to the total data number in the table and the height of one piece of data in the table:
H = N * h；
n is the total data number in the table, H is the height of one piece of data in the table, H is the height of the total data needing to be occupied in the table, and the height H of the total data needing to be occupied in the table is set as the occupied height of a vertical scroll bar in the table;
step 2: and calculating the index of the data on the same horizontal line with the top end of the vertical scroll bar in the total data according to the height of the vertical scroll bar from the top end of the table:
I = X / h；
wherein, X is the height of the vertical scroll bar from the top of the table, and I is the index of the data on the same horizontal line with the top of the vertical scroll bar in the total data;
and step 3: setting the number of data blocks to be cached in the table by taking the number of data displayed on a display page of the current table as one data block;
and 4, step 4: calculating the number of data blocks which are not displayed and need to be cached and are positioned above the current table display page and the number of data blocks which are not displayed and need to be cached and are positioned below the current table display page by taking the current table display page as a central block according to the number of the data blocks which need to be cached in the table:
p = (P – 1) / 2；
wherein P is the number of data blocks which need to be cached in the table, and P is the number of data blocks which need to be cached and are not displayed above the display page of the current table or the number of data blocks which need to be cached and are not displayed below the display page of the current table;
and 5: calculating the starting index and the ending index of all cache data pieces needing to be rendered by the current table:
s = I-p V, S = 0 when S is less than 0;
e = I + (p +1) × V-1, S = N when S is greater than N;
v is the number of data displayed on the display page of the current table, i.e., the number of data displayed in the visible part, S is the start index of the number of all cached data to be rendered in the current table, i.e., the start index of the 1 st data in the total data in the number of data blocks P to be cached in the table, and E is the end index of the number of all cached data to be rendered in the current table, i.e., the end index of the last 1 data in the number of data blocks P to be cached in the table;
step 6: the data of the S-th to E-th bars are rendered in the table.
The number of the data blocks needing to be cached in the set table is odd.
According to the method, after the number P of the data blocks needing to be cached (namely the number of the cached data blocks) is reasonably set according to the number V of the data displayed on one page of the table (the number of the data displayed on the current table display page), the method can effectively improve the rendering speed of the table, and can finish the primary rendering of the table within 500-700 milliseconds (the total number of the data is 1000, the time consumed for returning the data is 200-400 milliseconds; the visible part of the table displays V =10 data, and the data is cached P = 5). And when the user operates the vertical scroll bar to browse the data in any area of the table, the data in the browsing area designated by the user can be rendered and displayed in the same extremely short time.
The scope of the present invention includes, but is not limited to, the above embodiments, and the present invention is defined by the appended claims, and any alterations, modifications, and improvements that may occur to those skilled in the art are all within the scope of the present invention.
Claims (2)
1. A method for rapidly rendering table data based on scroll bar positioning is characterized in that: the method comprises the following steps:
step 1: calculating the height of the total data in the table required to be occupied according to the total data number in the table and the height of one piece of data in the table:
H＝N*h；
n is the total data number in the table, H is the height of one piece of data in the table, H is the height of the total data needing to be occupied in the table, and the height H of the total data needing to be occupied in the table is set as the occupied height of a vertical scroll bar in the table;
step 2: and calculating the index of the data on the same horizontal line with the top end of the vertical scroll bar in the total data according to the height of the vertical scroll bar from the top end of the table:
I＝X/h；
wherein, X is the height of the vertical scroll bar from the top of the table, and I is the index of the data on the same horizontal line with the top of the vertical scroll bar in the total data;
and step 3: setting the number of data blocks to be cached in the table by taking the number of data displayed on a display page of the current table as one data block;
and 4, step 4: calculating the number of data blocks which are not displayed and need to be cached and are positioned above the current table display page and the number of data blocks which are not displayed and need to be cached and are positioned below the current table display page by taking the current table display page as a central block according to the number of the data blocks which need to be cached in the table:
p＝(P–1)/2；
wherein P is the number of data blocks which need to be cached in the table, and P is the number of data blocks which need to be cached and are not displayed above the display page of the current table or the number of data blocks which need to be cached and are not displayed below the display page of the current table;
and 5: calculating the starting index and the ending index of all cache data pieces needing to be rendered by the current table:
when S is less than 0, S is 0;
e ═ I + (p +1) × V-1, when E is greater than N, E ═ N;
v is the number of data displayed on a display page of the current table, S is a starting index of the number of all cache data to be rendered by the current table, and E is an ending index of the number of all cache data to be rendered by the current table;
step 6: the data of the S-th to E-th bars are rendered in the table.
2. The method for rapid rendering of tabular data based on scrollbar positioning of claim 1, wherein: the number of the data blocks needing to be cached in the set table is odd.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711286609.XA CN108197153B (en) | 2017-12-07 | 2017-12-07 | Method for rapidly rendering table data based on scroll bar positioning |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711286609.XA CN108197153B (en) | 2017-12-07 | 2017-12-07 | Method for rapidly rendering table data based on scroll bar positioning |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108197153A CN108197153A (en) | 2018-06-22 |
| CN108197153B true CN108197153B (en) | 2022-03-25 |
Family
ID=62573606
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711286609.XA Active CN108197153B (en) | 2017-12-07 | 2017-12-07 | Method for rapidly rendering table data based on scroll bar positioning |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108197153B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108959206A (en) * | 2018-07-02 | 2018-12-07 | 浪潮软件股份有限公司 | A kind of method and system of the optimization front end Vue form component rendering performance |
| CN109325211A (en) * | 2018-08-07 | 2019-02-12 | 信利半导体有限公司 | A kind of EXCEL display methods |
| CN109992702B (en) * | 2019-03-20 | 2021-05-18 | 奇安信科技集团股份有限公司 | Data visualization method and device and electronic equipment |
| CN113343144A (en) * | 2021-05-31 | 2021-09-03 | 北京达佳互联信息技术有限公司 | Data display method, device and equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164401A (en) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | Page tabular display method |
| CN103218197A (en) * | 2013-04-26 | 2013-07-24 | 安科智慧城市技术（中国）有限公司 | Method, device and system of displaying data dynamically |
| CN105354256A (en) * | 2015-10-22 | 2016-02-24 | 浪潮电子信息产业股份有限公司 | Data pagination query method and apparatus |
-
2017
- 2017-12-07 CN CN201711286609.XA patent/CN108197153B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103164401A (en) * | 2011-12-08 | 2013-06-19 | 航天信息软件技术有限公司 | Page tabular display method |
| CN103218197A (en) * | 2013-04-26 | 2013-07-24 | 安科智慧城市技术（中国）有限公司 | Method, device and system of displaying data dynamically |
| CN105354256A (en) * | 2015-10-22 | 2016-02-24 | 浪潮电子信息产业股份有限公司 | Data pagination query method and apparatus |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108197153A (en) | 2018-06-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108197153B (en) | Method for rapidly rendering table data based on scroll bar positioning | |
| US20180052943A1 (en) | Systems and methods for controlling webpage pre-rendering | |
| CN111381823B (en) | Web end long list rendering method | |
| TWI661354B (en) | Method and device for displaying information | |
| CN104268221A (en) | Page turning method and page turning system based on Ios system WebView | |
| CN107807764B (en) | Page display method and client | |
| EP2525294A1 (en) | Method and device for rendering user interface font | |
| CA2922060C (en) | Swipe toolbar to switch tabs | |
| CN101751223A (en) | Method and device for displaying dynamic data of webpage form | |
| WO2016015527A1 (en) | Webpage update method and apparatus based on synthetic rendering acceleration | |
| CN106055264A (en) | Information display method and display device | |
| CN105160020A (en) | Webpage rendering method | |
| WO2022083326A1 (en) | Method and apparatus for displaying scroll bar, and electronic device and readable storage medium | |
| CN102509536A (en) | Refresh control method and system for electronic ink screen | |
| CN107544952B (en) | Report generation method and device, storage medium and computer equipment | |
| AU2016205616A1 (en) | Method of displaying content and electronic device implementing same | |
| CN113434138A (en) | Information display method and device and electronic equipment | |
| CN103543919B (en) | A kind of webpage content display changing method and device | |
| CN104932795A (en) | Information exhibiting method and device | |
| TWI451322B (en) | Method for generating webpage form on mobile device | |
| US20130132893A1 (en) | Method and apparatus for displaying data | |
| US20140300627A1 (en) | Method and apparatus indicating scroll position on a display | |
| EP3054388B1 (en) | Apparatus and method for processing animation | |
| CN109885227A (en) | Content display method, display terminal and computer storage medium | |
| WO2013026326A1 (en) | Method and terminal for implementing cache display |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |