devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS 原生自动加载的大数据表格探索

作者：繁依Fanyi0 | 2024-05-16 16:41:57

赞

踩

JS 原生自动加载的大数据表格探索

目录

尝试1.使用table初级实现

动态加载关键代码

效果

尝试2.使用绝对定位优化表格

效果

尝试3.绝对定位+scroll动态加载优化尝试

效果

尝试4. table + 绝对定位 + scroll动态加载

效果

参考资料

大数据表格，就是能够没有分页的情况下，一次展示上万条数据的表格。

若直接渲染上万条数据的，页面会一直卡着，直到浏览器渲染完成后才显示且响应用户操作。

比如加载10000条数据，效果

加载10000条数据效果

那么如何做到打开、刷新大数据表格页面的时候能够马上显示用户可见部分的数据，剩下数据在后台慢慢加载呢。

但是理想是美好的，现实是骨感的。

这里就出现了矛盾，由于浏览器渲染线程与JS线程是互斥的，也就是说在渲染页面的时候js就停止执行，js执行时，页面停止渲染。[参考资料1]

所以在web前端中，难以将页面渲染放到“后台”执行（JS的话可以通过Web Workers 另启起一个线程进行复杂计算）

即便是这样，我想到了cpu时间片的概念，打算少量多次进行渲染表格—让出js线程—渲染表格—让出线程—...

下面动手实践：

尝试1.使用table初级实现

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Large Table</title>
  7.   <style>
  8.     #table{
  9.       border-collapse: collapse;
  10.       table-layout: fixed;
  11.       width: 100%;
  12.     }
  13.     #table tr:hover{
  14.       background-color: #bbb;
  15.     }
  16.     #table td {
  17.       border: 1px solid #ddd;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22.   <div style="height: 200px;overflow:auto;">
  23.     <table id="table" >
  24.       <colgroup>
  25.         <col style="background: #ddd;">
  26.         <col style="font-weight: bold;">
  27.       </colgroup>
  28.     </table>
  29.   </div>
  30.   <h2 id="loading"></h2>
  31. </body>
  32. <script>
  33.   console.time()
  34.   const ROW_TEMP = [{ type: 'id' }, '王小虎', '28', '170cm', '80kg', 'xx省xxxx有限公司', { type: 'button', label: '详情' }];
  35.   const ROWS = 20000;
  36.   let table = document.getElementById('table');
  37.   let fgmt = document.createDocumentFragment();
  38.   for (let i = 1; i <= ROWS; i++) { // row
  39.     let tr = document.createElement('tr')
  40.     for (let j = 0; j < ROW_TEMP.length; j++) { // column
  41.       let item = ROW_TEMP[j];
  42.       let td = document.createElement('td');
  43.       td.className = 'item';
  44.       if (typeof item == 'string') {
  45.         td.textContent = ROW_TEMP[j];
  46.       } else {
  47.         if (item.type == 'id') {
  48.           td.textContent = i;
  49.         } else if (item.type == 'button') {
  50.           let btn = document.createElement('button');
  51.           btn.textContent = item.label;
  52.           td.append(btn);
  53.         }
  54.       }
  55.       tr.appendChild(td);
  56.     }
  57.     fgmt.appendChild(tr);
  58.  
  59.     if( !(i % 10) ){ // 10条数据加载一次
  60.       let tmp = fgmt;
  61.       setTimeout(() => {
  62.         table.appendChild(tmp);
  63.         document.querySelector('#loading').textContent = `loading...(${Math.ceil(i/ROWS*100)}%)`;
  64.       }, i*3);
  65.       fgmt = document.createDocumentFragment();
  66.     }
  67.   }
  68.   console.timeEnd()
  69. </script>
  70. </html>

动态加载关键代码

  1. if(!(i % 10)){ // 10条数据加载一次
  2.    let tmp = fgmt;
  3.    setTimeout(() => {
  4.      table.appendChild(tmp);
  5.       document.querySelector('#loading').textContent = `loading...(${Math.ceil(i/ROWS*100)}%)`;
  6.     }, i*3);
  7.     fgmt = document.createDocumentFragment();
  8. }

加载10条数据后延时，延时的地方为3倍的 i，控制上一次加载和下一次加载间间隔为10 × 3 = 30 ms

