前端性能優化之uniapp

性能優化自古以來就是重中之重，這里就簡單了解下吧：

uniapp官方性能優化文檔:https://uniapp.dcloud.io/performance

1、使用v3編譯，跟上官方每一次優化配置和建議

2、減少高頻動畫和監聽，減少對象數量，避免接口調用頻繁，善用數據緩存

3、圖片請壓縮后使用，避免大圖，必要時可以考慮雪碧圖或svg，簡單代碼能實現的就不要圖片

4、合理使用組件復用減少代碼冗余，多學習api用函數式編程解決問題

6、善用封裝以減少代碼量（比如scss常量和方法封裝、接口請求封裝）

7、項目pages過多后請采取分包處理（app也可）https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization

8、必要時可以使用nvue來編寫，但nvue語法比較嚴格請自行看文檔

9、關於用戶體驗，巧用漸變動畫，注重頁面細節，圖片可用懶加載，更多可看uview-ui

10、請不要濫用本地存儲，局部頁面之間的傳參用url，如果用本地存儲傳遞數據要命名規范和按需銷毀

11、有官方API的就不要額外引用js插件增加項目體積，比如url傳參加密直接用encodeURIComponent() 和decodeURIComponent() 

12、減少組件深層嵌套，減少頁面目錄層級，合理利用相對路徑

13、css方面，要知道哪些屬性是有繼承效果的，像字體、字體顏色、文字大小都是繼承的，不要寫那些沒有意義的重復代碼

圖片壓縮網站推薦:https://tinypng.com/

幾個常用的scss封裝參考:

@charset "utf-8";

//增強定位,兼容高，你值得擁有
@mixin pos($p:absolute,$val1:0rpx,$val2:0rpx,$z:1,$t:1){
    position:$p;
    @if $t == 1{
        top:$val1;
        left:$val2;
    }@else if $t == 2{
        top:$val1;
        right:$val2;
    }@else if $t == 3{
        bottom:$val1;
        left:$val2;
    }@else{
        bottom:$val1;
        right:$val2;
    }
    z-index:$z;
}

// 單行省略號
@mixin toe() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

// 多行省略號
@mixin bov($num:2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

//flex布局
@mixin flex($flex1:row nowrap,$flex2:flex-start,$flex3:flex-start){
    display: flex;
    flex-flow: $flex1;
    justify-content: $flex2;
    align-items: $flex3;
}

14、善用節流和防抖

節流：觸發事件n秒內只執行一次，n秒未過，再次觸發無效

防抖：等待n秒后執行某函數，若等待期間再次被觸發，則等待時間重新初始化

 

/**
 * @desc 函數防抖
 * @param func 函數
 * @param wait 延遲執行毫秒數
 * @param immediate true 表立即執行，false 表非立即執行
 */
function debounce(func,wait,immediate) {
    let timeout;

    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

 

/**
 * @desc 函數節流
 * @param func 函數
 * @param wait 延遲執行毫秒數
 * @param type 1 表時間戳版，2 表定時器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        let previous = 0;
    }else if(type===2){
        let timeout;
    }
    return function() {
        let context = this;
        let args = arguments;
        if(type===1){
            let now = Date.now();

            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

 

 

歸根結底一句話：大道至簡