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时,开启
vue-lazy-render: 延迟渲染大组件,增强页面切换流畅度的更多相关文章
- 010 vue使用render方法渲染组件
1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )
---恢复内容开始--- 使用组件懒加载的原因 我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件.接口文件.css文件等 ...
- 在vue中结合render函数渲染指定的组件到容器中
1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...
- render方法渲染组件和在webpack中导入vue
使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...
- Vue之render渲染函数和JSX的应用
一.模板缺陷 模板的最大特点是扩展难度大,不易扩展.可能会造成逻辑冗余 <Level :type="1">哈哈</Level> <Level :typ ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- vue --- 关于多个router-view视图组件,渲染同一页面
vue.js多视图的使用,可以提高网页组件化,模块化 比如使用多视图,可以将网站页面封装header.footer.navbar等多个公共部分, 遇到修改公共部分的文案信息等数据的时候,不再需要逐一修 ...
- Vue组件v-if新渲染的组件不更新
Vue组件v-if新渲染的组件不更新:可能原因是Vue识别到是相似组件(高度相似甚至相同)不会更新元素.给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件.
- 使用render函数渲染组件
使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b
随机推荐
- 串口计时工具Grabserial简介及修改(添加输入功能)
Grabserial是Tim Bird用python写的一个抓取串口的工具,这个工具能够为收到的每一行信息添加上时间戳. 如果想对启动时间进行优化的话,使用这个工具就可以简单地从串口输出分析出耗时. ...
- 通过反射获取DLL的类实现加载窗体
1.创建一个DLL 类库,并新建一个窗体类,这个直接在vs上操作就好 2. 建立一个Testassembly工程 新建一个测试类 namespace Testassembly { public par ...
- .net 下新版highcharts本地导出图片bug处理
最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...
- c#开源消息队列中间件EQueue 教程
一.简介 EQueue是一个参照RocketMQ实现的开源消息队列中间件,兼容Mono,具体可以参看作者的文章<分享一个c#写的开源分布式消息队列equeue>.项目开源地址:https: ...
- SQL Server 查询分解
标签:SQL SERVER/MSSQL SERVER/数据库/DBA/查询步骤 概述 查询步骤是很基础也挺重要的一部分,但是我还是在周围发现有些人虽然会语法,但是对于其中的步骤不是很清楚,这里就来分解 ...
- [转]GC简介
[转]GC简介 原文链接:http://www.cnblogs.com/cposture/p/4845189.html 原文写得太好了,这里转一下. 1 GC机制 1.1 对象 从计算机的角度,装有数 ...
- 花一分钟来看看Worktile是如何为团队协作而生的
团队协作,我们想的更深.更远.更多,花一分钟来看看我们特别奉献的故事,然后去注册一个账号,邀请小伙伴一起来工作,你会体会Worktile才是真正懂你的协作方式.
- 微信小程序客服消息使用指南
客服消息使用指南 为丰富小程序的服务能力,提高服务质量,微信为小程序提供客服消息能力,以便小程序用户可以方便快捷地与小程序服务提供方进行沟通. 功能介绍 用户可使用小程序客服消息功能,与小程序的客服人 ...
- KnockoutJS 3.X API 第六章 组件(3) 组件绑定
组件绑定将指定的组件注入到元素中,并且可选地将参数传递给它. 本节目录 一个例子 API 组件生命周期 备注1:仅限模板组件 备注2:使用没有容器元素的组件 备注3:将标记传递给组件 处置和内存管理 ...
- javascript 学习笔记
本文主要记录在学习过程中遇到的JavaScript难点或者容易疏忽的细节,也方便自己日后翻阅学习. 1.arr.length === + arr.length arr.length === + arr ...