长列表渲染如何优化

该列表有1w个数据

1,前端进行分页渲染

每次渲染100个数据,这样就有100页,递归函数,初始页数为0,在里面使用settimeout,遍历100遍,渲染100条数据,渲染完后page加一,边界条件为page是否大于100,大于的的话就结束递归,否则就再次调用该函数,传入page

2,懒加载,开始只渲染可视区域的列表

监听滚动条事件,判断列表内每个元素是否出现在窗口可视范围内,就算元素距离浏览器顶部的距离是否等于滚动条滚动的距离加可视区域的高度之和,等于的话就渲染该元素

你可能感兴趣的:(前端,javascript,开发语言)