[發明專利]小程序的界面渲染方法、裝置、電子設備和存儲介質

在審

• 申請號: 201811404210.1
• 申請日: 2018-11-23
• 公開（公告）號: CN109375918A
• 公開（公告）日: 2019-02-22
• 發明（設計）人: 趙峴
• 申請（專利權）人: 天津字節跳動科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/65
• 代理公司: 北京清亦華知識產權代理事務所(普通合伙) 11201
• 代理人: 張潤

本公開提出一種小程序的界面渲染方法、裝置、電子設備和存儲介質，其中，方法包括：通過JavaScript引擎根據用戶界面的歷史頁面數據以及服務端發送的用戶界面的新頁面數據，生成目標頁面數據，并根據目標頁面數據，確定用戶界面的虛擬DOM書中的節點更改數據；將節點更改數據發送給界面渲染組件，以使界面渲染組件根據節點更改數據對用戶界面進行渲染，以得到更新后的用戶界面。由此，在刷新用戶界面時，無需傳輸用戶界面的全部頁面數據，并且，無需由界面渲染組件構建虛擬DOM樹，提高用戶界面的展現效率，進而提高用戶的交互體驗度。

技術領域

本公開涉及計算機技術領域，尤其涉及一種小程序的界面渲染方法、裝置、電子設備和存儲介質。

背景技術

小程序，是指一種基于特定編程語言開發完成，無需下載和安裝，就可以使用的移動端APP。小程序的最大特點是使用便捷，無需手動在移動端的操作系統中安裝，通常小程序依托于大型APP作為載體進行使用。

相關技術中，渲染應用于平臺級App的小程序的用戶界面的一般過程，是由JavaScript 引擎接將用戶界面對應的整個頁面數據通過系統提供的橋接功能發送給頁面渲染WebView 組件，然后，WebView組件根據整個頁面數據生成新的虛擬Dom樹根據新的虛擬Dom樹以及歷史虛擬Dom樹對小程序的用戶界面進行再次渲染。

然而，在實現本申請的過程中發明人發現上述渲染應用于平臺級App的小程序的用戶界面的方式至少存在以下問題：(1)JavaScript引擎與WebView組件之間每次傳輸均是用戶界面的全量數據，傳輸頁面數據耗時較長，在更新用戶界面時，用戶界面的更新時間較長；(2)在渲染用戶界面時，WebView組件需要生成與用戶界面對應的新虛擬Dom樹，并需要新虛擬Dom樹以及歷史虛擬Dom樹的對比來執行刷新頁面DOM的操作。因此，在用戶使用用于平臺級App的小程序的過程中小程序的用戶界面渲染時間較長，展現小程序用戶界面的時間較長，影響了用戶與界面之間的交互，用戶的交互體驗度不理想。

發明內容

本公開提供一種小程序的界面渲染方法、裝置、電子設備和存儲介質，能夠解決JavaScript引擎與WebView組件之間每次傳輸均是用戶界面的全量數據，從而造成用戶界面的更新時間較長的問題。

本公開第一方面實施例提出了一種小程序的界面渲染方法，包括：接收服務端發送的用戶界面的當前頁面數據；獲取上次保存的所述用戶界面的歷史頁面數據；根據所述當前頁面數據和所述歷史頁面數據生成目標頁面數據；根據所述目標頁面數據，確定所述用戶界面的虛擬DOM樹中的節點更改數據；；將所述節點更改數據發送給界面渲染組件，以使所述界面渲染組件根據所述節點更改數據對所述用戶界面進行渲染，以得到更新后的用戶界面。

在本公開的一個實施例中，所述根據所述目標頁面數據，確定所述用戶界面的虛擬 DOM樹中的節點更改數據，包括：根據所述目標頁面數據，生成所述用戶界面的新虛擬DOM樹；獲取上次保存的所述用戶界面的歷史虛擬DOM樹；將所述新虛擬DOM樹和所述歷史虛擬DOM樹進行數據差異比對，以得到所述節點更改數據。

在本公開的一個實施例中，在所述將所述節點更改數據發送給界面渲染組件之后，所述方法還包括：根據所述目標頁面數據更新所述歷史頁面數據；

根據所述新虛擬DOM樹更新所述歷史虛擬DOM樹。

在本公開的一個實施例中，所述當前頁面數據為增量數據時，所述方法還包括：接收所述界面渲染組件發送的刷新用戶界面事件。