前端项目性能优化笔记
饱暖思淫欲，当我们完成基本的业务需求之后，我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等，以下是我在项目中做的一些基本的项目优化工作，小小记录一下
一、高频操作的防抖和截流
日常页面开发中经常会有一些操作频率较高的js操作，比如touchmove、scroll中的事件处理、click事件的频繁发生等等。这个时候如果每次操作都去处理的话，性能上的开销就会比较大。此时就需要对事件的处理频率做个限制，也就是防抖和截流。比如，
watch: {
barNum(to, from) {
// 一个变动很频繁的变量
this.setDebounce()
this.back(this.barNum)
}
},
methods: {
setDebounce: debounce(
function() {
// 一个更新视图的操作
this.setDistance()
},
400
)
}大家对这两个应该也都比较熟，不了解的同学可以看下《性能提速：debounce（防抖）、throttle（节流／限频）》这个。 具体的实现推荐使用lodash组件库，其中有封装好的Debounce和Throttle组件可以调用，上面就是直接使用lodash库里面的debounce处理的。有兴趣的同学也可以自己写一下，以便增进理解～
二、定时器的使用
1、合理的使用生命周期，比如在组件没用的时候，销毁掉无效的定时器
beforeDestroy() {
console.log('beforeDestroy destroy the timer')
this._destroy()
},
methods: {
_destroy() {
clearTimeout(this.timer)
}
}2、使用watch代替一直轮询的setInterval定时器
三、图片内容的懒加载
图片这个东西加载起来很占用时间，同时并不是所有的图片都需要初始化的时候就加载进来，这个时候试试懒加载，没毛病。
四、模块的组件化
开发中经常会写很多组件，最好做到独立组件与业务组件的分离，或者业务组件在抽离的独立组件之上再做封装。
五、用animation动画代替v-show
v-show本身控制的就是display属性，但是这种控制有的时候显得过去生硬。建议使用css3的animation动画代替displa:none的操作，如
.animation_show {
animation: animate_showup 0.5s;
animation-timing-function: linear;
opacity: 1;
}
.animation_hide {
animation: animation_hidedown 0.5s;
animation-timing-function: linear;
opacity: 0;
}
@keyframes animate_showup {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes animation_hidedown {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}等等。
～好好学习，天天向上～
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-11-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录