[發明專利]一種javascript高性能渲染大量數據的方法

在審

• 申請號: 202011576693.0
• 申請日: 2020-12-28
• 公開（公告）號: CN112612457A
• 公開（公告）日: 2021-04-06
• 發明（設計）人: 郭艷芳;馮凱;王元卓
• 申請（專利權）人: 中科院計算技術研究所大數據研究院
• 主分類號: G06F8/30
• 分類號: G06F8/30;G06F8/34
• 代理公司: 鄭州明華專利代理事務所(普通合伙) 41162
• 代理人: 高麗華

1.一種javascript高性能渲染大量數據的方法，其特征在于：包括如下步驟：

步驟1：設置頁面內容的存儲容器，在程序執行過程中，把將要加載的數據存入存儲容器中顯示；

步驟2：定義變量S

獲取數據的總數據源，并總數據源賦值給變量S；

步驟3：計算一屏內可以展示的數據量

定義變量H用來表示視口高度，定義變量h來表示一條數據的高度，在數據充滿屏幕的條件下，計算一屏可以展示的數據量S1，S1=H/h；

步驟4：制定頁面內容存儲規則：

計算展示總數據源所需的屏數N，即N=S/S1；將監聽區域設置在距離視口1屏的位置；

步驟5：按照步驟4中的規則，在總數據源中取Q屏的數據展示到頁面容器中；

步驟6：定義IntersectionObserver實例，指定瀏覽器視口為觀察的viewport，添加實例的observe方法并指定要觀察的dom節點區域;

步驟7：被觀察區域進入視口時觸發回調函數，在回調函數中判斷IntersectionObserverEntry對象的intersectionRatio值，當intersectionRatio大于0%時，新增一屏數據到存儲容器中，并通過實例的observe方法觀察新增的區域；

步驟8：當目標被觀察區域完全移出視口時，再次觸發回調函數，在回調函數中將觀察區域前一屏的數據從內容容器中刪除,避免每次渲染大量數據引起的重排重繪造成的頁面卡頓問題；

步驟9：判斷數據是否加載到底部，如果是，則不再新增，如果否，則跳到步驟7中循環操作。

2.根據權利要求1中所述的javascript高性能渲染大量數據的方法，其特征在于：步驟4中，監聽區域還可以為距離視口2屏的位置。

3.根據權利要求1中所述的javascript高性能渲染大量數據的方法，其特征在于：在步驟5中，初始設置頁面內容的存儲容器中展示2屏，并提取相應的數據展示到頁面容器中。

4.根據權利要求1中所述的javascript高性能渲染大量數據的方法，其特征在于：步驟1所述數據為圖片、文字或者兩者的組合文本。