vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。
运行时优化
1、使用v-if代替v-show
两者的区别是:v-if不渲染DOM,v-show会预渲染DOM
除以下情况使用v-show,其他情况尽量使用v-if
有预渲染需求
需要频繁切换显示状态
2、v-for必须加上key,并避免同时使用v-if
一般我们在两种常见的情况下会倾向于这样做:
为了过滤一个列表中的项目
比如 v-for="user in users" v-if="user.isActive"。在这种情形下,请将 users替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表
为了避免渲染本应该被隐藏的列表
比如 v-for="user in users" v-if="shouldShowUsers"。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)
3、事件及时销毁
Vue组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。
也就是说,在js内使用addEventListener等方式是不会自动销毁的,我们需要在组件销毁时手动移除这些事件的监听,以免造成内存泄露,如:
created() { addEventListener('touchmove', this.touchmove, false)},beforeDestroy() { removeEventListener('touchmove', this.touchmove, false)}//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
首屏优化
1、图片裁剪、使用webp
- 图片需要裁剪,一般使用二倍图即可
- 尽量使用webp图片
- 如果使用了vue-lazyload插件,可以使用以下方法一键替换webp(替换使用v-lazy指令的图片)
Vue.use(VueLazyload, { error: require('./assets/img/defaultpic_small.png'), filter: { webp (listener: any, options: any) { if (!options.supportWebp) return // listener.src += '.webp' }//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 }});
2、资源提前请求
经测试,Vue项目中各文件的加载顺序为:router.js、main.js、App.vue、[-page-].vue、[component].vue,如图:
其中,router的加载时间相比于page.vue快近100ms,如果page.vue的文件较多,时间差异会更大
所以,可以在页面挂载、渲染的同时去请求接口数据,如在router.js中请求数据:
import Router from 'vue-router'import store from './store'//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力 store.dispatch('initAjax')
3、异步路由
使用异步路由可以根据URL自动加载所需页面的资源,并且不会造成页面阻塞,较适用于移动端页面
建议主页面直接import,非主页面使用异步路由
使用方式:
{ path: '/order', component: () => import('./views/order.vue')}
4、异步组件
不需要首屏加载的组件都使用异步组件的方式来加载(如多tab),包括需要触发条件的动作也使用异步组件(如弹窗)
使用方式为:v-if来控制显示时机,引入组件的Promise即可
5、使用轻量级插件、异步插件
使用webpack-bundle-analyzer查看项目所有包的体积大小,较大的插件包尽量寻找轻量级的替代方案
首屏用不到的插件、或只在特定场景才会用到的插件使用异步加载(如定位插件,部分情况可以通过URL传递经纬度;或生成画报插件,需要在点击时触发);插件第一次加载后缓存在本地,使用方式为:
// 以定位插件为例const latitude = getUrlParam('latitude')const longitude = getUrlParam('longitude')// 如果没有经纬度参数,则使用定位插件来获取经纬度if (!latitude || !longitude) { // 首次加载定位插件 // webpack4写法,若使用webpack3及以下,则await import('locationPlugin')即可 if (!this.WhereAmI) this.WhereAmI = (await import('locationPlugin')).default // do sth...//在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力}
6、公用CDN
使用公用的CDN资源,可以起到缓存作用,并减少打包体积
网络优化
1、减少网络请求
浏览器对同一时间针对同一域名下的请求有一定数量限制(一般是6个),超过限制数目的请求会被阻塞
首屏尽可能减少同域名的请求,包括接口和js;按需减少首屏的chunk.js,合并接口请求
2、合理使用preload、dns-prefetch、prefetch
preload具有较高的加载优先级,它可以利用间隙时间预加载资源,将加载和执行分离开,不阻塞渲染和document的onload事件
每次与域名连接都需要进行DNS解析,使用dns-prefetch可以预解析域名的DNS
prefetch会预加载页面将来可能用到的一些资源,优先级较低;对首屏渲染要求较高的项目不建议使用
三者的使用方式,在head标签中添加(vue-cli-3已经做了相应配置):
md-config
3、PWA
PWA支持缓存HTML文档、接口(get)等,降低页面白屏时间
这样即使在弱网甚至断网情况下,也能迅速展示出页面
编译打包优化
1、升级Vue-Cli-3
vue-cli-3采用webpack4+babel7,对编译打包方面做了很多优化(成倍的提升),使用yarn作为包管理工具,并且对很多优化的最佳实践做了默认配置
经测试,将项目从vue-cli-2迁移到vue-cli-3之后,速度变化为:
编译时间:44s --> 7s
打包时间:55s --> 11s
效率提升非常明显
2、SSR
对加载性能要求较高的项目建议升级SSR
结语
感谢您的观看,如有不足之处,欢迎批评指正。
推荐一下我的公众号: 【 geekjc 】,微信号: 【 c8706288 】一起学习交流编程知识,分享经验,各种有趣的事。
vue 加载页面时触发时间_解析Vue项目的四个方面优化相关推荐
- vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...
- vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法,熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法 变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
- [vue] 第一次加载页面时会触发哪几个钩子?
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
- 上传文件到服务器经常连接重置,尝试将文件上传到tmp_name时,“正在加载页面时重置了”服务器的连接重置“...
我正在制作网站以将mp3文件存储在数据库中.当我访问该网站时,它说我已成功连接到数据库,并成功选择了数据库.但是当我选择一个文件并按上传按钮时,它会尝试连接很长时间,然后我的网络浏览器显示" ...
- jQuery eq()方法 =》加载页面时单选框默认选中
*加载页面时单选框默认选中(此方法适用于循环输出的单选钮的默认选中问题) <body> <input type="radio" name="jing&q ...
- 首次加载页面时,Android Chrome上永远不会触发Touchstart事件
On Android Chrome, when you create a new tab and access to a page with the content below, your touch ...
- 关于JQUERY动态加载页面时的JS失效的问题
加载页面后一些JS特效或CSS特效不起作用,简单的方法是重新加载一下JQUERY的特效函数.
- 当图片加载失败时,做处理(onerror)(vue)
问题:在写项目时,使用的img标签总会遇到一些奇奇怪怪的图片,不是加载慢就是加载不出来,所以我们做相应的处理,就能使得用户体验更好了 解决: 给img标签一个onerror失败事件,在图片加载失败时做 ...
- js初化加载页面时ajax会调用两次的原因_在前端开发中,有哪些因素会导致页面卡顿
前端开发不像后端那样,很少出现有大量算法的场景,但是前端性能也是需要优化的.好的代码是保证网页平稳高性能运行的基础,结合以往开发中遇到的场景,本文对前端网页卡顿的原因进行了梳理和分析,并给出了对应的解 ...
最新文章
- FFmpeg源代码简单分析:avformat_find_stream_info()
- 【转】iOS多线程编程技术之NSThread、Cocoa NSOperation、GCD
- 关于JavaScript 中的变量
- 牛逼!Java 从入门到精通,超全汇总版
- Javascript---js的编码及解码
- 图片生成链接最简单的方法
- 计算机鼠标能用键盘不能用,电脑键盘鼠标都不能用了,怎么回事?
- 文献盘点|回眸2021,理一理科研圈探索的那些大发现
- Arduino基础入门二之呼吸灯
- ASO商店优化为什么成为必争之地,其优势有哪些?
- Python---python3.7.0---如何安装PIL
- 内存管理单元(MMU)介绍
- 8、go语言:测试与性能调优
- 文秘专业计算机基础试卷,秘书题库:文秘类专业基础理论课试卷上2
- sequence_loss_by_example()函数在Tensorflow2.x找不到
- 【触摸屏功能测试】昆仑通态MCGS——物联网功能测试
- 会计学测试(所得税、未分配利润)
- 重磅!百度怒告前高管王劲,真实原因竟然是因为....
- 【测绘程序设计】——附合导线近似平差
- 新高考全走班(4选2、6选3、7选3)陈老师排课原理及方案
热门文章
- python调用c++动态库 linux_linux中使用boost.python调用c++动态库的方法
- [JUC-5]ConcurrentHashMap源码分析JDK8
- SFB 项目经验-51-某上市企业2千人Exchange 2013升级2016高可用之伤01
- VIM打开shell脚本中文乱码解决
- SCCM2016 集成WSUS提供补丁服务(一)
- shell转换特殊的格式(%b)到时间戳 08/Dec/2016
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
- 在chrome Sources 页 显示 Console(drawer) 页
- java中 运算符
- bzoj1003 物流运输