如何減少<table>包含 20000 行的加載時間？
滾動時頁面很重，顯示表格的其余部分需要 4/5 秒。
我不知道如何做到這一點，這就是為什么我沒有放代碼。
uj5u.com熱心網友回復：
對于此類問題，解決方案基本上是延遲加載資料。
我會建議以下 2 個選項 -->
將分頁添加到表格中。所以基本上你只會加載幾條記錄，其余的將根據用戶點擊的頁面加載。
偽代碼：-
//Step 1 :- 將資料分成塊，所以如果你想分成 3 頁，每頁將有 20000/3 條記錄。
//第2步：-根據點擊的頁面，您可以顯示分割塊中的記錄。將無限滾動添加到表格中，以便向用戶顯示一些適合螢屏高度的記錄，并在用戶滾動時加載額外的資料。您還可以預加載一些額外的資料，以便用戶平滑滾動。
偽代碼：-
//第1步：- 獲取視口高度（用戶可以查看的螢屏高度部分）并僅加載適合視口高度的記錄數量。您也可以加載一些額外的記錄。因此，假設用戶一次只能在螢屏視圖上查看 40 條記錄，那么您最初只會在螢屏上加載 45 條記錄。
//第 2 步：- 然后接下來您可以收聽滾動事件并將接下來的 45 條記錄/行添加到表格中，等等，隨著用戶滾動更多。
用于監聽滾動事件并加載更多資料的代碼-->
const div = document.querySelector("#div-container-for-table");
div.addEventListener("scroll", () => {
if (div.scrollTop div.clientHeight >= div.scrollHeight) loadMore();
});
無限滾動
示例 分頁示例
我建議使用第二個選項，因為它更用戶友好并且不需要單擊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338072.html
標籤：javascript 阿贾克斯