去年五月刚进公司，同事让我尝试处理网页数据渲染卡顿的问题。问题是这样：页面样式类似tab面板切换，按照分类一次性把上万条数据渲染上去，你鼠标往下滚动，表格数据一卡一卡的，几乎动不了。（==！本来做成分页就不会有这种问题，只是同事跟我说这项目的前端是外包出去的，如果要改样式，要写研发申请单，可能自己直接在js上处理数据比较快） 样式参考下图 因为后端数据库也用了索引，springboot的系统线程池也设定好参数，我在浏览器用new Date测试ajax的前后时间，回调一条记录和回调上万条记录的时间误差不超过1s；那这种页面加载的卡顿问题主要应该是在渲染的过程中了，谷歌搜了一下，好像是“浏览器内核自身支撑体系运行消耗太大，做js逻辑处理，还要做大量渲染”；所以优化方向就是主要渲染这一方面了（这些原理知识，以后了解更深了，会及时回来进一步解释或更正，如有不对，还请指正）。

看了一些文章，后来在知乎上找到【陈大侠】一篇比较明朗的，链接：转知乎

文章思路：获取后端回调的上万条数据后，存在js里，做分组处理。然后在for遍历方法体中使用setTimeout让程序每隔1ms渲染一次，强制“休息”1ms。 这样的效果页面数据的渲染虽然顺畅了，但也仅是前面的数据，鼠标越往下滚动，表格数据还是会卡顿。 这里我在文章里原来的基础上做了改动，让表格的数据，根据鼠标滚动（滚动高度/表格高度的整数比）来分批次加载。 代码如下：

首先，上面代码将后端返回的数据进行分组，比如我这里设定每组100条记录。然后进行渲染，如下：