天天看點

前端技術分享:小程式雙線程架構

如今我們每個人都是小程式的使用者,小到日常的健康碼,大到各種政務事項辦理。究其因,對于使用者來講小程式無需下載下傳,用完即走而且其具備輕量、流暢的使用體驗;對于開發者來講便捷簡單的開發流程,學習的門檻極低,這也是小程式能夠逐漸受到廣大使用者和開發者的認可和歡迎的原因。

與H5技術相比,為什麼小程式能夠支援起足夠優秀的性能呢?其背後的技術邏輯是什麼?

小程式特殊的雙線程架構

我們都知道,傳統 Web 的架構模型是單線程架構,其渲染線程和腳本線程是互斥的,這也就是說為什麼長時間的腳本運作可能會使頁面失去響。

而小程式能夠具備更卓越使用者體驗的關鍵在于起架構模型有别于傳統 Web,小程式為雙線程架構,其渲染線程和腳本線程是分開運作的。渲染層的界面使用了 WebView 進行渲染,邏輯層采用 JsCore 線程運作 JS 腳本。

前端技術分享:小程式雙線程架構

邏輯層:建立一個單獨的線程去執行 JavaScript,在這個環境下執行的都是有關小程式業務邏輯的代碼,隻能夠運作 JavaScript 的沙箱環境,不提供 DOM 操作相關的 API,是以不能直接操作 UI,隻能夠通過 setData更新資料的方式異步更新 UI 。

渲染層:界面渲染相關的任務全都在 WebView 線程裡執行,通過邏輯層代碼去控制渲染哪些界面。一個小程式存在多個界面,是以渲染層存在多個 WebView 線程。

雙線程具備的優勢

1、對性能具有明顯的提升

回想一下,在我們進行 Web 開發的時候,渲染程序和邏輯進行是互斥的,這是為了防止在渲染過程中,我們使用js 對 dom 進行操作,造成頁面紊亂甚至崩潰。現在我們使用雙線程來進行管理小程式,就不存在 js 堵塞渲染的問題,雙線程同時運作,提升性能。

2、使用者隐私資料安全管控能力提升

我們都知道基于 Web 技術來渲染小程式,是存在一些不可控因素和安全風險的。因為 Web 技術非常靈活開放,我們可以使用 Javascript 去任意地控制頁面的跳轉或者改變頁面上的任何内容,Javascript 還可以通過操作 DOM,直接擷取小程式内部的一些敏感資料,比如使用者資訊等等,那麼小程式将毫無安全可言。

雙線程架構下,不允許開發者随意操作 BOM 和 DOM,這對使用者的隐私資料具有一定的保護作用,安全水準進一步提升。

如何在移動研發中發揮小程式雙線程的價值

時至今日,移動研發中越來越多産品格外重視使用者體驗的大背景下,小程式也成為重要業務承載利器。除了在微信、支付寶等平台上架我們自有開發的小程式外,「原生+小程式」的開發模式也成為移動研發的另一選擇。可以讓自身的 App 像微信、支付寶一樣運作自有的小程式。

小程式容器技術能夠幫助企業或個人開發者讓自有的 App 具備小程式運作能力,隻需要通過內建 FinClip SDK 即能快速具備小程式能力。

而且 FinClip SDK 極其輕量,應用在內建後SDK的體積僅僅增大了不到 3MB。同時,FinClip 支援微信小程式文法 WXML,也就是說微信小程式代碼可以直接在 FinClip中 複用,無需再二次開發,體驗與微信端保持一緻。

前端技術分享:小程式雙線程架構

繼續閱讀