vue渲染大量数据如何优化_大数据量场景下的Vue性能优化
性能优化最常见的落脚点是在网络和dom上,但是在大数据量的场景下,由于Vue本身的特性,可能会造成js运行层面的性能问题,这篇文章讨论的就是针对这一部分的性能优化方案。
模拟一个大数据量的场景
// App.vue
It's {{ firstUser.name }}'s show time
let i = 0
while (i++ < 50000) {
user.push({
id: i,
age: 18,
name: `kunkun_${i}`,
alais: 'Irving',
gender: 'female',
education: 'senior high school',
height: 'xxx',
weight: 'xxx',
hobby: 'xxx',
tag: 'xxx',
skill: {
sing: 0,
dance: 0,
rap: 0,
basketball: 100,
},
})
}
export default {
data: {
userList: user,
},
computed: {
firstUser() {
const userList = this.userList
return userList.length ? userList[0] : {}
},
total() {
return this.userList.length
},
},
}复制代码
如以上代码所示,模拟了5万个用户,每一个用户拥有id, name, age等等字段。 jsfiddle
打开chrome devtool的Performance工具,可以看到,渲染这个组件的过程中,Observer这个阶段耗时2.19s(测试机器配置为桌面端i7,16g内存)。
接下来,我会一步一步的把这一段耗时减少到10ms。
分析原因
众所周知,Vue在渲染组件的时候,会对data对象进行改造,遍历data的key,调用defineProperty方法定义它的setter和getter。如果某个字段是Object,或者Array,还会递归的对这个字段进行上诉操作。
通常情况下,这个操作耗时是很短的,但是当数据量非常大的时候,对每一个数据项的每一个字段都进行defineProperty的操作就是一个昂贵的操作,所以性能优化的出发点就是减少defineProperty的次数。
Step 1, 减少无用字段
在这个模拟的例子当中,其实我只需要2个字段,一个是name,一个是id(id甚至也可以不要),所以我把多余的字段都去掉,一共减少了8个String类型的字段,和一个Object类型的字段,可以减少 (8 + 4) * n次defineProperty操作和n次递归调用。看看结果如何。
Observer这个操作从2.2s减少到了515ms,提升还是比较大的。
Step2,数据扁平化
在当前版本(2.x)的Vue当中,对于数据变动的检测有许多限制,比如不能检测对象属性的添加和删除;不能检测到通过数据索引直接设置数据项等等。
所以,当一个数组的数据项都是基本数据类型的时候,Vue不会进行任何操作。
首先,把user数据拍扁
const user = []
let i = 0
while (i++ < 50000) {
user.push(`kun_${i}`, i) // 通过index为基数还是偶数分辨是name还是id
}复制代码
然后,相应的改变computed的计算方法,不影响渲染逻辑和业务逻辑
...
computed: {
firstUser() {
const userList = this.userList
return userList.length ? { name: userList[0], id: userList[1] } : {}
},
total() {
return this.userList.length / 2
},
}
...
复制代码
看看结果如何
从上图可以看出,结果非常的明显,从515ms直接减少到了7ms,几乎完全避免了性能损耗。
Step3,利用computed
到此为止,性能上的问题已经解决了,但是扁平的数据会影响业务代码的开发效率和可读性,同时数据和它的index产生了深耦合,如果我们需要添加一个字段使用或者改变下顺序,很容易出问题。
不过,我们可以利用computed计算属性把已经被拍扁的数据重新组装起来。由于Vue的响应式数据改造只针对data选项和props选项,不包括computed,所以只会产生很少的函数运行耗时。
export default {
data() {
return {
// 扁平的数据存起来
originSserList: user,
}
},
computed: {
firstUser() {
const userList = this.userList
return userList.length ? userList[0] : {}
},
total() {
return this.userList.length
},
// 重新'组装'便于使用的计算属性,不影响原本的渲染和业务逻辑
userList() {
const result = []
const user = this.originSserList
for(let i = 0; i < user.length; i += 2) {
const name = user[i]
const id = user[i + 1]
result.push({ name, id })
}
return result
},
},
}
复制代码
看看这种情况下的Performance。
仅仅只是多出了10ms的函数运行时间。
到这里,在无需改动任何的渲染逻辑和业务逻辑的情况下,将js的运行时间从2.2s减少到了10ms左右,提升了200倍。并且这些数据是在桌面端i7处理器下得到的,大大超越了绝大部分的用户的机器性能,更不用说移动端了,所以在实际的大数据量场景下,能取得更加明显的用户可感知的性能提升。
Step4,数据静态化
没想到吧,还有Step4?已经没有优化空间了呀。
在这个模拟的场景里面,确实没有优化的空间了,不过,并不是所有的数据都可以很好的进行扁平化处理,这可能涉及到方方面面的原因与权衡。那么这种情况下,如何进行优化呢?
通常在Vue组件当中,都是把数据放在data选项当中,Vue会对data选项中的数据进行响应式改造,我称之"动态数据"或者"响应式"数据,但是并不是所有的数据都是会发生变化的,很多时候,特别是大数据量场景下的数据是不会或者很少发生变化的,这种情况下,就没有必要把它放到data选项中去,而是在beforeCreated当中进行数据初始化,也不会影响数据的使用。
beforeCreated() {
this.userList = xxx // 记得把data当中的userList删掉
}
复制代码
这种处理方式,我称之为数据静态化,这种数据,我称之为"静态数据"。
但是,有一点需要特别的注意,静态数据并不在Vue的响应式系统当中,也就是说当你进行this.userList = newUserList时,视图不会重新渲染,对应的computed计算属性也不会重新计算。没有了Vue提供的响应式系统,如果数据变动的时候,我们需要手动的去计算对应的数据,可能还需要配合$forceUpdate这个api去重新渲染视图。此时,需要在性能和代码可读性与开发效率上进行取舍与权衡。
总结
由于Vue的响应式系统,大数据量场景下可能会造成js运行层面的性能问题,可以通过3个方法去解决
减少无用字段
数据扁平化
数据静态化
这3个方法相互并不冲突,可以根据实际情况选择其中的1种或多种方法进行组合。
vue渲染大量数据如何优化_大数据量场景下的Vue性能优化相关推荐
- Hadoop! | 大数据百科 | 数据观 | 中国大数据产业观察_大数据门户
深度好文丨读完此文,就知道Hadoop了! 来源:BiThink 时间:2016-04-12 15:14:39 作者:陈飚 "昔我十年前,与君始相识." 一瞬间Hadoop也到了要 ...
- python大数据开发工程师_大数据开发工程师的职责
大数据开发工程师的职责 大数据开发工程师的职责1 职责: 1.负责数据采集.数据存储.数据查询.数据计算等基础平台的设计和开发工作; 2.利用Hadoop.Spark.Flink等技术进行离线和实时数 ...
- python开发和大数据开发工程师_大数据开发工程师的岗位职责
大数据开发工程师负责该领域的业务需求讨论,完成技术方案及数据开发.下面是学习啦小编整理的大数据开发工程师的岗位职责. 大数据开发工程师的岗位职责1 职责: 1.负责所分管团队的团队建设和日常管理工作; ...
- 大数据治理工程师_大数据治理关键技术解析(转自EAWorld)
在企业数据建设过程中,大数据治理受到越来越多的重视.从企业数据资产管理和提升数据质量,到自服务和智能化的数据应用,大数据治理的内容在不断地发展和完善,其落地实施的过程中会遇到各种各样的难题和挑战.本篇 ...
- 大数据职业理解_大数据带给我们职业三大根本改变
那么,大数据为什么成为所有人关注的焦点?大数据带来了什么样的本质性改变?为此,我们与中国计算机学会大数据学术带头人.中国人民大学信息学院院长杜小勇教授进行了访谈. 大数据(Big data)通常用来形 ...
- 大数据 挑战 机会_大数据可视化面临哪些挑战
数据可视化在大数据场景下面临诸多新的挑战,包括数据规模.数据融合.图表绘制效率.图表表达能力.系统可扩展性.快速构建能力.数据分析与数据交互等. 数据规模 大数据规模大.价值密度降低,受限于屏幕空间, ...
- 大数据治理工程师_大数据治理遇到的问题有哪些?大数据工程师必须认真应对...
[摘要]大家现在都知道,随着云时代的到来,大数据越来越受到人们的关注,这就需要我们知道大数据治理遇到的问题有哪些?大数据工程师必须认真应对,这也反映出大数据重要,现在就告诉你大数据治理遇到的问题有哪些 ...
- python大数据就业方向_大数据方向:就业主要从事哪些工作?
你好. 一.大数据就业前景 大数据行业人才稀缺,人才需求量达100万+,随着人工智能.物联网.云计算的快速发展,大数据人才需求也急剧增加,未来还将不断扩大.而且大数据人才的薪资也是普遍较高的,2018 ...
- python大数据好不好学_大数据好学吗?想转行大数据??
作为一名IT从业者,同时也是一名教育工作者,我来回答一下这个问题. 首先,虽然大数据技术具有一定的难度,但是随着大数据技术体系的逐渐丰富和完善,大数据领域对于人才的需求类型也在不断趋于多元化,不同知识 ...
最新文章
- CIO成功转型为战略性业务领导者的五个要领
- debian/ubuntu下安装java8
- unity 开启外部摄像头
- mysql create at_create_at update_at
- 怎么把项目的数据上传到服务器,怎么把sql数据库上传到云服务器
- 判断力有时候有多么重要?懂得选择多么重要?
- c语言中十进制与十六进制转换_小猿圈分享-java-十进制、八进制、十六进制数互相转换...
- SpringBoot开发案例之异常处理并邮件通知
- 视频教程-oracle入门到大神(备mysql、java基础、javaee必经之路)-Oracle
- 版本控制gitlab
- 各个音阶的频率_c大调音阶各个音的频率(赫兹)是多少答得好给分
- odoo 重写unlink方法
- C++ 常指针和指向常量的指针
- 地图学的基础知识_天文坐标系_大地坐标系_地心坐标系及其相关概念
- ws2812 程序设计与应用(2)DMA 控制 PWM 占空比(双缓存降低内存消耗)
- 三相电机驱动电路详解
- 【连麦demo】信令
- 阿朱推荐的产品经理读物30本书(修订版)
- 急!急!急!VMWare vSphere 6.X 标准技术支持快要结束了!!!(20221015)
- java -- cropper裁剪图片并base64上传 移动端简单示例