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

在審

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

本發明涉及一種前端頁面加載方法、裝置、控制器及介質，所述方法包括獲取前端頁面可視區域的高度；根據所述可視區域的高度確定所述前端頁面包括的、與所述可視區域對應的組件高度；根據所述組件高度和預設的所述組件對應的每條數據的高度獲取當前可視區域的數據量；渲染所述當前可視區域的數據量并加載前端頁面。本發明通過局部渲染提高了前端頁面的加載速度，且避免了加載完成后的頁面卡頓，提升了用戶體驗。

技術領域

本發明涉及計算機技術領域，尤其涉及一種前端頁面加載方法、裝置、控制器及介質。

背景技術

在前端頁面加載加載過程中，前端頁面所支持的最大渲染DOM(Document ObjectModel，文檔對象模型，簡稱DOM)數量有限，在組件渲染數量過大時，用戶通常會遇到頁面初始化加載時間長、且渲染成功后頁面卡頓、無法滾動等問題，用戶體驗非常差。

現有技術中，在面臨這種情況時，可在加載大量前端資源文件時進行分頁渲染，以減少用戶的等待時間，但是，由于還是對頁面數據進行全局渲染，因此頁面整體加載時間并沒有明顯減少，用戶仍然能看到頁面正在加載中。此外，對于有層級結構的組件，無法使用分頁渲染，例如，汽車領域的汽車零件信息的樹形組件展示就無法使用分頁渲染來減少頁面加載時間。因此，如何提高前端頁面加載速度，避免頁面卡頓成為亟待解決的技術問題。

發明內容

本發明目的在于，提供一種前端頁面加載方法、裝置、控制器及介質，通過局部渲染提高了前端頁面的加載速度，且避免了加載完成后的頁面卡頓，提升了用戶體驗。

為了解決上述技術問題，根據本發明第一實施例，提供了一種前端頁面加載方法，包括:

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

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

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

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

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

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

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

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

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

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

進一步的，所述方法還包括：

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

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

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

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

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

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

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

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