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 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

531
来自专栏性能与架构

jquery的ready方法实现原理

应用jquery时 ready是一个非常常用的方法,我们常常会写 $(document).ready(function) 或 $(function) re...

3317
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

693
来自专栏Crossin的编程教室

在 Win 控制台中实现菜单

本教室的 hymyg 同学实现了两个控制台下的实用模块,发在了论坛上。我觉得挺不错的,于是分享其中的一个给大家。对项目感兴趣,想进一步了解细节的,可以在公众号里...

2735
来自专栏hbbliyong

主题与皮肤

 主题和皮肤  •通过设置站点、页面、控件的指定属性以声明主题 •皮肤 = 控件的可视属性   –存在于后缀名为.skin的文件当中   –默认皮肤以...

3495
来自专栏飞雪无情的博客

Android技术文档翻译--工具属性(Tools Attributes)

原文地址 http://tools.android.com/tech-docs/tools-attributes

1173
来自专栏Theo Tsao

Angular学习笔记(一)

Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块 或 NgModules。 Angular 模块都是一个带...

1222
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

872
来自专栏美奔科技

向Windows 服务器传输大文件

https://support.microsoft.com/zh-cn/help/2258090/copying-files-larger-than-2-gb-...

4202
来自专栏葡萄城控件技术团队

MultiRow发现之旅(二)- 详解属性管理器

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 属性管理器 上一篇提到MultiRow模板设计器中有一个“属性管理器”,这里就聊一聊这个属性管理器。...

1849

扫码关注云+社区