是为了确保在30ms期间内能够把本次（10条）数据加载完。且有剩下的时间会交给js线程，使浏览器相应用户行为，防止页面卡住。

由于涉及到大量元素的新增和append，这里使用了DocumentFragement，来将保存创建的元素片段，之后一次性加到table中，据说能在一定程度上提升性能。

table添加子元素的时候会导致浏览器reflow（重排），因为table列宽会根据该列撑开的最大宽度调整。

因此这里CSS设置了table-layout:fixed 使每列的宽度固定，据说可以提升性能。

效果

效果图

这里看到，表中的数据是在不停增加的，右侧滚动条位置也在变化。滚动卡顿可接受。

但是加载完成后又流畅了，如果不介意的话，就可以直接用了。

加载完成后又流畅

尝试2.使用绝对定位优化表格

那么根据页面优化原则，减少浏览器reflow(重排)，使用position:absolute定位的元素不会导致浏览器reflow。

那么自行用div布局实现一下表格，每行内容使用flex布局，行的位置使用absolute绝对定位计算出来

表格在渲染前，先计算总高度，再用一个元素来占位高度(.table-height元素)，这样在加载表格的时候，右侧滚动条就不会乱动了。

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Large Table</title>
  7.   <style>
  8.     .table {
  9.       position: relative;
  10.       border-top: 1px solid #ddd;
  11.     }
  12.  
  13.     .table .row {
  14.       box-sizing: border-box;
  15.       width: 100%;
  16.       display: flex;
  17.       position: absolute;
  18.       height: 30px;
  19.       line-height: 30px;
  20.     }
  21.  
  22.     .table-height {
  23.       width: 1px;
  24.       background: #ddd;
  25.     }
  26.  
  27.     .table .row .item {
  28.       overflow: hidden;
  29.       text-overflow: ellipsis;
  30.       flex-grow: 1;
  31.       width: 100px;
  32.       border-right: 1px solid #ddd;
  33.       border-bottom: 1px solid #ddd;
  34.     }
  35.   </style>
  36. </head>
  37.  
  38. <body>
  39.   <div id="tableContent" style="height: 200px;overflow:auto;">
  40.     <div class="table" id="table">
  41.       <div class="table-height"></div>
  42.     </div>
  43.     </table>
  44.   </div>
  45.   <h2 id="loading"></h2>
  46. </body>
  47.  
  48. <script>
  49.   console.time()
  50.   const LINE_HEIGHT = 30;
  51.   const ROWS = 20000;
  52.   const COLS = 10;
  53.   const DATA_STEP = 200;
  54.   const ROW_TEMP = [{ type: 'id' }, '王小虎', '28', '170cm', '80kg', 'xx省xxxx有限公司', { type: 'button', label: '详情' }];
  55.  
  56.   let table = document.getElementById('table');
  57.   let fgmt = document.createDocumentFragment();
  58.   document.querySelector('.table-height').style = 'height:' + LINE_HEIGHT * ROWS + 'px';
  59.   for (let i = 1; i <= ROWS; i++) { // row
  60.     let tr = document.createElement('div');
  61.     tr.className = 'row';
  62.     tr.style.top = (i - 1) * LINE_HEIGHT + 'px';
  63.  
  64.     for (let j = 0; j < ROW_TEMP.length; j++) { // column
  65.       let item = ROW_TEMP[j];
  66.       let td = document.createElement('div');
  67.       td.className = 'item';
  68.       if (typeof item == 'string') {
  69.         td.textContent = ROW_TEMP[j];
  70.       } else {
  71.         if (item.type == 'id') {
  72.           td.textContent = i;
  73.         } else if (item.type == 'button') {
  74.           let btn = document.createElement('button');
  75.           btn.textContent = item.label;
  76.           td.append(btn);
  77.         }
  78.       }
  79.       tr.appendChild(td);
  80.     }
  81.  
  82.     fgmt.appendChild(tr);
  83.     if (ROWS >= DATA_STEP && !(i % DATA_STEP)) { // 多少条数据加载一次
  84.       let tmp = fgmt;
  85.       setTimeout(() => {
  86.         table.appendChild(tmp);
  87.         document.querySelector('#loading').textContent = `loading...(${Math.round(i / ROWS * 100)}%)`;
  88.       }, i * 2); // 保证让出线程时间片
  89.       fgmt = document.createDocumentFragment(); // 清空
  90.     }
  91.     if (ROWS < DATA_STEP) {
  92.       table.appendChild(fgmt);
  93.     }
  94.   }
  95.   console.timeEnd()
  96. </script>
  97.  
  98. </html>

