CN115098006A - 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 - Google Patents

一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 Download PDF

Info

Publication number
CN115098006A
CN115098006A CN202210742147.2A CN202210742147A CN115098006A CN 115098006 A CN115098006 A CN 115098006A CN 202210742147 A CN202210742147 A CN 202210742147A CN 115098006 A CN115098006 A CN 115098006A
Authority
CN
China
Prior art keywords
data
height
vue
rolling
viewport
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
Application number
CN202210742147.2A
Other languages
English (en)
Inventor
宋祥正
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
XCMG Hanyun Technologies Co Ltd
Original Assignee
XCMG Hanyun Technologies Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by XCMG Hanyun Technologies Co Ltd filed Critical XCMG Hanyun Technologies Co Ltd
Priority to CN202210742147.2A priority Critical patent/CN115098006A/zh
Publication of CN115098006A publication Critical patent/CN115098006A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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
    • 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/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computing Systems (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

本发明提供一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置，方法包括：利用“假滚动”事件：创建内外两个div元素，一个作为视口用于查看数据，一个用来“撑开”长度模拟元素整体的滑动；通过监听鼠标滑动位置信息来确定需要截取的数据区间段；最后根据Css的绝对定位属性来将数据定位在视口的特定位置，从而达到和真实滚动一样的效果。本发明通过减少前端渲染和计算的前提下，利用Vue的双向绑定特性，以数据驱动页面，减少了大量数据渲染的卡顿和等待时间，节省了内存，优化了性能。

Description

一种基于Vue针对滚动大量元素节省内存的性能优化方法及 装置
技术领域
本发明涉及一种基于Vue针对滚动大量元素节省内存的性能优化方法，属于大数据技术领域。
背景技术
Vue作为近年来大火的前端框架，以其优雅而简洁的语法、代码的可持续高、成熟的组件化开发赢得了市场上青睐，成为和Angular、React比肩的三大前端框架之一。Vue和其他框架相比，被设计成自底层向上逐层应用，在结构、样式、语法方面更符合编程人员的习惯，双向绑定语法更是比React的render函数更便捷、优雅。Vue实现双向绑定原理主要是利用了Object.defineProperty()方法重新定义了里面的获取对方属性的值get方法和设置属性值的set方法，通过实现数据劫持通知订阅者，订阅者就会触发update方法，对视图进行更新。
目前主流的搭配Vue的前端框架以element-ui为例，其中对于表类型数据展示和加载用的是el-table其中的el-table组件，对数据的加载通常采用分页，将数据分批展示。此外在使用下拉框、信息流这种并行的数据展示的也会碰到有加载大量选项的情景。
el-table在展示大量数据的时候，如果采用前端分页，由于需要渲染大量虚拟Dom和真实Dom，所以会出现卡顿和空白等现象，影响用户体验；如果采取后端分页，频繁地申请后端接口，对服务器也会产生一定的负担。
而信息流数据一般是在移动端应用比较多，解决方案通常采用上拉加载和下拉刷新等，同样会产生大量Dom元素，长时间滚动也会产生卡顿。表类数据还可以用分页，而对于下拉框的数据，在展示的很难采用分页这种形式，本地测试1万条选项的下拉框数据，有非常明显的卡顿，打开下拉选项大概前后需要2s以上的时间。打开任务管理器，发现内存已经占到了百分之七十多，非常消耗内存和性能，进而影响用户体验。
发明内容
本发明的目的在于克服现有技术中的不足，提供一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置，能够节省内存，针对滚动大量元素提高性能。
为达到上述目的，本发明是采用下述技术方案实现的：
第一方面，本发明提供了一种基于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元素所在的位置高度。
进一步的，根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列，包括：
通过滚动的距离除以每条数据的高度向上取整，得到需要截取的数据区间的首个下标值startIndex；
利用vue中的computed属性返回计算的数组序列，从所述下标值startIndex开始选取，根据首个下标值startIndex和需要截取数据的数量，利用数组的slice方法将数据拆分成数组序列。
进一步的，根据CSS中的绝对定位，将数据实时的定位到应有的位置的方法包括：
利用vue的双向绑定条件，先设定视口的Div的定位属性为relative，再给展示数据的父级Div上添加绝对定位属性absolute，通过属性top值将数据不断定位到计算新的位置，从而达到“假滚动”的效果。
第二方面，本发明提供一种基于Vue针对滚动大量元素节省内存的性能优化装置，包括：
构建模块：用于搭建Vue框架，并在Vue框架部署@scroll方法、computed和data属性组件；
输入模块：用于获得待显示的数据；
视口创建模块：用于创建视口，并定义视口的高度和每条数据的高度；
数据数量模块：用于根据定义的视口的高度和每条数据的高度，用视口高度除以每条数据的高度取整再加上两条数据得出得出需要截取数据的数量；
位置高度模块：用于获取鼠标滑动的信息，并根据所述鼠标滑动的信息计算出Dom元素所在的位置高度；
数组计算模块：用于根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列；
赋值模块：用于利用vue中的computed属性返回计算的数组序列，数据变化驱动，计算切分待显示数据，赋值在vue的data属性里面的变量，驱动数据和页面变化；
滚动模块：用于根据CSS中的绝对定位，将数据实时定位到应有的位置，从而达到加载滚动的效果。
第三方面，本发明还提供了一种基于Vue针对滚动大量元素节省内存的性能优化装置，包括处理器及存储介质；
所述存储介质用于存储指令；
所述处理器用于根据所述指令进行操作以执行第一方面所述方法的步骤。
与现有技术相比，本发明所达到的有益效果：
本发明首先在created周期中模拟数据循环创建一万条测试数据，将传统的列表拆分成类似分页的小数据组，滑动鼠标或者拖动滚动滑块并不会影响真实的滑动，只是记录当前滑动的位置信息，再根据滑动的信息位置，计算出需要的数据区间的下标值，根据Vue中的计算属性，实时截取出需要展示的数据，最后根据CSS中的绝对定位，将数据实时的定位到应有的位置，从而达到全部加载滚动的效果。
本发明将大量数据的展示简化了Dom的生成与加载，在保证和实际的滚动效果一致的前提下，既避免了前端分页的数据一起加载的缓慢和卡顿，又避免频繁请求后端接口从而增加服务器压力的问题，达到节省内存的目的，实现性能优化。
附图说明
图1是本发明操作流程图；
图2是使用el-table的性能图；
图3是使用本发明之后的性能图。
具体实施方式
下面结合附图对本发明作进一步描述。以下实施例仅用于更加清楚地说明本发明的技术方案，而不能以此来限制本发明的保护范围。
相关术语解释：
(1)Vue：Vue是一套用于构建用户界面的前端渐进式框架，Vue的核心只关心图层，不仅易于上手，而且便于和第三方库进行整合，此外，Vue还能为复杂的单页面应用提供驱动。
(2)Dom：文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
(3)视口：视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”。
实施例一：
本实施例提供一种基于Vue针对滚动大量元素节省内存的性能优化方法，包括以下步骤：
步骤1：本实施例中为了方便测试，从本地For循环生成包括序号、姓名、日期、操作列的一万条“假数据”，push到需要渲染而定义的数组中。
程序实现如下：
Figure BDA0003718468330000061
步骤2：根据定义的视口的高度和每条数据的高度(这里定义视口高度为300px，数据高度为40px)，用视口高度/每条数据的高度再加上2(防止数据衔接不上，多加两条数据)得出需要截取数据的数量；
步骤3：监听鼠标滑动的信息，根据滚动的距离，估算出这个滚动位置对应的数组序列，例如滚动100px，每条40px，对应第3条，向上取整赋值给变量startIndex(初始值为0)；这是浏览器自带的@scroll方法，绑定对应的DOM元素之后，监听鼠标滑动事件，通过vue自带的this.$refs返回DOM元素的鼠标滑动信息(包括当前鼠标所处的高度)，通过这个高度除以每条数据的高度，推算出需要截取的数据区间的第一个下标
数组序列的获取方法是：
根据鼠标滑动的信息，通过vue自带的this.$refs属性方法获取“假滚动”的Dom元素所在的位置高度，除以当前设定的每个数据高度值再向上取整，来计算出需要截取数组方法需要的的首个下标值startIndex；所述DOM元素通过vue自带的this.$refs属性方法识别绑定在特定元素标签上ref值获取；
采用js的自带的api——slice方法，这个slice方法需要的输入参数就是需要截取的数据的序号下角标startIndex，从标号为startIndex的数据才开始截取前面计算得到的需要截取数据的数量的数据，得到数组序列；比如鼠标滑动了200px，定义的显示每条数据的高度是40px，200/40，startIndex就是第五条，从第五条开始截取，如果不是整数就向上取整。
步骤4：获取到第一个下标startIndex，通过vue自带的computed计算属性返回计算——将步骤1中造的一万条假数据，分割成对应的数据组，赋值给对应的变量进行显示。
vue中，所有的数据都需要变量来储存，“变量”是计算机上一个名词，就是“盛放”数据得“容器”这里的变量主要是指vue中data定义的变量类型，用于数据驱动，这里的变量主要是指vue中data定义的变量类型，用于数据驱动。所有的数据驱动都需要定义在data中，定义在computed的方法也是需要返回值的，返回值就可以看做是data中的定义的变量，这些加起来才能驱动页面的变化
程序实现如下：
Figure BDA0003718468330000081
步骤5：根据CSS中的绝对定位，将数据实时的定位到应有的位置，从而达到全部加载滚动的效果。
具体来说，包括以下步骤：
1)创建视口容器
创建一个外层Div作为视口(本发明用高度为300px)，内层嵌套一个子Div，以传入数据的数组的长度乘以固定合适的高度(本发明用的固定高度一条数据高度为40px)，得出子Div的高度，用来“撑起”内层的高度，在绘制一个同级的子Div用来存放通过滚动计算位置得到分割出来的部分数据，用于展示当前的数据。
程序实现如下：
Figure BDA0003718468330000091
2)计算位置数据
通过绑定的@scroll方法，监听当前滑动的位置，通过this.$refs属性方法获取“假滚动”的Dom元素所在的位置高度，除以当前设定的每个数据高度值再向上取整，来计算出需要截取数组方法需要的的首个下标值。程序实现如下：
Figure BDA0003718468330000101
利用vue中的computed属性返回计算的数组序列，从上面得出的startIndex下标值开始选取，到从startIndex开始往下加上视口高度除以每条数据的长度，然后再多加两条(以防滑动到数据中间位置，上下有空缺)，利用数组的slice方法将数据拆分成一个一个组，类似于达到前端分页的效果，但是只用渲染相同的且有限的部分Dom。
程序实现如下：
Figure BDA0003718468330000102
3)定位数据
利用vue的双向绑定条件，先设定视口的Div的定位属性为relative，再给展示数据的父级Div上添加绝对定位属性absolute，通过属性top值将数据不断定位到计算新的位置，从而达到“假滚动”的效果。
程序实现如下：
Figure BDA0003718468330000111
本发明首先在created周期中模拟数据循环创建一万条测试数据，将传统的列表拆分成类似分页的小数据组，滑动鼠标或者拖动滚动滑块并不会影响真实的滑动，只是记录当前滑动的位置信息，再根据滑动的信息位置，计算出需要的数据区间的下标值，根据Vue中的计算属性，实时截取出需要展示的数据，最后根据CSS中的绝对定位，将数据实时的定位到应有的位置，从而达到全部加载滚动的效果。
本发明将大量数据的展示简化了Dom的生成与加载，在保证和实际的滚动效果一致的前提下，既避免了前端分页的数据一起加载的缓慢和卡顿，又避免频繁请求后端接口从而增加服务器压力的问题，达到节省内存的目的，实现性能优化。
实施例二：
本实施例提供一种基于Vue针对滚动大量元素节省内存的性能优化装置，包括：
构建模块：用于搭建Vue框架，并在Vue框架部署@scroll、computed和data属性组件；
输入模块：用于获得待显示的数据；
视口创建模块：用于创建视口，并定义视口的高度和每条数据的高度；
数据数量模块：用于根据定义的视口的高度和每条数据的高度，用视口高度除以每条数据的高度取整再加上两条数据得出得出需要截取数据的数量；
位置高度模块：用于获取鼠标滑动的信息，并根据所述鼠标滑动的信息计算出Dom元素所在的位置高度；
数组计算模块：用于根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列；
赋值模块：用于利用vue中的computed属性返回计算的数组序列，数据变化驱动，计算切分待显示数据，赋值在vue的data属性里面的变量，驱动数据和页面变化；
滚动模块：用于根据CSS中的绝对定位，将数据实时定位到应有的位置，从而达到加载滚动的效果。
本实施例的装置可用于实现实施例一所述的方法。
实施例三：
本实施例提供了一种基于Vue针对滚动大量元素节省内存的性能优化装置，包括处理器及存储介质；
所述存储介质用于存储指令；
所述处理器用于根据所述指令进行操作以执行实施例一所述方法的步骤。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变形，这些改进和变形也应视为本发明的保护范围。

