vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍

最新推荐文章于 2024-08-12 16:53:30 发布
最新推荐文章于 2024-08-12 16:53:30 发布
阅读量1.2k 收藏 3
点赞数
文章标签： vue延迟渲染组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39746241/article/details/112817762
版权
本文探讨了在Vue 2.x中解决前端性能问题的组件级懒加载策略，介绍了Vue Lazy Component的实现原理和使用方法，包括组件可见性判断、延迟加载、骨架屏等，展示了多个DEMO，并分享了实际项目中的优化效果和未来优化方向。
摘要由CSDN通过智能技术生成

这篇文章分享了从遇到前端业务性能问题，到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程。

初始加载资源过多

问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。

初始加载的时候，一共请求了155个资源，请求的瀑布图就快要和页面一样长了?

初始加载的资源过多导致在 domInteractive 之后，页面花费了大量时间加载子资源，导致页面的 load 时长被严重拖长，达到了 5.6s 。

来看看这些子资源都是什么，根据请求资源的类型，我们找到了最多的类型是图片，这是显而易见的，页面上到处都是大图片，其次是 js 文件，由第三方的业务插件和一些 JSONP 的接口组成。

问题分析

再回到最初的这个页面，结合上面的数据情况我们得出了这个页面的问题总结结论：页面由大量模块组成

每个模块部分由首页自主维护，部分由业务方通过插件维护

所有模块是同时进行加载

模块中图片内容较多

每个模块的依赖资源较多(包括js文件、接口文件、css文件等)

解决思路

我们提出了下面两个主要的解决思路：

组件化分治思想

为