效果

效果图

 可以看到刚开始加载的时候还是很流畅的，随着数据增多，滚动也变得卡了起来。且在加载中，下面未加载的数据都是空白，用户体验相对差一些(即使做了加载进度百分比提示)

问题是这个方法在表格加载完成后，也巨卡。

加载我完成后

那么能不能用懒加载的形式加载数据呢，比如我滚动到哪个位置，哪里的数据就开始加载，继续尝试

尝试3.绝对定位+scroll动态加载优化尝试

正是使用了绝对定位自己实现了表格，所以懒加载可以轻易实现。否则普通table实现懒加载或需要其他特殊方式。

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Large Table2</title>
  7.   <style>
  8.     .table {
  9.       position: relative;
  10.       border-top: 1px solid #ddd;
  11.     }
  12.     .table .row {
  13.       box-sizing: border-box;
  14.       width: 100%;
  15.       display: flex;
  16.       position: absolute;
  17.       height: 30px;
  18.       line-height: 30px;
  19.     }
  20.     /*高度占位元素*/
  21.     .table-height {
  22.       width: 1px;
  23.       background: #ddd;
  24.     }
  25.  
  26.     .table .row:hover {
  27.       background: #ddd;
  28.     }
  29.     .table .row .item {
  30.       overflow: hidden;
  31.       text-overflow: ellipsis;
  32.       flex-grow: 1;
  33.       width: 100px;
  34.       border-right: 1px solid #ddd;
  35.       border-bottom: 1px solid #ddd;
  36.     }
  37.   </style>
  38. </head>
  39.  
  40. <body>
  41.   <div id="tableContent" style="height: 200px;overflow:auto;">
  42.     <div class="table" id="table">
  43.       <!--高度占位元素-->
  44.       <div class="table-height"></div>
  45.     </div>
  46.     </table>
  47.   </div>
  48. </body>
  49. <script>
  50.   console.time()
  51.   const LINE_HEIGHT = 30;
  52.   const PAGE_SIZE = 100;
  53.   const ROWS = 50000;
  54.   const COLS = 10;
  55.   const DATA_STEP = 200;
  56.   const PRELOAD_PAGES = 2; // 预加载页数
  57.   const ROW_TEMP = [{ type: 'id' }, '王小虎', '28', '170cm', '80kg', '浙江省杭州市xxxxxx有限公司', { type: 'button', label: '详情' }];
  58.   const LOADED_INDEX = new Set(); // 存已经加载的页
  59.   const TOTAL_PAGES = Math.floor(ROWS / PAGE_SIZE); // 总页数
  60.  
  61.   let tableContent = document.querySelector("#tableContent");
  62.   let table = document.getElementById('table');
  63.   document.querySelector('.table-height').style = 'height:' + LINE_HEIGHT * ROWS + 'px';
  64.  
  65.   /**
  66.    * 找到未加载的页 
  67.    */
  68.   function findUnloadPage(pageIndex) {
  69.     let arr = [];
  70.     for (let i = pageIndex; i <= pageIndex + PRELOAD_PAGES && i < TOTAL_PAGES; i++) {
  71.       if (!LOADED_INDEX.has(i)) arr.push(i);
  72.     }
  73.     return arr;
  74.   }
  75.   /**
  76.    * 从第几条数据开始加载
  77.    * @param startIndex 开始加载的数据index（通过scrollTop/height得出
  78.     */
  79.   function loadPage(pageIndex) {
  80.     if (pageIndex > TOTAL_PAGES) return;
  81.     let unLoadedPages = findUnloadPage(pageIndex);
  82.     if (!unLoadedPages.length) return;
  83.  
  84.     unLoadedPages.forEach((unLoadedPage) => {
  85.       let start = unLoadedPage * PAGE_SIZE;
  86.       let end = (unLoadedPage + 1) * PAGE_SIZE;
  87.       LOADED_INDEX.add(unLoadedPage); // 记录已加载的
  88.       let fgmt = loadRowsRange(start, end);
  89.       table.appendChild(fgmt);
  90.     })
  91.   }
  92.  
  93.   /**
  94.    * 加载数据区间
  95.    * @param {Number} start 开始index
  96.    * @param {Number} end   结束index
  97.    * @return {DocumentFragement}
  98.    */
  99.   function loadRowsRange(start, end) {
  100.     let fgmt = document.createDocumentFragment();
  101.     for (let i = start; i < end; i++) { // row
  102.       let row = document.createElement('div');
  103.       row.className = 'row';
  104.       row.style.top = i * LINE_HEIGHT + 'px';
  105.  
  106.       for (let j = 0; j < ROW_TEMP.length; j++) { // column
  107.         let item = ROW_TEMP[j];
  108.         let td = document.createElement('div');
  109.         td.className = 'item';
  110.         if (typeof item == 'string') {
  111.           td.textContent = ROW_TEMP[j];
  112.         } else {
  113.           if (item.type == 'id') {
  114.             td.textContent = i;
  115.           } else if (item.type == 'button') {
  116.             let btn = document.createElement('button');
  117.             btn.textContent = item.label;
  118.             td.append(btn);
  119.           }
  120.         }
  121.         row.appendChild(td);
  122.       }
  123.       fgmt.appendChild(row);
  124.     }
  125.     return fgmt;
  126.   }
  127.  
  128.   
  129.   loadPage(0);
  130.  
  131.   let debunceTimeout = null; // 防抖
  132.   tableContent.addEventListener('scroll', (e) => {
  133.     let pageIndex = Math.floor(e.target.scrollTop / (PAGE_SIZE * LINE_HEIGHT));
  134.     console.log(pageIndex);
  135.     if (debunceTimeout) {
  136.       clearTimeout(debunceTimeout);
  137.     }
  138.     debunceTimeout = setTimeout(() => {
  139.       loadPage(pageIndex);
  140.       // console.log(LOADED_INDEX);
  141.     }, 100);
  142.   })
  143.   console.timeEnd()
  144.  
  145.  
  146. </script>
  147.  
  148. </html>