Claims (7)

1.一种基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，包括以下步骤：
S1：获得待显示的数据；
S2：创建视口，并定义视口的高度和每条数据的高度；
S3：根据定义的视口的高度和每条数据的高度，用视口高度除以每条数据的高度取整再加上两条数据得出得出需要截取数据的数量；
S4：获取鼠标滑动的信息，并根据所述鼠标滑动的信息计算出Dom元素所在的位置高度；
S5：根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列；
S6：利用vue中的computed属性返回计算的数组序列，数据变化驱动，计算切分待显示数据，赋值在vue的data属性里面的变量，驱动数据和页面变化；
S7：根据CSS中的绝对定位，将数据实时定位到应有的位置，从而达到加载滚动的效果。
2.根据权利要求1所述的基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，创建视口的方法包括：
创建一个外层Div作为视口，内层嵌套一个子Div，以传入数据的数组的长度乘以固定的高度，得出子Div的高度；
绘制一个同级的子Div用来存放通过滚动计算位置得到分割出来的部分数据，用于展示当前的数据。
3.根据权利要求1所述的基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，根据所述鼠标滑动的信息计算出Dom元素所在的位置高度，包括：
通过vue的@scroll方法，绑定对应的DOM元素之后，监听鼠标滑动事件；所述DOM元素通过vue自带的this.$refs属性方法识别绑定在特定元素标签上ref值获取；
通过vue自带的this.$refs返回DOM元素的鼠标滑动信息，得到该Dom元素所在的位置高度。
4.根据权利要求1所述的基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列，包括：
通过滚动的距离除以每条数据的高度向上取整，得到需要截取的数据区间的首个下标值startIndex；
利用vue中的computed属性返回计算的数组序列，从所述下标值startIndex开始选取，根据首个下标值startIndex和需要截取数据的数量，利用数组的slice方法将数据拆分成数组序列。
5.根据权利要求1所述的基于Vue针对滚动大量元素节省内存的性能优化方法，其特征在于，根据CSS中的绝对定位，将数据实时的定位到应有的位置的方法包括：
利用vue的双向绑定条件，先设定视口的Div的定位属性为relative，再给展示数据的父级Div上添加绝对定位属性absolute，通过属性top值将数据不断定位到计算新的位置，从而达到“假滚动”的效果。
6.一种基于Vue针对滚动大量元素节省内存的性能优化装置，其特征在于，包括：
构建模块：用于搭建Vue框架，并在Vue框架部署@scroll、computed和data属性组件；
输入模块：用于获得待显示的数据；
视口创建模块：用于创建视口，并定义视口的高度和每条数据的高度；
数据数量模块：用于根据定义的视口的高度和每条数据的高度，用视口高度除以每条数据的高度取整再加上两条数据得出得出需要截取数据的数量；
位置高度模块：用于获取鼠标滑动的信息，并根据所述鼠标滑动的信息计算出Dom元素所在的位置高度；
数组计算模块：用于根据需要截取数据的数量、Dom元素所在的位置高度和每条数据的高度，计算得到该滚动的距离对应的数组序列；
赋值模块：用于利用vue中的computed属性返回计算的数组序列，数据变化驱动，计算切分待显示数据，赋值在vue的data属性里面的变量，驱动数据和页面变化；
滚动模块：用于根据CSS中的绝对定位，将数据实时定位到应有的位置，从而达到加载滚动的效果。
7.一种基于Vue针对滚动大量元素节省内存的性能优化装置，其特征在于，包括处理器及存储介质；
所述存储介质用于存储指令；
所述处理器用于根据所述指令进行操作以执行第一方面所述方法的步骤。
CN202210742147.2A 2022-06-28 2022-06-28 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置 Pending CN115098006A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210742147.2A CN115098006A (zh) 2022-06-28 2022-06-28 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210742147.2A CN115098006A (zh) 2022-06-28 2022-06-28 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置

