先要進(jìn)行性能優(yōu)化首先需要了解小程序的實現(xiàn)原理：
參考文檔：
- https://github.com/febobo/web-interview/issues/289
- https://developers.weixin.qq.com/community/develop/article/doc/0008a4c4f28f30fe3eb863b2750813
- https://juejin.cn/post/6976805521407868958#heading-5
- https://juejin.cn/post/6844903805675388942
- https://juejin.cn/post/6844903999863259144#heading-1
啟動小程序的步驟：
- 從CDN服務(wù)器上下載小程序代碼包（代碼包不是小程序的源代碼脾拆，而是編譯见转、壓縮打包之后的代碼包）
- 加載此代碼包
- 初始化首屏
由此，我們從加載尊浓、渲染兩個方面來進(jìn)行優(yōu)化
1. 加載
1.1 進(jìn)行分包處理
- 微信小程序要求每個包大小不能超過2M粪狼；
1.2 控制包的大小
- 減少資源包中的圖片等資源的數(shù)量和大型诵取（icon可以放在本地，圖片盡量放在服務(wù)器上再榄，然后http引入）狡刘；
- 提取公共組件、方法困鸥、樣式嗅蔬，減少冗余代碼；
- 及時清理無用代碼和資源文件疾就；
- 第三方插件包按需引入澜术；
2. 渲染
2.1 對于數(shù)據(jù)的請求（首屏體驗（預(yù)請求，利用緩存））
-
盡量提早請求數(shù)據(jù)猬腰，不要等頁面ready后再異步請求數(shù)據(jù)
數(shù)據(jù)的請求時機(jī) - 盡量減少不必要的https請求瘪板，可使用 getStorageSync() 及 setStorageSync() 方法將數(shù)據(jù)存儲在本地
- 可以在前置頁面將一些有用的字段帶到當(dāng)前頁，進(jìn)行首次渲染（列表頁的某些數(shù)據(jù)--> 詳情頁）漆诽，沒有數(shù)據(jù)的模塊可以進(jìn)行骨架屏的占位
2.2 規(guī)范setData操作
image.png
- 減少setData次數(shù)
a) 僅傳輸視圖層使用到的數(shù)據(jù)侮攀，JS環(huán)境用到的數(shù)據(jù)存放到data對象外;
b) 合理利用局部更新。setData支持使用數(shù)據(jù)路徑的方式對對象的局部字段進(jìn)行更新厢拭。
this.setData({
[`dotList[${tarIndex}].dotShow`]: true,
[`dotList[${tarIndex}].dotNum`]: +res.data
});
- 降低setData執(zhí)行頻率：
c) 將多個setData調(diào)用合并執(zhí)行兰英，減少線程間通信頻次;
d) 當(dāng)需要在頻繁觸發(fā)的用戶事件（如PageScroll、Resize事件）中調(diào)用setData供鸠，合理的利用函數(shù)防抖（debounce）和函數(shù)節(jié)流（throttle）可以減少setData執(zhí)行次數(shù)畦贸。
2.3 使用自定義組件
- 對于一些獨立的模塊我們盡可能抽離出來，因為自定義組件的更新并不會影響頁面上其他元素的更新
