????最近了解了一下微信小程序的性能優(yōu)化寞肖，搜集了一些相關的方法探孝，整理出來，和大家共享吏够。
一、控制代碼包大小
1. 開啟開發(fā)者工具中的“上傳代碼時自動壓縮”
2. 及時清理無用代碼和資源文件
3. 減少代碼包中的資源文件大小和數量
4. 將資源文件放在CDN中
5. 提取公共樣式和公共組件
6.代碼和圖片壓縮
二滩报、分包加載
1. 將小程序中不常用的頁面放在多個分包內锅知，主包只保留最常用的核心頁面。
如啟動頁和tabBar頁面脓钾，以及分包都需要用的公共資源腳本售睹。
2. 啟動時只加載主包，使用時按需下載分包可训。
3. 分包預加載——開發(fā)者預先配置頁面可能會跳轉到的分包昌妹，框架在進入頁面后根據配置進行預加載。
三握截、運行機制優(yōu)化
1. 減少立即執(zhí)行的代碼數量
2. 避免高開銷和長時間阻塞代碼
3. 頁面代碼都寫入頁面的生命周期中
4. 做好緩存策略
四飞崖、數據管理優(yōu)化
1. 首屏請求數量盡量少于5個，超過的可以做接口合并谨胞，對多次提交的數據可以做合并處理
五固歪、首屏加載優(yōu)化
1. 提前請求：異步數據請求不需要等待頁面渲染完成
2. 利用緩存：利用storage API對異步請求數據進行緩存。二次啟動時先利用緩存數據渲染頁面胯努，再進行后臺靜默更新牢裳。
3. 避免白屏：先展示頁面骨架和基礎內容。
4. 及時反饋：即時地對需要用戶等待的交互操作給出反饋叶沛，避免用戶以為小程序無響應蒲讯。如點贊，先改變按鈕樣式灰署，再發(fā)送異步請求判帮。
六、渲染性能優(yōu)化
1. 避免不當使用setData
setData是邏輯層向渲染層的通訊氓侧，這個通信不是直接給webview脊另，而是通過走了native層
在數據傳輸時导狡，邏輯層會執(zhí)行一次JSON.stringify來去除掉setData數據中不可傳輸的部分约巷，之后將數據發(fā)送給視圖層。同時旱捧，邏輯層還會將setData所設置的數據字段與data合并独郎，使開發(fā)者可以用this.data讀取到變更后的數據踩麦。
（1）使用data在方法間共享數據，data應只包含與頁面渲染相關的數據氓癌。
（2）只傳輸頁面中發(fā)生變化的數據谓谦，使用setData的特殊key實現局部更新
（3）DAU年時間愛你內頻繁調用setData
（4）對連續(xù)的setData調用進行合并
（5）后臺頁面進行setData，搶占前臺頁面的渲染資源——頁面切入后臺的setData調用贪婉，延遲到頁面重新展示時執(zhí)行
（6）頁面列表：使用懶加載+動態(tài)移除非可視區(qū)域范圍內的內容反粥。
（7）耗時較長的js做到異步
2. 避免不當使用onPsgeScroll
（1）只在必要時監(jiān)聽pageScroll事件
（2）避免在onPageScroll中執(zhí)行復雜邏輯
（3）避免在onPageScroll中頻繁調用setData
（4）避免頻繁查詢節(jié)點信息(SelectQuery)，部分場景建議使用節(jié)點布局相交狀態(tài)監(jiān)聽(IntersetctionObserver)替代
3. 使用自定義組件
4. canvas渲染
（1）分層繪制到不同canvas
（2）不變的部分單獨繪制到一個canvas疲迂，動態(tài)生成的繪制到一個canvas才顿，最后合入一個canvas
5. 獲取節(jié)點位置，用intersectionObject
建議：
1. 使用真機調試
2. 開發(fā)工具在network里看不到圖片資源的加載尤蒿。要看圖片懶加載郑气，要設置微信開發(fā)工具的代理到127.0.0.1，通過charles抓包看到
3. 改造setData腰池，記錄性能優(yōu)化的提升
this._startTime = new Date().getTime();
let fn = this.setData;
this.setData = (obj = {}, handle = '') => {
????let now = new Date().getTime();
? ? // 上報渲染所需要的時間
????log(now - this._startTime)
????fn.apply(this, [obj, handle]);
};
關注公粽號【CC前端手記】尾组，更多技術干貨等你哦~
