[發明專利]一種頁面渲染方法、裝置、設備和存儲介質

有效

• 申請號: 201811063147.X
• 申請日: 2018-09-12
• 公開（公告）號: CN109165364B
• 公開（公告）日: 2021-01-19
• 發明（設計）人: 凌江華
• 申請（專利權）人: 廣州視源電子科技股份有限公司;廣州視睿電子科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 北京品源專利代理有限公司 11332
• 代理人: 孟金喆

本發明實施例公開了一種頁面渲染方法、裝置、設備和存儲介質，該方法包括：獲取頁面的顯示幀率；根據所述顯示幀率確定待渲染頁面中每個渲染層中的元素數量約束值；根據確定的所述元素數量約束值，確定待渲染頁面所包括的元素的層級分配策略，其中，所述層級分配策略包括層數以及每層所包括的元素；根據所述層級分配策略和元素屬性數據，對所述待渲染頁面的渲染層進行渲染并顯示，解決了DOM和Canvas由于各自缺陷帶來的一致性差和實現復雜的問題，以實現兼顧內存占用與渲染速度的平衡點，優化渲染效果和加載速度。

技術領域

本發明實施例涉及網頁頁面渲染技術，尤其涉及一種頁面渲染方法、裝置、設備和存儲介質。

背景技術

常規技術方案中，渲染一個網頁時一般采用瀏覽器提供的文檔對象模型(DOM)技術，而在一些網頁游戲中則會大量地使用畫布(Canvas)渲染。其中，DOM是HTML和XML文檔的編程接口，將web頁面與腳本或程序語言連接起來；畫布(Canvas)元素是HTML5的一部分，允許腳本語言動態渲染位圖像。

發明人在實現本發明的過程中，發現現有技術具有以下技術缺陷：DOM的使用過程中，雖然渲染速度快，但易占用大量內存，且渲染不靈活，而且會因為不同瀏覽器實現的差異，難以保證一致性；Canvas雖然對內存的占用少，但實現復雜，且當頁面渲染區域過大時容易造渲染耗時的問題。

發明內容

本發明實施例提供一種頁面渲染方法、裝置、設備和存儲介質，以實現兼顧內存占用與渲染速度的平衡點，優化渲染效果和加載速度。

第一方面，本發明實施例提供了一種頁面渲染方法，該方法包括：

獲取頁面的顯示幀率；

根據所述顯示幀率確定待渲染頁面中每個渲染層中的元素數量約束值；

根據確定的所述元素數量約束值，確定待渲染頁面所包括的元素的層級分配策略，其中，所述層級分配策略包括層數以及每層所包括的元素；

根據所述層級分配策略和元素屬性數據，對所述待渲染頁面的渲染層進行渲染并顯示。

進一步的，根據所述顯示幀率確定待渲染頁面中每個渲染層中的元素數量約束值包括：

如果所述顯示幀率小于預設幀率值，則根據預設幀率元素映射模型調整待渲染頁面中每個渲染層中的所述元素數量約束值。

進一步的，還包括：

根據設備參數初始化所述元素數量約束值。

進一步的，所述設備參數包括下述至少一種：瀏覽器類型、設備類型和設備分辨率。

進一步的，所述根據確定的所述元素數量約束值，確定待渲染頁面所包括的元素的層級分配策略，包括：

根據待渲染頁面的元素總數量和所述元素數量約束值，確定待渲染頁面包括的渲染層的層數，并按照所述層數，將各所述元素分配至各渲染層；或

將所述待渲染頁面的各所述元素，按照設定規則陸續分配至渲染層，如果任一渲染層所分配的元素數量超出所述元素數量約束值，則新增渲染層。

進一步的，所述根據確定的所述元素數量約束值，確定待渲染頁面所包括的元素的層級分配策略，包括：

獲取所述待渲染頁面包括的各元素對應的元素屬性數據；

根據所述元素屬性數據，確定各所述元素對應的渲染層類型，其中，所述渲染層類型包括DOM和Canvas；

根據所述元素數量約束值，將各所述元素分配至對應所述渲染層類型的渲染層，其中，所述待渲染頁面中的每個渲染層類型對應設置有至少一個渲染層。