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

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

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

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

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

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

基本功能

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

基本用法

默认

<lazy-render>
    <my-component></my-component>
</lazy-render>

trackByData

<lazy-render :data="myArray" :time="300" :limit="50" track-by-data>
    <my-component :data="myArray"></my-component>
</lazy-render>

源码解释

template

<div class="lazy-load">
    <slot v-if="show"></slot>
    <div v-if="!show" :class="[maskClass ? maskClass : 'lazy-load-mask']">{{tip}}</div>
</div>

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时,开启

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

javascript-购物车(2)

大家好,这几天一直加班,好久没有更新微信公众号了。 这次我们继续来讲解“购物车应用”,这次来讲解下它的路由功能。。 它是一个单页应用,所有的操作和页面跳转都是在...

1996
来自专栏SHERlocked93的前端小站

Vue项目数据动态过滤实践

这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-),过程中会涉及到一些Vue源码的...

933
来自专栏陈龙涛的专栏

分布式锁服务关键技术和常见解决方案 ( 下)

网络通信的时延和不可靠,加上分布式环境中各种故障的常态化发生,导致实现一个可靠的分布式锁服务需要考虑更多更复杂的问题。

5291
来自专栏phodal

前端程序员必知:单页面应用的核心

这几年里,单页面应用的框架令人应接不暇,各种新的概念也层出不穷。从过去的 jQuery Mobie、Backbone 到今天的 Angular 2、React、...

2069
来自专栏前端杂谈

广告等第三方应用嵌入到web页面方案 之 使用js片段

29811
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager分页控件的总体介绍和在线演示

QuickPager分页控件的特点  两种运行方式:自动运行、手动运行。前者便捷,后者灵活。  多种分页方式:Postback、Postback伪URL、URL...

2128
来自专栏编程

AngularJS的数据绑定功能展示

在AJAX型的单页应用普及之前,类似Rails、PHP和JSP之类的平台都可以帮助我们创建用户界面(UI),它们会把HTML字符串和数据混合起来,然后再发送给用...

1838
来自专栏jianhuicode

上手React Native--常用属性介绍

这几天打算学习并实践ReactNative,学习记录中有不对的地方请大家指出来,互相交流。(-_-)   关于学习ReactNative需要准备的基础知识,①...

2227
来自专栏前端杂货铺

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改,而是对相应的h...

3548
来自专栏性能与架构

微信风格的UI库 - WeUI

微信官方的设计团队设计制作以一套 UI 库,是与微信界面体验一致的基础样式库 包含button按钮、dialog对话框、toast提示框、article文章、...

3826

扫码关注云+社区