效果

效果图

这里可以看到，通过懒加载的形式去加载数据，页面流畅度得到了很大的提高。

但是如果滚动条拉动过快，还是会有一瞬间的白屏问题。

而且也会随着已渲染数据量的增加而变卡。

接下来就得解决数据加载完成后，滚动表格卡的问题，我想到的方案分为两类

  1. 回头是岸，用回table标签，因为加载完后不卡（后来发现是td的overflow:hidden引起的）。缺点是不能懒加载。或者想办法使用table去实现懒加载。
  2. 仍旧使用绝对定位+懒加载，只是设置一个数据队列，最大值比如5000条，通过后面若再加载，就把最先加载的数据删除了。缺点是闪屏，数据永远都要加载。

继续探索

尝试4. table + 绝对定位 + scroll动态加载

综合考虑1.使用table初级实现 和3.绝对定位+scroll动态加载优化尝试  后，由于table加载完数据后滚动的流畅性，因此打算用回table标签做表格。

那么，如何使table中的元素也懒加载呢——每页用单独一个table拼接起来，每个table再使用绝对定位。

其次，也加回了自动加载的代码（如下function autoLoadData），在用户没什么操作的时候，默默把剩下的数据也加载进去。同时，也支持懒加载，用户点到哪儿，哪儿的数据开始加载。

同时LINE_HEIGHT也根据第一次加载后，动态获取。因为系统缩放和浏览器缩放下，一行的高度不一定是30px，如下

