小程序模板網(wǎng)

微信小程序的setData

發(fā)布時間:2021-07-09 09:37 所屬欄目:小程序開發(fā)教程

 由于微信小程序誕生于vue.js和react.js之后,所以他們在當(dāng)初設(shè)計代碼架構(gòu)的時候也是借鑒了vue.js和react.js的想法,也遵循的組件化的方式,延用了setData的機(jī)制去把視圖層和邏輯層做一個“中轉(zhuǎn)站”兩邊連接起來。但是這種機(jī)制一直存在性能上的問題,微信小程序也不例外。先看一張圖:

這張圖大體描述了一下setData的工作原理,當(dāng)程序開始觸發(fā)setData操作的時候,先把數(shù)據(jù)做成字符串形式傳遞,同時把轉(zhuǎn)換后的數(shù)據(jù)拼接成js腳本形式,接下來這個js腳本都被2邊提供的evaluateJavascript所實現(xiàn),那為什么要分webview和javascriptCore去執(zhí)行呢?先說一下這2個是干嘛的

 

webview和JavascriptCore

        在微信打開小程序的時候,會先起了2個線程一個是view Thread,一個是AppService Thread, 通俗講前者是視圖層,后者是邏輯層。它們是獨立的,各自職能不一樣,但它們是并行操作的,小程序的頁面展示都是嵌套在webview里面的,

在小程序入口文件app.js里面有一個pages配置項,例如:

pages: [

     'pages/indexBar',

     'pages/friends/friends'

]

這里配置了多少個頁面,小程序都會預(yù)先加載多少個頁面對應(yīng)的webview,這是view Thread所做的操作,同時AppService Thread也是對應(yīng)的頁面做了邏輯層面的加載操作,會根據(jù)小程序的生命周期依次做邏輯操作,這里也會和view Thread有數(shù)據(jù)傳輸交互,下面一張圖可以很詳細(xì)的描述view Thread和AppService Thread同時加載一個頁面的所有過程

在架構(gòu)上,WebView 和 JavascriptCore 都是獨立的模塊,數(shù)據(jù)是不能直接共享的,為了讓數(shù)據(jù)共享,WebView和JavascriptCore都提供了evaluateJavascript來實現(xiàn),(在安卓機(jī)上老早以前提供的不是evaluateJavascript來調(diào)用js操作的,到sdk19以上采用evaluateJavascript方法)

由于有了以上的機(jī)制,造成了setData存在一些性能上的問題,如果頻繁地調(diào)用,WebView和JavascriptCore執(zhí)行并發(fā)多了就會造成用戶體驗卡頓的現(xiàn)象,為了減少性能開銷,建議盡量對setData進(jìn)行合并操作:

1
2
3

this.setData({ one: '1' })
this.setData({ two: '2'})
this.setData({ three: '3' })

修改成:

this.setData({
     one: '1',
     two: '2',
     three: '3',
})

這樣就減少了拼接js腳本的次數(shù),從而提升了性能。

在Taro小程序框架里面更新數(shù)據(jù)時調(diào)用的 setState 為異步方法,自動對同一個事件循環(huán)多次setState調(diào)用,然后進(jìn)行合并處理,還會對數(shù)據(jù)進(jìn)行diff優(yōu)化,自動剔除那些未改變的數(shù)據(jù)。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/27085.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×