前端项目性能优化笔记

饱暖思淫欲，当咱们完成基本的业务需求以后，咱们就须要去思考一下如何是咱们的业务更加的流畅、代码更健壮等等，如下是我在项目中作的一些基本的项目优化工做，小小记录一下

1、高频操做的防抖和截流

平常页面开发中常常会有一些操做频率较高的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处理的。有兴趣的同窗也能够本身写一下，以便增进理解～

2、定时器的使用

一、合理的使用生命周期，好比在组件没用的时候，销毁掉无效的定时器

beforeDestroy() {
    console.log('beforeDestroy destroy the timer')
    this._destroy()
},
methods: {
    _destroy() {
        clearTimeout(this.timer)
    }
}

二、使用watch代替一直轮询的setInterval定时器

3、图片内容的懒加载

图片这个东西加载起来很占用时间，同时并非全部的图片都须要初始化的时候就加载进来，这个时候试试懒加载，没毛病。

4、模块的组件化

开发中常常会写不少组件，最好作到独立组件与业务组件的分离，或者业务组件在抽离的独立组件之上再作封装。

5、用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;
    }
}

等等。

～好好学习，每天向上～