下面改造第3部分的代码

  1. <!DOCTYPE html>
  2. <html lang="zh_CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Large Table4</title>
  7.   <style>
  8.     .table-content {
  9.       height: 200px;
  10.       overflow:auto;
  11.       position: relative;
  12.     }
  13.     .table {
  14.       position: absolute;
  15.       width: 100%;
  16.       table-layout: fixed;
  17.       border-collapse: collapse;
  18.       border-spacing: 0px;
  19.     }
  20.     .table .row {
  21.       box-sizing: border-box;
  22.       height: 30px;
  23.     }
  24.     /*高度占位元素*/
  25.     .table-height {
  26.       float:left;
  27.       width: 1px;
  28.     }
  29.  
  30.     .table .row:hover {
  31.       background: #ddd;
  32.     }
  33.     .table .row .item {
  34.       padding: 0;
  35.       white-space: nowrap;
  36.       /* overflow: hidden; 严重影响性能*/
  37.       /* text-overflow: ellipsis; */
  38.       border: 1px solid #ddd;
  39.     }
  40.     .loading{
  41.       --width: 50%;
  42.       height: 5px;
  43.       width: var(--width);
  44.       background-color: cadetblue;
  45.     }
  46.   </style>
  47. </head>
  48.  
  49. <body>
  50.   <div id="tableContent" class="table-content">
  51.     <div class="table-height"></div> <!--高度占位元素-->
  52.     <!-- <table class="table" id="table"></table> -->
  53.   </div>
  54.   <div class="loading"></div>
  55. </body>
  56. <script>
  57.   console.time()
  58.   let LINE_HEIGHT = 30;
  59.   const PAGE_SIZE = 200;
  60.   const ROWS = 50000;
  61.   const AUTO_LOAD_MS = 20; // 自动加载间隔ms 
  62.   const PRELOAD_PAGES = 1; // 预加载页数
  63.   const ROW_TEMP = [{ type: 'id' }, '王小虎', '28', '170cm', '80kg', '浙江省xxxxxx有限公司', { type: 'button', label: '详情' }];
  64.   let LOADED_INDEX = new Set(); // 存已经加载的页
  65.   const TOTAL_PAGES = Math.floor(ROWS / PAGE_SIZE); // 总页数
  66.  
  67.   let tableContent = document.querySelector("#tableContent");
  68.   document.querySelector('.table-height').style = 'height:' + LINE_HEIGHT * ROWS + 'px';
  69.  
  70.   window.onload = function(){
  71.     tableContent.addEventListener('scroll', scrollEvent)
  72.     autoLoadData() // init page
  73.   }
  74.  
  75.  
  76.   /**找到未加载的页 */
  77.   function findUnloadPage(pageIndex) {
  78.     let arr = [];
  79.     for (let i = pageIndex; i <= pageIndex + PRELOAD_PAGES && i < TOTAL_PAGES; i++) {
  80.       if (!LOADED_INDEX.has(i)) arr.push(i);
  81.     }
  82.     return arr;
  83.   }
  84.   /**
  85.    * 从第几条数据开始加载
  86.    * @param startIndex 开始加载的数据index（通过scrollTop/height得出
  87.    */
  88.   function loadPage(pageIndex) {
  89.     if (pageIndex > TOTAL_PAGES) return;
  90.     let unLoadedPages = findUnloadPage(pageIndex);
  91.     if (!unLoadedPages.length) return;
  92.     unLoadedPages.forEach((unLoadedPage) => {
  93.       let start = unLoadedPage * PAGE_SIZE;
  94.       let end = (unLoadedPage + 1) * PAGE_SIZE;
  95.       LOADED_INDEX.add(unLoadedPage); // 记录已加载的
  96.       let fgmt = loadRowsRange(start, end);
  97.       tableContent.appendChild(fgmt);
  98.       if(unLoadedPage == 0){
  99.         let row = document.querySelector('.row');
  100.         LINE_HEIGHT = parseFloat(getComputedStyle(row).height); // 计算出实际高度
  101.       }
  102.     })
  103.   }
  104.  
  105.   /**
  106.    * 加载数据区间
  107.    * @param {Number} start 开始index
  108.    * @param {Number} end   结束index
  109.    * @return {DocumentFragement}
  110.    */
  111.   function loadRowsRange(start, end) {
  112.     let fgmt = document.createDocumentFragment();
  113.     let table = document.createElement('table');
  114.     table.classList.add('table');
  115.     table.style.top = start * LINE_HEIGHT + 'px';
  116.     for (let i = start; i < end; i++) { // row
  117.       let row = document.createElement('tr');
  118.       row.className = 'row';
  119.  
  120.       for (let j = 0; j < ROW_TEMP.length; j++) { // column
  121.         let item = ROW_TEMP[j];
  122.         let td = document.createElement('td');
  123.         td.className = 'item';
  124.         if (typeof item == 'string') {
  125.           td.textContent = ROW_TEMP[j];
  126.         } else {
  127.           if (item.type == 'id') {
  128.             td.textContent = i;
  129.           } else if (item.type == 'button') {
  130.             let btn = document.createElement('button');
  131.             btn.textContent = item.label;
  132.             td.append(btn);
  133.           }
  134.         }
  135.         row.appendChild(td);
  136.       }
  137.       table.appendChild(row);
  138.     }
  139.     fgmt.appendChild(table);
  140.     return fgmt;
  141.   }
  142.  
  143.   let debunceTimeout = null; // 防抖
  144.   function scrollEvent(e) {
  145.     let pageIndex = Math.floor(e.target.scrollTop / (PAGE_SIZE * LINE_HEIGHT));
  146.     // console.log(pageIndex);
  147.     if (debunceTimeout) {
  148.       clearTimeout(debunceTimeout);
  149.     }
  150.     debunceTimeout = setTimeout(() => {
  151.       loadPage(pageIndex);
  152.       // console.log(LOADED_INDEX);
  153.     }, AUTO_LOAD_MS);
  154.   }
  155.  
  156.   
  157.   /*auto load data*/
  158.   function autoLoadData(){
  159.     let pageIndex = 0;
  160.     let loading = document.querySelector('.loading');
  161.     let interval = setInterval(() => {
  162.       // console.log(pageIndex);
  163.       if(pageIndex >= TOTAL_PAGES){ // fininsh load all data
  164.         clearInterval(interval);
  165.         tableContent.removeEventListener('scroll', scrollEvent); // remove scroll listener to improve performance
  166.         LOADED_INDEX = null; // try to gc
  167.       }
  168.       loading.style.setProperty('--width', pageIndex/TOTAL_PAGES * 100 + '%');
  169.       loadPage(pageIndex++);
  170.     }, 100)
  171.   }
  172.  
  173.   console.timeEnd()
  174.  
  175.  
  176. </script>
  177.  
  178. </html>

