# 運行時性能
## setData
setData?是小程序開發中使用最頻繁的接口,也是最容易引發性能問題的接口。在介紹常見的錯誤用法前,先簡單介紹一下?setData?背后的工作原理。
### 工作原理
小程序的視圖層目前使用 WebView 作為渲染載體,而邏輯層是由獨立的 JavascriptCore 作為運行環境。在架構上,WebView 和 JavascriptCore 都是獨立的模塊,并不具備數據直接共享的通道。當前,視圖層和邏輯層的數據傳輸,實際上通過兩邊提供的?evaluateJavascript?所實現。即用戶傳輸的數據,需要將其轉換為字符串形式傳遞,同時把轉換后的數據內容拼接成一份 JS 腳本,再通過執行 JS 腳本的形式傳遞到兩邊獨立環境。
而?evaluateJavascript?的執行會受很多方面的影響,數據到達視圖層并不是實時的。
### 常見的 setData 操作錯誤
**1\. 頻繁的去 setData**
在我們分析過的一些案例里,部分小程序會非常頻繁(毫秒級)的去setData,其導致了兩個后果:
* Android 下用戶在滑動時會感覺到卡頓,操作反饋延遲嚴重,因為 JS 線程一直在編譯執行渲染,未能及時將用戶操作事件傳遞到邏輯層,邏輯層亦無法及時將操作處理結果及時傳遞到視圖層;
* 渲染有出現延時,由于 WebView 的 JS 線程一直處于忙碌狀態,邏輯層到頁面層的通信耗時上升,視圖層收到的數據消息時距離發出時間已經過去了幾百毫秒,渲染的結果并不實時;
**2\. 每次 setData 都傳遞大量新數據**
由setData的底層實現可知,我們的數據傳輸實際是一次?evaluateJavascript?腳本過程,當數據量過大時會增加腳本的編譯執行時間,占用 WebView JS 線程,
**3\. 后臺態頁面進行 setData**
當頁面進入后臺態(用戶不可見),不應該繼續去進行setData,后臺態頁面的渲染用戶是無法感受的,另外后臺態頁面去setData也會搶占前臺頁面的執行。
## 圖片資源
目前圖片資源的主要性能問題在于大圖片和長列表圖片上,這兩種情況都有可能導致 iOS 客戶端內存占用上升,從而觸發系統回收小程序頁面。
### 圖片對內存的影響
在 iOS 上,小程序的頁面是由多個 WKWebView 組成的,在系統內存緊張時,會回收掉一部分 WKWebView。從過去我們分析的案例來看,大圖片和長列表圖片的使用會引起 WKWebView 的回收。
### 圖片對頁面切換的影響
除了內存問題外,大圖片也會造成頁面切換的卡頓。我們分析過的案例中,有一部分小程序會在頁面中引用大圖片,在頁面后退切換中會出現掉幀卡頓的情況。
當前我們建議開發者盡量減少使用大圖片資源。
- 惠惠軟件-開發自助學習系統
- 一.微信公眾號(服務號)申請流程
- 二.申請所需提前準備資料
- 三.認證微信公眾號:申請微信小程序流程
- 四.微信小程序安裝和開發環境
- 五.微信小程序如何上傳、提交審核、發布操作
- 六.微信小程序開發教程手冊
- 0.1微信小程序 小程序簡介
- 0.2微信小程序 開始第一步
- 0.3微信小程序 小程序代碼構成
- 0.4微信小程序 小程序宿主環境
- 0.5微信小程序 小程序協同工作和發布
- 0.6微信小程序 目錄結構
- 0.7微信小程序 全局配置
- 0.8微信小程序 頁面配置
- 0.9微信小程序 sitemap配置
- 0.10微信小程序 場景值
- 0.11微信小程序 注冊小程序
- 0.12微信小程序 注冊頁面
- 0.13微信小程序 頁面生命周期
- 0.14微信小程序 頁面路由
- 0.15微信小程序 模塊化
- 0.16微信小程序 API
- 0.17微信小程序 運行環境
- 0.18微信小程序 JavaScript支持情況
- 0.19微信小程序 運行機制
- 0.20微信小程序 更新機制
- 0.21微信小程序 廣告·Banner 廣告
- 0.22微信小程序 安全指引·開發原則與注意事項
- 0.23微信小程序 調試
- 0.24微信小程序 啟動性能
- 0.25微信小程序 運行時性能
- 0.26微信小程序 性能分析工具
- 0.27微信小程序 體驗評分
- 八.小程序的美工
- 8.1圖片大小
- 8.2顏色代碼
- 8.3小程序的美工技巧
- 九.微信小程序-定制開發
- 十.微信支付申請流程
- 十一.小程序支付對接流程
- 十二.微信小程序使用中常見問題匯總
- 十二.小程序開發中遇到的問題—匯總
- 十四.小程序問題及解決
- 十五.網站開發定制
- 1.開發定制流程
- 2.搭建網站的過程
- 3.做網站基本費用
- 4.服務器選什么系統更好?
- 十六.常用工具、軟件網站推薦