摘要:后来将去掉,操作流畅多了。这时,我就在想,能不能让页面切换完成之后才开始渲染数据量大的组件,用户起码不会感知到路由切换的卡顿情况。组件开始渲染时,会触发事件。
最近用element来做项目,在开发的过程中,突然发现页面的操作和切换在数据量大的时候相当卡,后来提了个issue,在furybean解答后才知道,我每个单元格都加了tooltip,会生成大量的节点,造成页面操作卡顿。后来将tooltip去掉,操作流畅多了。
但是,由于我是将页面的数据存在vuex中的,在路由切换回来的时候,发现在数据量大的时候,页面渲染得很慢,大概两三秒才能切换过来,用户体验相当不好。
这时,我就在想,能不能让页面切换完成之后才开始渲染数据量大的组件,用户起码不会感知到路由切换的卡顿情况。
一开始不知道怎样做,后来看到这篇blog:vue 性能优化,作者基于vue1.0做了一个指令,基本原理是利用v-if来控制组件的渲染时机。作者在回答中提到vue2.0可以用组件来做,具体的讨论可以看这里
基于此,我做了个组件vue-lazy-render,欢迎star。
基本功能延迟加载组件
控制延迟加载的时间
可以监控数组的变化和设定数据量来决定是否开启延迟加载
基本用法 默认trackByData
源码解释 template
props {{tip}}
property | description | type | default | required |
---|---|---|---|---|
time | 多长时间后开始渲染组件 | Number | 10 | false |
immediately | 是否立即开启延迟渲染,vue-lazy-render组件会在路由切换时,会进行一次延迟渲染,如果在同一个路由中需经常对某个组件进行延迟渲染,可以将immediately由false设为true,就会马上开启一次延迟渲染 | Boolean | -- | false |
data | 如果需要延迟加载的组件是由数组渲染的,可以将数据的数据prop进vue-lazy-render组件,组件会根据配置监测数组变化,决定开启延迟加载的时机 | array | -- | false |
trackByData | 是否根据data的变化来开启延迟加载,如果设为true,需将data prop进来,并且路由切换时不会再进行延迟渲染 | Boolean | -- | false |
limit | 在数据超过多少后才开启延迟渲染,需要data和将trackByData设为true | Number | 30 | false |
maskClass | 等待渲染时的遮罩层样式 | String | -- | false |
tip | 等待渲染时的提示文字 | String | 正在渲染,请稍候 | false |
/** * 延迟渲染数据,在数据渲染完成后触发loaded事件 */ showLazy() { if ((this.data && this.data.length > this.limit) || !this.data) { // 如果数据存在并且数据的数量比限定的数量大,则开启延迟渲染 如果不是列表调用组件,也开启延迟渲染 this.syncLoader() } else { // 其他情况,不开启延迟渲染 this.show = true this.$emit("loaded") } }, /** * 延迟渲染 */ syncLoader() { this.show = false setTimeout(() => { this.show = true this.$emit("loaded") },this.time) }
定义的方法很简单,在data定义的show初始值为false,在需要延迟加载时,会用一个setTimeout来将show设为true,当show变为true时,组件才可以渲染,从而达到延迟渲染的目的。组件开始渲染时,会触发loaded事件。
调用created() { this.showLazy() }, watch: { data() { // 数据变化时重新渲染 if (this.trackByData) { this.showLazy() } }, // 路由变化,重新渲染 $route() { if (!this.trackByData) { this.showLazy() } }, // 立即重新变为true时,重新渲染 immediately() { if (this.immediately) { this.showLazy() } }, },
在页面进入时,开启
如果不是track-by-data模式,则每次路由切换时,开启
如果是track-by-data模式,则数组变化时,开启。由于我的页面中,有些表格是在弹层中展示的,同一个组件,可能每次打开弹层时,数据都不一样,一开始打算用这种方法来实现延迟的,后来加了immediately,感觉这个track-by-data模式完全没有意义了,用了反应会造成不必要的重新渲染。
当immediately由false变为true时,开启
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86646.html
摘要:虽然有着各种各样的不同,但是相同的是,他们前端优化不完全指南前端掘金篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面,使用很多基于Web的应用。这些站点看起来既不一样,用途也都各有不同,有在线视频,Social Media,新闻,邮件客户端...
摘要:免费升级到升级到后,服务器可以开启版本,对比性能和缓存各方面要更好,还有其他新特性,可以启动功能,更好的进行离线缓存,更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...
摘要:保利威无延迟直播可以在手机电脑上实现高参与度的互动,让课堂体验再上一层,对于提升公开课转化率非常有帮助。无延迟体验能让直播更接近线下体验。 衡量一场直播是否成功,用户互动体验必然是关键一环。 今年疫情影响下,云办公、云上课、云会展、云购物纷纷兴起。带货直播、空中课堂、会展直播等多样化的场景让用户对直播实时性、流畅性有了更高要求。 ...
阅读 2800·2023-04-26 02:00
阅读 2728·2019-08-30 15:54
阅读 830·2019-08-30 11:15
阅读 1457·2019-08-29 15:31
阅读 888·2019-08-29 14:12
阅读 465·2019-08-29 13:08
阅读 794·2019-08-27 10:51
阅读 2670·2019-08-26 12:17