经过研究比较，发现css中给每个td设置overflow:hidden; 会严重影响滚动性能，因此我选择注释css中的那一部分。同时我也试着将本文尝试3中的over-flow:hidden去除，数据加载完成后，果然流畅不少，但仍比不上table标签。

去掉overflow:hidden后，在数据加载完成后滚动表格就变得丝般顺滑。

这样导致如果仍按30px来计算高度的话，得到的top值会出现问题

其中有几个关键的变量与加载性能挂钩，如下

  • PAGE_SIZE： 表示每页的大小，这个值越大，那么加载一页的时候，渲染线程占用的时间就越长。

  • AUTO_LOAD_MS：自动加载时，每次加载的间隔时间，值越小，则渲染线程执行完后，剩下的时间给js就越短。

  • PRELOAD_PAGES： 懒加载时，预加载的页数，如拉滚动条瞬间跳转到第10页，如果这个值设置为2，则会预加载11，12页的内容。

  • ROWS： 加载的记录数，直接影响页面性能，不过多介绍

效果

效果图

 加载过程中有点卡，但是加载完成后就很流畅了。

接下来就是讨论overflow:hidden的问题，一个表格中td内容总会溢出td的，那既然over-flow:hidden; 这么影响性能，如何解决表格内容溢出问题呢。

大体思考了几个方向。

  1. 尝试用css选择器或js，单独将可能溢出的列td设置为over-flow:hidden;
  2. 设置懒加载队列，队列溢出时，将最先加载的页删除。
  3. 使其换行，但是换行的话会影响表格的高度，使懒加载时不好计算位置。
  4. 虚拟滚动（这个在行业内已经很成熟了）
  5. css 属性content-visibility 优化性能，chrome > 85 
  6. setTimeout 换为 requestAnimationFrame 加载数据。

有关大数据表格加载，这个方向大体上是有了，之后的代码我就放到github上了，欢迎指导 GitHub - 601286825nj/big-table

参考资料

  1. 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理——“GUI渲染线程与JS引擎线程互斥”小节

若有错误/补充，敬请指出更改

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/579639
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号