微信小程序之?dāng)?shù)據(jù)的同步渲染
結(jié)論: 微信小程序通過(guò)setData方法實(shí)現(xiàn)數(shù)據(jù)的同步渲染，直接修改data無(wú)法實(shí)現(xiàn)同步渲染。
setData工作原理
小程序分為邏輯層和渲染層，而每次邏輯層改變了，要借用Native運(yùn)行。小程序的渲染層和邏輯層由兩個(gè)線程管理：渲染層的界面使用了 WebView 進(jìn)行渲染；邏輯層采用 JsCore 線程運(yùn)行 JS 腳本。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè) WebView 線程，邏輯層和渲染層兩個(gè)線程的通信會(huì)經(jīng)由微信客戶(hù)端 Native 做中轉(zhuǎn)，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由 Native 轉(zhuǎn)發(fā)。
使用setData方法其實(shí)就是將邏輯層的數(shù)據(jù)通過(guò)Native進(jìn)行中轉(zhuǎn)同步到渲染層，所以我們不要重復(fù) setdata, ，但是也要減少數(shù)據(jù)的傳輸量。我們的數(shù)據(jù)傳輸實(shí)際是一次 Javascript 腳本過(guò)程，當(dāng)數(shù)據(jù)量過(guò)大時(shí)會(huì)增加腳本的編譯執(zhí)行時(shí)間，占用 WebView JS 線程。
方法是去除不必要的事件綁定（ WXML 中的 bind 和 catch ），從而減少通信的數(shù)據(jù)量和次數(shù)。
Native
native是使用原生系統(tǒng)內(nèi)核的，相當(dāng)于直接在系統(tǒng)上操作。是我們傳統(tǒng)意義上的軟件，更加穩(wěn)定。
webView
webView是Android內(nèi)置webkit內(nèi)核的高性能瀏覽器,而WebView則是在這個(gè)基礎(chǔ)上進(jìn)行封裝后的一個(gè) 控件,WebView直譯網(wǎng)頁(yè)視圖,我們可以簡(jiǎn)單的看作一個(gè)可以嵌套到界面上的一個(gè)瀏覽器控件！
JsCore
JSCore是WebKit默認(rèn)內(nèi)嵌的JS引擎，之所以說(shuō)是默認(rèn)內(nèi)嵌，是因?yàn)楹芏嗷赪ebKit分支開(kāi)發(fā)的瀏覽器引擎都開(kāi)發(fā)了自家的JS引擎，其中最出名的就是Chrome的V8。這些JS引擎的使命都相同，那就是解釋執(zhí)行JS腳本。而從上面的渲染流程圖我們可以看到，JS和DOM樹(shù)之間存在著互相關(guān)聯(lián)，這是因?yàn)闉g覽器中的JS腳本最主要的功能就是操作DOM樹(shù)，并與之交互。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-503165.html
相比靜態(tài)編譯語(yǔ)言生成語(yǔ)法樹(shù)之后，還需要進(jìn)行鏈接，裝載生成可執(zhí)行文件等操作，解釋型語(yǔ)言在流程上要簡(jiǎn)化很多。這張流程圖右邊畫(huà)框的部分就是JSCore的組成部分：Lexer、Parser、LLInt以及JIT的部分（之所以JIT的部分是用橙色標(biāo)注，是因?yàn)椴⒉皇撬械腏SCore中都有JIT部分）。接下來(lái)我們就搭配整個(gè)工作流程介紹每一部分，它主要分為以下三個(gè)部分：詞法分析、語(yǔ)法分析以及解釋執(zhí)行。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-503165.html
到了這里，關(guān)于微信小程序之?dāng)?shù)據(jù)的同步渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[微信小程序踩坑]微信小程序editor富文本組件渲染字符串時(shí)，內(nèi)部圖片超出大小導(dǎo)致無(wú)法正常渲染或回顯(數(shù)據(jù)傳輸長(zhǎng)度為 3458 KB，存在有性能問(wèn)題！)](https://imgs.yssmx.com/Uploads/2024/02/716301-1.png)
