龙图腾网&IPTOP
- 微信扫码登录
- 账号密码登录
- 短信登录/注册
买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！
申请/专利权人：徐工汉云技术股份有限公司
摘要：本发明提供一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置，方法包括：利用“假滚动”事件：创建内外两个div元素，一个作为视口用于查看数据，一个用来“撑开”长度模拟元素整体的滑动；通过监听鼠标滑动位置信息来确定需要截取的数据区间段；最后根据Css的绝对定位属性来将数据定位在视口的特定位置，从而达到和真实滚动一样的效果。本发明通过减少前端渲染和计算的前提下，利用Vue的双向绑定特性，以数据驱动页面，减少了大量数据渲染的卡顿和等待时间，节省了内存，优化了性能。
主权项：1.一种基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，包括以下步骤：S1：获得待显示的数据；S2：创建视口，并定义视口的高度和每条数据的高度；S3：根据定义的视口的高度和每条数据的高度，用视口高度除以每条数据的高度取整再加上两条数据得出得出需要截取数据的数量；S4：获取鼠标滑动的信息，并根据所述鼠标滑动的信息计算出Dom元素所在的位置高度；S5：根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列；S6：利用vue中的computed属性返回计算的数组序列，数据变化驱动，计算切分待显示数据，赋值在vue的data属性里面的变量，驱动数据和页面变化；S7：根据CSS中的绝对定位，将数据实时定位到应有的位置，从而达到加载滚动的效果；创建视口的方法包括：创建一个外层Div作为视口，内层嵌套一个子Div，以传入数据的数组的长度乘以固定的高度，得出子Div的高度；绘制一个同级的子Div用来存放通过滚动计算位置得到分割出来的部分数据，用于展示当前的数据；根据所述鼠标滑动的信息计算出Dom元素所在的位置高度，包括：通过vue的@scroll方法，绑定对应的DOM元素之后，监听鼠标滑动事件；所述DOM元素通过vue自带的this.$refs属性方法识别绑定在特定元素标签上ref值获取；通过vue自带的this.$refs返回DOM元素的鼠标滑动信息，得到该Dom元素所在的位置高度。
全文数据：
权利要求：
百度查询： 徐工汉云技术股份有限公司 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置
免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。
主营中国专利交易买卖与专利转让许可,高校科技成果推广与科技成果转化,知识产权运营管理与平台开发,科技人才专家库与科技猎头等科技服务
开放平台
担保交易
惠及多方
会员特惠
专属平台
适合多方
数据共享
功能齐全
皖公网安备 34010402703815号