<menuitem id="59ff9"></menuitem>
<listing id="59ff9"><cite id="59ff9"></cite></listing>
<cite id="59ff9"></cite>
<cite id="59ff9"><video id="59ff9"></video></cite>
<ins id="59ff9"></ins>
<cite id="59ff9"></cite>
<var id="59ff9"><video id="59ff9"><menuitem id="59ff9"></menuitem></video></var>
<cite id="59ff9"><video id="59ff9"><thead id="59ff9"></thead></video></cite>
<var id="59ff9"></var>
<var id="59ff9"><video id="59ff9"></video></var>
<var id="59ff9"></var>
<cite id="59ff9"></cite>
<menuitem id="59ff9"></menuitem>
<var id="59ff9"></var>
歡迎光臨微信群分享網,本站主推微信文章素材,微信紅包群,公眾號大全,微信二維碼查詢發布平臺
微信原創文章發布平臺

您現在的位置: 首頁 > 微信文章排行榜 > 微信學院 > 微信小程序之性能優化(一)

微信小程序之性能優化(一)

作者微信號:maxiaoding2045   來源:萬能的小馬丁 的公眾號  熱度:525  時間:2020-07-22 20:37:30

這是我的第52篇文章,感謝你的閱讀啟動性能優化:1、小程序代碼包優化承載更多功能:小程序單個代碼包的體積上限為2M,使用分包可以提升小程序代碼包總體積上限,承載更多的功能與服

這是我的第52篇文章,感謝你的閱讀.2

微信小程序之性能優化(一)

大家好,我是小馬丁。

今天主要想分享一下關于小程序的優化記錄,主要為:啟動性能優化、體驗評分、即時反饋。

以下記錄,歡迎查閱:

啟動性能優化:1、小程序代碼包優化

代碼包優化的核心手段是降低代碼包大小,代碼包大小直接影響了下載耗時,影響用戶啟動小程序時的體驗。

1.1、分包加載

分包加載具有以下優勢:

承載更多功能:小程序單個代碼包的體積上限為 2M,使用分包可以提升小程序代碼包總體積上限,承載更多的功能與服務。

降低代碼包下載耗時:使用分包后可以顯著啟動時需要下載的代碼包大小,在不影響功能正常使用的前提下明顯提升啟動耗時。

降低開發者代碼注入耗時:小程序啟動時會一次性注入全部的開發者代碼,使用分包后可以降低注入的代碼量,從而降低注入耗時。

降低頁面渲染耗時

分包預下載

在使用「分包加載」后,雖然能夠顯著提升小程序的啟動速度,但是當用戶在使用小程序過程中跳轉到分包內頁面時,需要等待分包下載完成后才能進入頁面,造成頁面切換的延遲,影響小程序的使用體驗。分包預下載便是為了解決首次進入分包頁面時的延遲問題而設計的。

獨立分包

但小程序中的某些場景(如廣告頁、活動頁、支付頁等),通常功能不是很復雜且相對獨立,對啟動性能有很高的要求。獨立分包可以獨立于主包和其他分包運行。從獨立分包中頁面進入小程序時,不需要下載主包。建議開發者將部分對啟動性能要求很高的頁面放到特殊的獨立分包中。

獨立分包和分包預下載可以配合使用,獲得更好的效果。詳情:獨立分包與分包預下載教程

代碼重構和優化

通過代碼重構,降低代碼冗余。在使用如 Webpack 等打包工具時,要盡量利用 tree-shaking 等特性去除冗余代碼,也要注意防止打包時引入不需要的庫和依賴。

及時清理沒有使用到的代碼和資源

刪除不使用的代碼、和資源(圖片、音頻等)

使用懶注入

自基礎庫版本 2.11.1 起,小程序支持僅注入當前頁面需要的自定義組件和當前頁面代碼,以降低小程序的啟動時間和運行時內存。

在 app.json 中配置:

"lazyCodeLoading":"requiredComponents",

PS:添加這項配置后,未使用到的代碼文件將不被執行

性能分析

小程序搜索:小程序助手

性能分析 借助開發者工具的Audits使用流程 體驗評分

體驗評分是一項給小程序的體驗好壞打分的功能,它會在小程序運行過程中實時檢查,分析出一些可能導致體驗不好的地方,并且定位出哪里有問題,以及給出一些優化建議。

打開開發者工具,在詳情里切換基礎庫到 2.2.0 或以上版本。

在調試器區域切換到 Audits 面板。

點擊”開始“按鈕,然后自行操作小程序界面,運行過的頁面就會被“體驗評分”檢測到。

運行 運行結果 性能指數

主要存在以下問題:

存在圖片太大而有效顯示區域較小

存在渲染界面的耗時過長的情況

存在可能沒有對請求進行緩存的情況

存在請求的耗時太長

存在短時間內發起太多的圖片請求

然后根據給出的評估,進行一項一項的優化處理即可,比如圖片的大小尺寸問題、渲染界面加載過長、緩存等等。

代碼包內的圖片一般應只包含一些體積較小的圖標

聲音、視頻等其他類型的資源應盡量避免放到代碼包中

其他及時反饋

及時的對需要用戶等待的交互操作進行反饋,避免用戶以為小程序卡了,無響應

總結

小程序啟動加載性能

控制代碼包的大小

分包加載(分包預下載、獨立分包)

代碼重構和優化

使用懶注入

小程序性能分析

借助體驗評分進行優化

其他

及時反饋

以上就是今天分享的全部內容,最后,感謝你的閱讀。

1.群分享網遵循行業規范,任何轉載的稿件都會明確標注作者和來源;2.群分享的原創文章,請轉載時注明"來源:qunfenxiang.net,不尊重原創的行為微信群網或將追究責任;3.作者投稿可能會經本網編輯修改或補充。

购彩大厅360彩票