[發明專利]前端頁面加載方法、裝置、控制器及介質

在審

• 申請號: 201811591715.3
• 申請日: 2018-12-25
• 公開（公告）號: CN110244993A
• 公開（公告）日: 2019-09-17
• 發明（設計）人: 鄧本燁
• 申請（專利權）人: 蔚來汽車有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F9/445;G06F16/958
• 代理公司: 北京中原華和知識產權代理有限責任公司 11019
• 代理人: 丁慧玲;張琳

1.一種前端頁面加載方法，其特征在于，包括:

獲取前端頁面可視區域的高度；

根據所述可視區域的高度確定所述前端頁面包括的、與所述可視區域對應的組件高度；

根據所述組件高度和預設的所述組件對應的每條數據的高度獲取當前可視區域的數據量；

渲染所述當前可視區域的數據量并加載前端頁面。

2.根據權利要求1所述的前端頁面加載方法，其特征在于，

所述獲取前端頁面可視區域的高度，包括以下步驟：

監聽前端頁面的調整大小事件，若頁面窗口大小發生變化，則自動獲取當前前端頁面可視區域的高度。

3.根據權利要求1所述的前端頁面加載方法，其特征在于，

所述組件包括有層級的組件和無層級的組件，所述有層級的組件包括樹形組件，所述無層級的組件包括表格組件；

所述組件高度配置為百分比高度。

4.根據權利要求1所述的前端頁面加載方法，其特征在于，

根據所述組件高度和預設的所述組件對應的每條數據的高度獲取當前可視區域的數據量,包括以下步驟:

通過懶加載的方式獲取所述當前可視區域的數據量。

5.根據權利要求1-4中任意一項所述的前端頁面加載方法，其特征在于，

所述方法還包括：

監聽所述組件的滾動事件；

當所述組件內容發生滾動時，獲取滾動偏移量；

根據所述滾動偏移量渲染所述當前可視區域的數據量并加載前端頁面。

6.根據權利要求5所述的前端頁面加載方法，其特征在于，

所述根據所述滾動偏移量渲染所述當前可視區域的數據量并加載前端頁面，包括以下步驟：

根據所述滾動偏移量和所述預設的所述組件對應的每條數據的高度判斷當前可視區域的數據是否需要滾動；

若需要，則根據所述滾動偏移量判斷滾動方向，所述滾動方向包括向上和向下；

根據所述滾動偏移量，按照所述滾動方向將當前可視區域的數據進行切割。

7.根據權利要求6所述的前端頁面加載方法，其特征在于，

當進行切割時，以所述當前可視覺區域的數據量為單位，以數據緩存中的索引位置為切割位置進行切割，每次切割數據時對應更新所述索引位置。

8.根據權利要求1所述的前端頁面加載方法，其特征在于，

所述方法還包括，根據組件的生命周期對所述前端頁面的回收事件進行監聽，并清除對應的緩存數據。

9.一種前端頁面加載裝置，其特征在于，包括:

可視區域高度獲取模塊，配置為獲取前端頁面可視區域的高度；

組件高度確定模塊，配置為根據所述可視區域的高度確定所述前端頁面包括的、與所述可視區域對應的組件高度；

數據量獲取模塊，配置為根據所述組件高度和預設的所述組件對應的每條數據的高度獲取當前可視區域的數據量；

頁面加載模塊，配置為渲染所述當前可視區域的數據量并加載前端頁面。

10.根據權利要求9所述的前端頁面加載裝置，其特征在于，

所述可視區域高度獲取模塊還配置為監聽前端頁面的調整大小事件，若頁面窗口大小發生變化，則自動獲取當前前端頁面可視區域的高度。

11.根據權利要求9所述的前端頁面加載裝置，其特征在于，

所述組件包括有層級的組件和無層級的組件，所述有層級的組件包括樹形組件，所述無層級的組件包括表格組件；

所述組件高度配置為百分比高度。

12.根據權利要求9所述的前端頁面加載裝置，其特征在于，

所述數據量獲取模塊還用于通過懶加載的方式獲取所述當前可視區域的數據量。