vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度

awkj 发布于2019-08-21 11:23 / 1670人阅读

摘要：后来将去掉，操作流畅多了。这时，我就在想，能不能让页面切换完成之后才开始渲染数据量大的组件，用户起码不会感知到路由切换的卡顿情况。组件开始渲染时，会触发事件。

最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。

但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当不好。

这时，我就在想，能不能让页面切换完成之后才开始渲染数据量大的组件，用户起码不会感知到路由切换的卡顿情况。

一开始不知道怎样做，后来看到这篇blog:vue 性能优化,作者基于vue1.0做了一个指令，基本原理是利用v-if来控制组件的渲染时机。作者在回答中提到vue2.0可以用组件来做，具体的讨论可以看这里

基于此，我做了个组件vue-lazy-render，欢迎star。

基本功能

延迟加载组件

控制延迟加载的时间

可以监控数组的变化和设定数据量来决定是否开启延迟加载

基本用法 默认

trackByData

源码解释 template


    
    {{tip}}

props

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

methods

/**
 * 延迟渲染数据,在数据渲染完成后触发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时，开启

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

云服务器 GPU云服务器流畅度 webrtc流畅度 webrtc屏幕共享流畅度 webrtc 屏幕共享流畅度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86646.html

前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
Vue全家桶商城全站升级之引入HTTPS,PWA,错误监控,持续构建。

摘要：免费升级到升级到后，服务器可以开启版本，对比性能和缓存各方面要更好，还有其他新特性，可以启动功能，更好的进行离线缓存，更好的离线体验。 showImg(https://segmentfault.com/img/remote/1460000012773891?w=370&h=661); 在线地址:https://fancy.czero.cn 手机扫描二维码查看: showImg(http...

zengdongbao 2019-08-23 10:22 评论0 收藏0
保利威无延迟直播：全面增强互动体验，大班课、带货直播转化更高效！

摘要：保利威无延迟直播可以在手机电脑上实现高参与度的互动，让课堂体验再上一层，对于提升公开课转化率非常有帮助。无延迟体验能让直播更接近线下体验。衡量一场直播是否成功，用户互动体验必然是关键一环。今年疫情影响下，云办公、云上课、云会展、云购物纷纷兴起。带货直播、空中课堂、会展直播等多样化的场景让用户对直播实时性、流畅性有了更高要求。 ...

不知名网友 2021-11-25 13:36 评论0 收藏0