啟動加載優化
在小程序啟動時,微信會在背后完成幾項工作:下載小程序代碼包、加載小程序代碼包、初始化小程序首頁。
初始化小程序環境是微信環境做的工作,我們只需要控制代碼包大小,和通過一些相關的緩存策略控制,和資源控制,邏輯控制,分包加載控制來進行啟動加載優化。
- 勾選開發者工具中, 上傳時壓縮代碼(若采用wepy高級版本,自帶壓縮,請按官網文檔采取點擊)
- 精簡代碼,去掉不必要的WXML結構和未使用的WXSS定義。
- 減少在代碼包中直接嵌入的資源文件。(比如全國地區庫,微信有自帶的,在沒必要的時候,勿自用自己的庫)
- 及時清理無用的資源(js文件、圖片、demo頁面等)
- 壓縮圖片,使用適當的圖片格式,減少本地圖片數量等
- 如果小程序比較復雜,優化后的代碼總量可能仍然比較大,此時可以采用分包加載的方式進行優化,分包加載初始化時只加載首評相關、高頻訪問的資源,其他的按需加載。
- 提前做異步請求,頁面最好在onLoad時異步請求數據,不要在onReady時請求
- 啟用緩存數據策略,請求時先展示緩存內容,讓頁面盡快展示,請求到最新數據之后再刷新
- 避免白屏,使用骨架屏等
數據通信優化
為了提升數據更新的性能,開發者在執行setData調用時,最好遵循以下原則:
- 不要過于頻繁調用setData,應考慮將多次setData合并成一次setData調用;
- 數據通信的性能與數據量正相關,因而如果有一些數據字段不在界面中展示且數據結構比較復雜或包含長字符串,則不應使用setData來設置這些數據;
- 與界面渲染無關的數據最好不要設置在data中,可以考慮設置在page對象的其他字段下。
提升數據更新性能方式的代碼示例:
Page({ onShow: function() { // 不要頻繁調用setData this.setData({ a: 1 }) this.setData({ b: 2 }) // 絕大多數時候可優化為 this.setData({ a: 1, b: 2 }) // 不要設置不在界面渲染時使用的數據,并將界面無關的數據放在data外 this.setData({ myData: { a: '這個字符串在WXML中用到了', b: '這個字符串未在WXML中用到,而且它很長…………………………' } }) // 可以優化為 this.setData({ 'myData.a': '這個字符串在WXML中用到了' }) this._myData = { b: '這個字符串未在WXML中用到,而且它很長…………………………' } } })
事件通信優化
視圖層會接受用戶事件,如點擊事件、觸摸事件等。當一個用戶事件被觸發且有相關的事件監聽器需要被觸發時,視圖層會將信息反饋給邏輯層。這個反饋是異步的,會產生延遲,降低延遲的方法有兩個:
- 去掉不必要的事件綁定(WXML中的bind和catch),從而減少通信的數據量和次數;
- 事件綁定時需要傳輸target和currentTarget的dataset,因而不要在節點的data前綴屬性中放置過大的數據。
渲染優化
- 頁面方法onPageScroll使用, 每次頁面滾動都會觸發,避免在里面寫過于復雜的邏輯 ,特別是一些執行重渲染頁面的邏輯(另外,可以看我的文章——移動端滾動研究,說明了在滾動的情況下導致的渲染性能低下的各種分析和應付方法總結)
- 在進行視圖重渲染的時候,會進行當前節點樹與新節點樹的比較,去掉不必要設置的數據、減少setData的數據量也有助于提升這一個步驟的性能。