CN108959206A - 一种优化Vue前端表格组件渲染性能的方法及*** - Google Patents
一种优化Vue前端表格组件渲染性能的方法及*** Download PDFInfo
- Publication number
- CN108959206A CN108959206A CN201810707299.2A CN201810707299A CN108959206A CN 108959206 A CN108959206 A CN 108959206A CN 201810707299 A CN201810707299 A CN 201810707299A CN 108959206 A CN108959206 A CN 108959206A
- Authority
- CN
- China
- Prior art keywords
- scroll bar
- vue
- form component
- height
- rendering
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种优化Vue前端表格组件渲染性能的方法及***，其实现过程为：首先配置一纵向滚动条，该滚动条高度与Vue前端表格总高度相同；滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。本发明的一种优化Vue前端表格组件渲染性能的方法及***与现有技术相比，只渲染表格在浏览器能看到的部分，节约了渲染大量DOM的时间和内存，能够有效的在不适合分页的情形下展示大数据量表格。
Description
技术领域
本发明涉及计算机应用技术领域，具体地说是一种优化Vue前端表格组件渲染性能的方法及***。
背景技术
当前Vue前端表格组件采用模板渲染数据列表，其实现原理是有一行数据就渲染一行dom元素，这样对于大数据量的表格，就会由于dom元素过多导致页面占用内存，导致页面卡顿，降低了用户体验。某些开源的框架采用分页的方式解决这个性能问题，但是在分页不适用的业务场景下，应用就会遇到性能瓶颈。
基于此，亟需一种应用性能理想、通过前端技术优化Vue大数据的表格的前端渲染性能的技术。
发明内容
本发明的技术任务是针对以上不足之处，提供一种实用性强、优化Vue前端表格组件渲染性能的方法及***。
一种优化Vue前端表格组件渲染性能的方法，其实现过程为：
一、首先配置一纵向滚动条，该滚动条高度与Vue前端表格总高度相同；
二、滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。
所述步骤一中，配置纵向滚动条的具体过程为：
通过数据量与表格行高计算出表格总的高度，然后根据这个高度渲染出一个纵向滚动条放在表格左侧或右侧，该纵向滚动条的顶部、底部均与Vue前端表格顶部、底部相平齐。
所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrollTop和表格高度进行计算得出的，所述scrollTop是指某个可滚动区块向下滚动的距离。
所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。
还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。
一种优化Vue前端表格组件渲染性能的***，包括，
滚动模块，以滚动条的形式配置在Vue前端表格一侧，且其高度与Vue前端表格总高度相同；
计算模块，用于在滚动条滚动时，计算出需要渲染的数据条目；
渲染模块，根据计算模块计算的结果，对待渲染数据条目进行渲染。
所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与Vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。
所述计算模块根据滚动条scrollTop和表格高度进行计算得出需要渲染的数据条目，所述scrollTop是指某个可滚动区块向下滚动的距离。
所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。
所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。
本发明的一种优化Vue前端表格组件渲染性能的方法及***和现有技术相比，具有以下有益效果：
本发明的一种优化Vue前端表格组件渲染性能的方法及***，通过前端技术优化Vue大数据的表格的前端渲染性能，适用于PC，移动APP等展现表格的场景，解决大数据量情况下，Vue表格组件的渲染性能问题，可以有效得提升应用性能，可以有效的减少表格渲染卡顿时间，保证页面能正常展现和使用，实用性更好，适用范围广泛，具有很好的推广应用价值。
附图说明
为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图1为本发明方法的实现示意图。
附图2为本发明***的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明的方案，下面结合具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
如附图1、图2所示，一种优化Vue前端表格组件渲染性能的方法，其实现过程为：
一、首先配置一纵向滚动条，该滚动条高度与Vue前端表格总高度相同；
二、滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。
所述步骤一中，配置纵向滚动条的具体过程为：
通过数据量与表格行高计算出表格总的高度，然后根据这个高度渲染出一个纵向滚动条放在表格左侧或右侧，该纵向滚动条的顶部、底部均与Vue前端表格顶部、底部相平齐。
所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrollTop和表格高度进行计算得出的，所述scrollTop是指某个可滚动区块向下滚动的距离。
所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。
还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。
基于上述方法，实践如下：原Vue表格组件在联想T470，Chrome 66.0.3359.181版本下，在行数300，列数70情形下，卡顿现象非常明显，通过该方案改造后，卡顿现象不再出现。理论上展现的数据量只受浏览器可用内存大小限制。
一种优化Vue前端表格组件渲染性能的***，包括，
滚动模块，以滚动条的形式配置在Vue前端表格一侧，且其高度与Vue前端表格总高度相同；
计算模块，用于在滚动条滚动时，计算出需要渲染的数据条目；
渲染模块，根据计算模块计算的结果，对待渲染数据条目进行渲染。
所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与Vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。
所述计算模块根据滚动条scrollTop和表格高度进行计算得出需要渲染的数据条目，所述scrollTop是指某个可滚动区块向下滚动的距离。
所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。
所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。
与现有技术相比，本发明只渲染表格在浏览器能看到的部分，节约了渲染大量DOM的时间和内存，能够有效的在不适合分页的情形下展示大数据量表格。
通过上面具体实施方式，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的具体实施方式。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。
除说明书所述的技术特征外，均为本专业技术人员的已知技术。
Claims (10)
1.一种优化Vue前端表格组件渲染性能的方法，其特征在于，其实现过程为：
一、首先配置一纵向滚动条，该滚动条高度与Vue前端表格总高度相同；
二、滚动纵向滚动条，根据滚动高度计算当前需要渲染的数据条目并渲染。
2.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤一中，配置纵向滚动条的具体过程为：
通过数据量与表格行高计算出表格总的高度，然后根据这个高度渲染出一个纵向滚动条放在表格左侧或右侧，该纵向滚动条的顶部、底部均与Vue前端表格顶部、底部相平齐。
3.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤二中的计算当前需要渲染的数据条目根据滚动条scrollTop和表格高度进行计算得出的，所述scrollTop是指某个可滚动区块向下滚动的距离。
4.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，所述步骤二中，根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置，且渲染的表格为在浏览器中能看到的部分。
5.根据权利要求1所述的一种优化Vue前端表格组件渲染性能的方法，其特征在于，还包括步骤三：当滚动表格的时候，重置纵向滚动条的位置，使得下一次纵向滚动条滚动时是从表格当前位置开始计算。
6.一种优化Vue前端表格组件渲染性能的***，其特征在于，包括，
滚动模块，以滚动条的形式配置在Vue前端表格一侧，且其高度与Vue前端表格总高度相同；
计算模块，用于在滚动条滚动时，计算出需要渲染的数据条目；
渲染模块，根据计算模块计算的结果，对待渲染数据条目进行渲染。
7.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的***，其特征在于，所述滚动模块提供的滚动条为纵向滚动条，且其顶部、底部均与Vue前端表格顶部、底部相平齐，并放置在表格左侧或右侧。
8.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的***，其特征在于，所述计算模块根据滚动条scrollTop和表格高度进行计算得出需要渲染的数据条目，所述scrollTop是指某个可滚动区块向下滚动的距离。
9.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的***，其特征在于，所述计算模块中计算得到的数据条目，是指根据当前滚动条的高度，计算数据列表的开始索引和结束索引，开始索引为上次滚动结束的位置。
10.根据权利要求6所述的一种优化Vue前端表格组件渲染性能的***，其特征在于，所述渲染模块渲染的表格为在浏览器中能看到的、且为计算模块计算得出的数据条目。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810707299.2A CN108959206A (zh) | 2018-07-02 | 2018-07-02 | 一种优化Vue前端表格组件渲染性能的方法及*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810707299.2A CN108959206A (zh) | 2018-07-02 | 2018-07-02 | 一种优化Vue前端表格组件渲染性能的方法及*** |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108959206A true CN108959206A (zh) | 2018-12-07 |
Family
ID=64484933
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810707299.2A Pending CN108959206A (zh) | 2018-07-02 | 2018-07-02 | 一种优化Vue前端表格组件渲染性能的方法及*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108959206A (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109933321A (zh) * | 2019-01-17 | 2019-06-25 | 平安科技（深圳）有限公司 | 基于Vue框架的表格显示方法及装置、存储介质 |
| CN110032694A (zh) * | 2019-03-04 | 2019-07-19 | 北京立思辰安科技术有限公司 | 适用于流量审计的通用表格控件实现方法 |
| CN110244993A (zh) * | 2018-12-25 | 2019-09-17 | 蔚来汽车有限公司 | 前端页面加载方法、装置、控制器及介质 |
| CN111626031A (zh) * | 2020-06-02 | 2020-09-04 | 浪潮软件股份有限公司 | 一种大数据前端表格组件的实现方法 |
| CN111796808A (zh) * | 2020-05-27 | 2020-10-20 | 福信富通科技股份有限公司 | 一种基于DAOTable通用列表组件的实现方法 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
| CN112068834A (zh) * | 2020-09-03 | 2020-12-11 | 杭州天宽科技有限公司 | 基于js的数据渲染方法及装置 |
| CN112182444A (zh) * | 2019-07-01 | 2021-01-05 | 上海宏路数据技术股份有限公司 | 数据渲染***、方法及电子设备 |
| CN113656716A (zh) * | 2021-08-02 | 2021-11-16 | 浪潮软件股份有限公司 | 一种不定高度的虚拟列表实现方法 |
| CN114154470A (zh) * | 2021-11-09 | 2022-03-08 | 广州市玄武无线科技股份有限公司 | 一种基于动态行高的表格处理方法 |
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
| CN106570142A (zh) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | 一种数据渲染方法和装置 |
| CN107704576A (zh) * | 2017-09-30 | 2018-02-16 | 厦门海迈科技股份有限公司 | 数据展示优化方法、装置、终端设备及存储介质 |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| CN108197153A (zh) * | 2017-12-07 | 2018-06-22 | 南京富士通南大软件技术有限公司 | 基于滚动条定位的快速渲染表格数据的方法 |
-
2018
- 2018-07-02 CN CN201810707299.2A patent/CN108959206A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| CN106570142A (zh) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | 一种数据渲染方法和装置 |
| CN107704576A (zh) * | 2017-09-30 | 2018-02-16 | 厦门海迈科技股份有限公司 | 数据展示优化方法、装置、终端设备及存储介质 |
| CN108197153A (zh) * | 2017-12-07 | 2018-06-22 | 南京富士通南大软件技术有限公司 | 基于滚动条定位的快速渲染表格数据的方法 |
Non-Patent Citations (1)
| Title |
|---|
| 李志刚: "DMap——实战Vue百万条数据渲染表格组件开发", 《HTTP://WWW.SOHU.COM/A/230264170_617676》 * |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110244993A (zh) * | 2018-12-25 | 2019-09-17 | 蔚来汽车有限公司 | 前端页面加载方法、装置、控制器及介质 |
| CN109933321A (zh) * | 2019-01-17 | 2019-06-25 | 平安科技（深圳）有限公司 | 基于Vue框架的表格显示方法及装置、存储介质 |
| CN110032694A (zh) * | 2019-03-04 | 2019-07-19 | 北京立思辰安科技术有限公司 | 适用于流量审计的通用表格控件实现方法 |
| CN112182444B (zh) * | 2019-07-01 | 2023-07-14 | 上海嗨普智能信息科技股份有限公司 | 数据渲染***、方法及电子设备 |
| CN112182444A (zh) * | 2019-07-01 | 2021-01-05 | 上海宏路数据技术股份有限公司 | 数据渲染***、方法及电子设备 |
| CN111796808A (zh) * | 2020-05-27 | 2020-10-20 | 福信富通科技股份有限公司 | 一种基于DAOTable通用列表组件的实现方法 |
| CN111626031A (zh) * | 2020-06-02 | 2020-09-04 | 浪潮软件股份有限公司 | 一种大数据前端表格组件的实现方法 |
| CN111626031B (zh) * | 2020-06-02 | 2023-08-08 | 浪潮软件股份有限公司 | 一种大数据前端表格组件的实现方法 |
| CN111931093A (zh) * | 2020-07-09 | 2020-11-13 | 北京皮尔布莱尼软件有限公司 | 一种页面中表格的展示方法及移动终端 |
| CN112068834A (zh) * | 2020-09-03 | 2020-12-11 | 杭州天宽科技有限公司 | 基于js的数据渲染方法及装置 |
| CN113656716A (zh) * | 2021-08-02 | 2021-11-16 | 浪潮软件股份有限公司 | 一种不定高度的虚拟列表实现方法 |
| CN114154470A (zh) * | 2021-11-09 | 2022-03-08 | 广州市玄武无线科技股份有限公司 | 一种基于动态行高的表格处理方法 |
| CN115098006A (zh) * | 2022-06-28 | 2022-09-23 | 徐工汉云技术股份有限公司 | 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108959206A (zh) | 一种优化Vue前端表格组件渲染性能的方法及*** | |
| CN104268221A (zh) | 基于Ios***WebView的翻页方法和翻页*** | |
| CN105160020B (zh) | 网页渲染的方法 | |
| DE202012005717U1 (de) | Zeichenerkennung für überlappende Benutzer-Texteingabe | |
| CN112182444B (zh) | 数据渲染***、方法及电子设备 | |
| CN203955884U (zh) | 一种用于折弯的冲压模具 | |
| CN105511761B (zh) | 页面内容的显示方法与装置 | |
| CN103389859B (zh) | 一种滚动网页页面的方法及装置 | |
| CN107038011A (zh) | 一种调整显示流畅度的方法及装置、移动终端 | |
| CN203955878U (zh) | 一种用于侧推的冲压模具 | |
| CN103677576A (zh) | 关闭窗口的方法及装置 | |
| CN104461424A (zh) | 一种在单元格中显示旋转字符串的***及方法 | |
| CN101986289B (zh) | 一种提高浏览器页面渲染速度的方法和装置 | |
| CN207337024U (zh) | 一种窄边框触控液晶屏 | |
| CN203591059U (zh) | 一种文件架 | |
| CN112214192A (zh) | 智能交互平板的操作方法、***、计算机设备及存储介质 | |
| CN104133636A (zh) | 一种单手控制触屏移动设备方法 | |
| CN105511772B (zh) | 通过手势操作触发触摸屏上按钮的方法、装置及移动终端 | |
| CN107340886B (zh) | 一种软键盘状态确定方法、装置、介质及终端 | |
| CN113297313B (zh) | 表格数据展示方法、装置、电子设备及存储介质 | |
| CN204332309U (zh) | 一种折叠推拉式展板 | |
| CN103399691A (zh) | 一种加载显示数据方法及装置 | |
| CN204087607U (zh) | 一种新型英语教学用展示板 | |
| CN105278820B (zh) | 显示方法和装置 | |
| CN207358031U (zh) | 一种自动夹紧校针装置 |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20181207 |