html js 大量數據優化

當頁面渲染太多標籤時，會出現卡頓的，典型就是相似table數據太多時，很是卡頓。若是選擇分頁，不必討論，這兒只討論採用滾動的狀況。解決思路很簡單，就是頁面不展現出來的元素，從頁面上刪除掉，最難點在於滾動條的處理，這兒分享一些細節思路，以上下滾動爲例。

上下滾動表格

1. 每一行固定高度，一次性獲取全部數據。
2. 每一行不固定高度，一次性獲取全部數據。
3. 每一行不固定高度，分批獲取數據。

首先，佈局以下：

當只顯示可視區的內容時，overflow的標籤須要刪除掉，可是刪除了以後，滾動條會變化，甚至消失，所以可添加padding-top和padding-bottom，以此模擬內容高度。

第一類，全部數據都能根據計算得到，須要一個scrollTop對應的顯示數據的對照表，當滾動條位置變化時，去對照表種查看須要顯示的數據，以此來渲染。固然不是每一個scrollTop都去生成對照表，只須要某個範圍生成就好了，好比：[{2000：顯示數據}, {5000: 顯示數據}]（表示分別表示 0-2000，2000-5000顯示的數據） 去對比第一個大於scrollTop的數據，獲取其值，就是須要顯示的數據。

* 這兒須要注意的是，顯示數據必須有重複，且重複能佔滿屏幕以上，避免出現空白

第二類，就很差計算了，好比某一格里面內容太多，會令整行高度增長。可採用隱藏標籤（opacity:0），循環渲染每一行，拿到那一行的高度。此種方式簡單，也容易實現，不過計算渲染數據時，保證屏幕不出現空白的計算會複雜一點。隱藏標籤渲染時，使用分批渲染，好比每次渲染10行，使用 requestAnimationFrame，setTimeout或者promise處理一下，不至於卡死。

第三類，只知道當前數據是多少，沒法計算總高度。能夠採起與第二種相似的方式，使用隱藏標籤計算出每一行的高度，最終計算出獲得數據的總高度。當滾動條滾到某個值時，觸發後續數據獲取。同樣的方式，從新計算出總高度。

全部方法都有個前提，就是每一行數據渲染是同步的，有些狀況是先渲染出框，等獲取數據後填充框。這種相似table的佈局，會很是麻煩，須要設置一個回調函數，等全部數據渲染完成後再獲取高度。

其餘優化，若是是vue，可使用Object.freeze() 凍結只須要顯示的數據。