前端項目性能優化筆記

飽暖思淫慾，當咱們完成基本的業務需求以後，咱們就須要去思考一下如何是咱們的業務更加的流暢、代碼更健壯等等，如下是我在項目中作的一些基本的項目優化工做，小小記錄一下

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;
    }
}

等等。

～好好學習，每天向上～