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

一、高頻操作的防抖和截流

日常頁面開發中經常會有一些操作頻率較高的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;
    }
}
 

等等。

～好好學習，天天向上～