頁面白屏了？加載時間長？點擊沒反應？性能有問題！智能小程序性能文檔升級，重磅來襲，帶你進入不同的性能新世界！html
近期爲幫助開發者提高小程序性能，百度智能小程序上線了 Page.onInit 等新增功能；同時全面升級了開發者性能文檔，從基本原理開始由淺入深，爲您解鎖各類性能提高新技能！性能優化
更多性能優化方案
文檔升級後，圍繞小程序首屏渲染流程，針對收集 initData、請求主數據環節，和優化渲染速度的角度，爲開發者提供了更多性能優化方案。框架
收集 initData
在收集 initData 這個環節，開發者可經過使用分包、合理使用動態庫、合理使用 App.onLaunch 的方式，縮短耗時，從而優化首屏渲染時長。異步
使用分包
包下載與解析是整個啓動過程當中的一個重要階段，該階段耗時與小程序頁面所屬包大小呈正相關，將直接影響到 initData 完成收集的時間，從而影響首屏渲染。 開發者可根據實際狀況，選擇使用下述分包方式：函數
- 分包加載:在智能小程序的打包中，默認會有一個主包，主包中包含了啓動頁面，和全部分包都會用到的公共資源/JS 腳本，根據開發者的配置劃分分包。
- 獨立分包:獨立分包是小程序中一種特殊類型的分包，能夠獨立於主包和其餘分包運行。從獨立分包中頁面進入小程序時，不須要下載主包。當用戶進入普通分包或主包內頁面時，主包纔會被下載。
- 分包預下載:開發者能夠經過配置，在進入小程序某個頁面時，由框架自動預下載可能須要的分包，提高進入後續分包頁面時的啓動速度。
合理使用動態庫
動態庫，是指可被添加到小程序內直接使用的功能組件。因爲動態庫的獨立資源將在邏輯和渲染層分別進行加載，在此過程當中將會加載動態庫的所有代碼（邏輯和樣式），而後解析執行。此時若是引用的動態庫中包含大量未使用的邏輯，致使加載過程當中大量資源的浪費，從而阻塞 initData 的收集時間，進而直接影響到頁面渲染。工具
所以建議開發者合理使用動態庫。性能
合理使用 App.onLaunch
App.onLaunch是進入小程序的第一個生命週期函數，不少開發者會在App.onLaunch中執行一些初始化操做。若是使用不當，會顯著影響首屏顯示速度。所以建議您在使用中注意以下事項：優化
- 避免在 App.onLaunch 中執行耗時很長的任務，儘量將任務推移到頁面顯示完成後執行。
- 減小、避免在 App.onLaunch 中調用一些同步 API。使用異步 API 代替同步，並儘可能減小、延後首頁面顯示非必需的 API 調用。
- 將 App.onLaunch 中的頁面請求放在 Page.onInit 生命週期中
請求主數據
在請求主數據環節，開發者可經過在 onInit 請求首屏主數據、數據前置獲取、數據持久化的方式縮短數據加載時間，從而優化首屏渲染時長。spa
在 onInit 請求首屏主數據
onInit是小程序提供的一種生命週期，執行時機介於 App.onLaunch 和 Page.onLoad 之間。在 setInitData 以後當即執行Page.onInit()，把主數據請求從 Page.onLoad 轉移到 Page.onInit 中，將極大提高小程序的頁面加載性能。
數據前置獲取
經過數據前置獲取，能夠把關鍵頁面的數據放在入口頁面獲取，頁面跳轉相當鍵頁面時，將數據以頁面參數的形式傳輸給落地頁。在一些商業線索類頁面中，用戶進入頁面後將當即看到線索相關信息，無需等待。
數據持久化
數據持久化指從服務端獲取到的數據，經過swan.setStorage方法保存在本地，頁面渲染時直接從本地獲取所需數據的這一行爲。將固定 banner、篩選、導航等低時效性數據存在本地，頁面加載時直接從本地讀取、渲染數據，將大幅減小頁面上的留白時間，提高用戶體驗，下降白屏率。
優化渲染速度
開發者可合理使用自定義組件、合理使用 view 和 text 組件、優化圖片使用方式、按需渲染優化等方式，有效優化渲染層渲染速度。
合理使用自定義組件
開發者能夠將頁面內的功能模塊抽象成自定義組件，在智能小程序的各個頁面中進行使用，提高代碼複用度，節省開發成本。
合理使用 view 和 text 組件
框架默認使用高性能的view和text組件，但開發者在組件上使用一些特定屬性和任一事件時，會退化爲低性能組件。在開發過程當中請謹慎使用animation、style、 dataset、hidden等內容，詳情查看合理使用 view 和 text 組件。
優化圖片使用方式
在智能小程序開發的過程當中，常常須要引入圖片資源。若是使用圖片不當（過多過大的圖片），在加載時會消耗更多的系統資源，從而影響整個頁面的性能，所以作好圖片優化很是重要。開發者可經過下述方式，對圖片的使用進行優化：
- 控制大小
- 開啓圖片懶加載
- 謹慎使用耗費性能的屬性
- 使用漸進式 JPEG 來優化用戶體驗
- 利用體驗評分工具檢測圖片問題
按需渲染優化
在不少業務場景中，小程序渲染的頁面的高度是超過一屏的。但在首次進入頁面時，只需渲染出可視範圍的內容便可。當頁面首次渲染完畢後，再繼續異步渲染剩下的頁面內容。
更多
除上述優化方案外，智能小程序還提供了骨架屏和客戶端性能分析工具、模擬器體驗評兩種性能檢測工具，爲開發者提高性能保駕護航。
骨架屏
小程序骨架屏是指，打開小程序頁面後，在頁面解析和數據加載以前，首先給用戶展現頁面的大概樣式。提早加載頁面的骨架屏，能夠減小用戶的白屏等待時長。開發者工具須要 2.15 及其上版本，基礎庫須要 3.70.53 及其以上版本使用。
客戶端性能分析工具
進入開發版智能小程序，進入右上角更多按鈕，點擊「性能窗口開關「，便可查看各性能面板指標，開發者可根據指標數據有針對性的選擇上述優化方式進行性能優化。
模擬器體驗評分
體驗評分是百度開發者工具推出的一項給智能小程序打分的功能，它會在小程序運行過程當中實時檢查，分析出影響小程序性能和體驗的地方，並給出相應的優化建議。 開發者可在2.23.0及以上版本的開發者工具中，將基礎庫版本設置爲2.0.0以上版本使用。
最後，感謝各位開發者積極投身百度小程序的開發當中，在開發過程當中有任何問題均可以在社區與官方或其餘開發者進行互動，也可將您的意見發送郵件至smartprogramtech@baidu.com，期待您的參與！