js表格大数据量加载效率优化_js优化大数据的表格-优快云博客

本文链接：https://blog.youkuaiyun.com/Free2140/article/details/115109689

本文探讨如何解决客户需求下，页面展示所有DOM导致的卡顿问题，通过只渲染可视区域，利用CSS sticky实现表头固定，并利用scrollTop计算数据加载策略，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户要求在一个页面中显示所有的dom信息，不能分页，导致页面有一些卡顿
之前的项目是用的jquery拼接的html字符串，表格改造起来很吃力

以后会放弃使用jquery了，后期维护真是麻烦
解决方案：只渲染页面中可见部分dom，滚动条变化时，根据scrollTop计算应对的所在行，更新表格。
表头固定采用css的position :sticky

    <div class="parentDiv" style="height: 426px; overflow-y: auto ;  ">

        <div id="mylist" class="">
        	<table class ="re">
        	
        	</table>
        </div>

    </div>

	//用于创建滚动条
    var bar = document.querySelector('.parentDiv');
    //填充parentDiv,根据数据总数量计算填充高度
    var _tb = document.getElementById('mylist');
	//给滚动条绑定滚动的事件监听
    bar.addEventListener('scroll', () => {
    //滚动条所在高度
    var top = bar.scrollTop;
    //每一行占用高度
    var itemSize = 19;
    //总数据占用高度
    var totalHeight = rainData.length * 19;
    //计算表格相对高度
    document.querySelector('.re').style.cssText = 'margin-top:' + top + 'px !important';
    //设置填充调度为总高度-滚动条高度，因为一部分高度被margin-top占用
     _tb.style.height = (totalHeight - top) + "px";
     //根据滚动条高度计算数据所在行
    var startIndex = Math.floor(top / itemSize);
    //更新表格，只渲染画面中dom
     if (rainData != "")
     loadDataList(rainData, startIndex); 
  });