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

在審

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

本發明屬于大數據處理技術領域，具體涉及一種javascript高性能渲染大量數據的方法；通過監聽窗口視圖的可見區域，在頁面滑動的過程中，當數據將要進入視圖時開始加載，將已經滑走的數據進行刪除，每次展示指定數量的的數據，既避免了一次性加載大量數據或著通過計時器間歇性加載造成的頁面卡頓，同時又無需通過頻繁計算來判斷監聽元素是否進入設備的可視區域，從而提升了數據處理的性能，大大的提高數據渲染的效率。

技術領域

本發明屬于大數據處理技術領域，具體涉及一種javascript高性能渲染大量數據的方法。

背景技術

在前端頁面插入大量的數據，最簡單粗暴的做法是一次性渲染，對十萬條數據進行循環操作，每條數據僅僅只有圖片和文字的簡單組合，就要花費17s的時間，顯然這種長時間的頁面卡頓對于用戶來說極其不友好。

現有的處理大數據的做法也有使用setTimeout進行分批渲染，將分批任務放在回調函數中執行，雖然解決了頁面卡頓問題，但是快速滾動頁面時，會出現閃屏或白屏現象。在setTimeout中對dom進行操作，必須要等到屏幕下次繪制時才能更新到屏幕上，如果兩者步調不一致，就可能導致其中某一幀的操作被跨越過去，而直接更新到下一幀的元素，從而導致丟幀現象。與setTimeout相比，requestAnimationFrame最大的優勢是由系統來決定執行時機。它能保證回調函數在屏幕每一次的刷新間隔中只被執行一次，這樣就不會引起丟幀現象。

但是上述的時間分片方法是在加載大量簡單dom的前提下，只是解決了如何渲染不卡頓的問題。在實際業務中，對于復雜的數據，每次修改dom都會引起十萬條數據的重排重繪，這樣性能方面肯定也會有問題。

發明內容

針對現有設備存在的缺陷和問題，本發明提供一種，有效的解決了現有設備中存在的一次性加載大量數據或著通過計時器間歇性加載造成的頁面卡頓、處理效率低的問題。

本發明解決其技術問題所采用的方案是：一種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中循環操作。

進一步的，步驟4中，監聽區域還可以為距離視口2屏的位置。

進一步的，在步驟5中，初始設置頁面內容的存儲容器中展示2屏，并提取相應的數據展示到頁面容器中。