Publications (1)

Publication Number Publication Date
CN115098006A true CN115098006A (zh) 2022-09-23

Family

ID=83294894

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210742147.2A Pending CN115098006A (zh) 2022-06-28 2022-06-28 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置

Country Status (1)

Country Link
CN (1) CN115098006A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116578299A (zh) * 2023-07-12 2023-08-11 成都数默科技有限公司 一种基于AngularJS框架的大数据列表实现方法

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180101295A1 (en) * 2016-10-11 2018-04-12 Salesforce.Com, Inc. System for displaying elements of a scrollable list
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法
CN112684960A (zh) * 2020-12-29 2021-04-20 平安普惠企业管理有限公司 前端列表滚动方法、装置、计算机设备及存储介质
CN113535294A (zh) * 2021-06-08 2021-10-22 摩尔元数（厦门）科技有限公司 一种h5列表的渲染加速方法、装置、设备和介质
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114237763A (zh) * 2021-12-23 2022-03-25 建信金融科技有限责任公司 提高组件首次加载速度的方法、装置、设备、介质及产品
CN114510190A (zh) * 2022-04-18 2022-05-17 苏州万店掌网络科技有限公司 一种前端页面渲染方法、装置、设备及存储介质

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20180101295A1 (en) * 2016-10-11 2018-04-12 Salesforce.Com, Inc. System for displaying elements of a scrollable list
CN108959206A (zh) * 2018-07-02 2018-12-07 浪潮软件股份有限公司 一种优化Vue前端表格组件渲染性能的方法及系统
CN110134308A (zh) * 2019-05-17 2019-08-16 深圳前海微众银行股份有限公司 数据展示方法、装置、设备及计算机可读存储介质
CN111381823A (zh) * 2020-03-11 2020-07-07 四川长虹电器股份有限公司 Web端长列表渲染方法
CN112684960A (zh) * 2020-12-29 2021-04-20 平安普惠企业管理有限公司 前端列表滚动方法、装置、计算机设备及存储介质
CN113535294A (zh) * 2021-06-08 2021-10-22 摩尔元数（厦门）科技有限公司 一种h5列表的渲染加速方法、装置、设备和介质
CN113672320A (zh) * 2021-07-19 2021-11-19 杭州未名信科科技有限公司 一种基于dom元素渲染网页的方法、设备及存储介质
CN114237763A (zh) * 2021-12-23 2022-03-25 建信金融科技有限责任公司 提高组件首次加载速度的方法、装置、设备、介质及产品
CN114510190A (zh) * 2022-04-18 2022-05-17 苏州万店掌网络科技有限公司 一种前端页面渲染方法、装置、设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116578299A (zh) * 2023-07-12 2023-08-11 成都数默科技有限公司 一种基于AngularJS框架的大数据列表实现方法
CN116578299B (zh) * 2023-07-12 2023-09-08 成都数默科技有限公司 一种基于AngularJS框架的大数据列表实现方法

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
CN111259303B (zh) 一种web信息系统前端页面自动生成的系统及其方法
US8887087B2 (en) Column layout
US20080307308A1 (en) Creating Web Clips
US8640022B2 (en) Integration of spreadsheet objects on web page
US7752536B2 (en) Designating, setting and discovering parameters for spreadsheet documents
US6694485B1 (en) Enhanced viewing of hypertext markup language file
US8938672B2 (en) Amending the display property of grid elements
US9171098B2 (en) Decomposing markup language elements for animation
US9658672B2 (en) Business object representations and detail boxes display
EP4033438A1 (en) Video generation method and device, and terminal and storage medium
CN115098006A (zh) 一种基于Vue针对滚动大量元素节省内存的性能优化方法及装置
CN108089858B (zh) 一种创建可视化界面的方法及装置
US20140208246A1 (en) Supporting user interactions with rendered graphical objects
CN106294301A (zh) 报表生成方法和装置
CN113190321A (zh) 一种用于应用程序页面上拉刷新的方法及设备
CN111539186A (zh) 一种应用于html5的大数据树组件实现方法及系统
CN113297830B (zh) 表格数据处理方法、装置、电子设备和存储介质
CN115170695A (zh) 图表图片的生成方法、装置、电子设备和存储介质
US10115219B2 (en) Grid and table animations to provide context during sort operations
CN113297313A (zh) 表格数据展示方法、装置、电子设备及存储介质
CN110704529A (zh) 基于LiveChart实现可交互带缩略图时间轴的方法
Göring Designing a Library to Create Animated Sequences Using D3. js
CN112445401B (zh) 文档滑动处理方法、装置及服务器
CN117520691B (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