最低0.47元/天 解锁文章
weixin_39746241
关注
vue组件懒加载 ajax,前端性能优化成神之路--vue组件懒加载（Vue Lazy Component ）
weixin_42438750的博客
08-05 1158
---恢复内容开始---使用组件懒加载的原因我们先来看看这样的一个页面，页面由大量模块组成，所有模块是同时进行加载，模块中图片内容较多，每个模块的依赖资源较多(包括js文件、接口文件、css文件等)所以我们在加载这样的页面会非常的慢解决思路——加载优先级在完成了组件化的拆分，确保模块之间不会互相影响和产生耦合之后，我们可以方面地调整加载策略。加载的策略是根据可见性来处理优先级问题。优先加载首屏可见...
Vue组件用于Vue组件的延迟渲染
08-10
Vue组件,用于Vue组件的延迟渲染,改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况
vue延迟渲染组件_vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度
weixin_39965881的博客
12-31 331
最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当不...
【vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例】
最新发布
weixin_50556117的博客
08-12 1018
vue讲解：v-model 之 lazy、number、trim、与后端交互、小电影案例
vue组件懒加载 ajax,Vue.js 2.0 组件级懒加载方案: Vue Lazy Component
weixin_39989668的博客
08-05 342
Vue.js 2.0 组件级懒加载方案支持 组件可见或即将可见时懒加载支持 组件延时加载支持 加载组件前展示组件骨架，提高用户体验支持 懒加载组件分包异步加载安装npm install @xunlei/vue-lazy-component复制代码在线Demo使用1.注册组件方式1利用插件方式全局注册import VueLazyComponent from '@xunlei/vue-lazy-com...
vue 延迟渲染
jiaqichinese的专栏
06-14 229
这段文本会在组件被渲染后显示
vue-lazy-component：:snail:Vue.js 2.x组件级懒加载方案-Vue.js 2.x组件级延迟加载解决方案
02-06
Vue.js 2.x 版本引入了许多优化特性，其中组件级延迟加载（懒加载）是一个重要的性能提升策略。"vue-lazy-component" 是一个专门为Vue.js 2.x设计的插件，它允许我们在应用中按需加载组件，从而减少初始页面加载时间...
性能优化之组件懒加载: Vue Lazy Component 介绍
binggg
09-15 1386
初始加载资源过多 问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。 初始加载了155个请求 初始加载的时候，一共请求了155个资源，请求的瀑布图就快要和页面一样长了???? 请求概况 初始加载的资源过多导致在 domInteractive 之后，页面花费了大量时间加载子资源，导致页面的 load 时长被严重拖长，达到了 5.6s 。 ...
vue-markdown-loader 渲染出来的不一样_延迟渲染
weixin_39706127的博客
11-23 428
延迟渲染我一直认为，延迟渲染跟阴影，是图形学的一个分水岭。能深刻的理解了延迟渲染、阴影，那么至少图形学算是入门了，至少对渲染架构，渲染的一些基本算法，入门了，不再是门外汉了。声明一下，这里只打算讲原理，并且实现一些伪代码。这东西大行其道都有十年了吧？要抄代码的话，网上到处都是，没必要在这里抄。况且，DX11，DX9，GL，Vulkan的实现都不同，理解了原理，搞搞就出来了，抄的话，一般只是借鉴一下...
vue延迟渲染组件_做一个可复用的 echarts-vue 组件（延迟动画加载）
weixin_42114645的博客
02-22 897
在 vue 项目使用 echarts 的场景中，以下三点不容忽视：1. 可视化的数据往往是异步加载的；2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 )，往往会导致该页面的渲染速度很慢并可能在几秒内卡死，产生极差的用户体验。3. 引入 echarts 组件导致编译后的文件过大从而使得首次访问的加载极慢。关于第三点，大家可以参考之前的撰文优化 Vue 项目编译文件大小。以下针对上述前两...
vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度
weixin_34357962的博客
12-26 558
最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。 但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当...
vue延迟渲染组件_vue数组修改的渲染性能问题
weixin_31815843的博客
01-16 1378
最近用vue做一个小东西，发现了一个奇怪的现象，当模板使用数组进行v-if判断时，如果修改数组的值，页面渲染会明显有延迟，示例代码如下：这个更多显示反应有延迟{{v.name}}export default {data() {return {list:[{'id':0,'name':'a'},{'id':1,'name':'b'},{'id':2,'name':'c'}],more: [false...
VUE 组件手动渲染、组件延迟渲染
oMangGuoBuDing1的专栏
04-07 1290
有时候组件中数据还没准备好，或者是强依赖的变量还没有构造好 的时候如果 可能需要等数据构造完之后再手动渲染 这种需求的解决方案 是灵活使用v-if 因为v-if是false时组件不会被渲染。当数据构造完成后再设为true 这时才渲染组件 解决 tab 抽屉组件 时发现的解决方案 ...
vue修饰符：.lazy .number .trim 的作用以及使用场景介绍
huangfuyk.的博客
05-24 5759
在 Vue—修饰符 里面有这么三种属性： .lazy .number .trim 1. lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步。 意思是什么呢，就是说当我们在input输入框输入数据时，v-model绑定的值不会发发生变化，但是当我们停止输入，输入框失去焦点或者按下回车时，v-model绑定的值才会发生变化，即在“change”时而非“.
【vue】解决数据渲染延迟出现的闪烁问题
Evan_QB的博客
10-09 4625
首先在标签上加上v-cloak <div id="app" v-cloak> {{ message }} </div> 然后加上样式，为防止被覆盖，可以加上!important [v-cloak] { display: none !important; }  ...
vue延迟操作
热门推荐
六六的小帅的博客
06-05 1万+
关于vue中延迟加载、执行、渲染
Vue表单修饰符（lazy）
JEFF_xieyuzhi的博客
03-01 1237
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 ; 其实官方文档里面的这句话结合下面这个链接里面的案例，说的简单点就是当你在输入框里面删除数据的时候，你看到的是数据没有实时更新，而是等到你确定删除完成后，离开输入框（进入下一步操作）才可以看到效果。 链接：https://www.cnblogs.com/mmzuo-798/p/9301121.html ...
[vue] 说说你对vue的表单修饰符.lazy的理解
歌谣的博客
03-03 632
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后，vue并不会立即监听input Value的改变，会在input失去焦点之后，才会触发input Value的改变 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值