移动端懒加载的数据，当页面上数据量很大时，dom 元素过多会造成页面卡顿，要怎么处理？
回答·35
最热
最新
- 长列表方案，手动假分页，只渲染当前和上下两页数据
- 只加载 1 到 2 个屏的数据能有多少。数据太多肯定分页加载渲染。难不成一下子把所有数据都请求过来全部渲染？
- 先这样，再这样，然后那样，不行，应该是这样，然后这样，然后再这样，就可以了
- 清理页面：删除不必要或者暂时隐藏的元素，调整图片大小。如果可以的话，调整一下页面设计，两数据分开展示，避免一次渲染过多。可以考虑滚动加载
- 不在视口内的卡片转为空白。 这样以最小改动降低页面 dom 数量，效果也不会差。 极致优化可以考虑虚拟卷轴。
- 不要直接操作 DOM，那样开销会很大，虚拟列表了解一下
- 虚拟列表实现或者分页吧
- 这种页面卡顿一般都是 dom 节点内存增大，可以重复利用 dom 结构，构建虚拟列表，再就是使用事件委托，将监听事件绑定到父元素上
- 一般数组大小设置为 100 条，然后多余的截取掉，一个页面不能保存那么多条。判断数据加载完成的方法就是加载页码书*加载数量 判断是否大于总条数（数据库获取的）大于等于就告诉用户加载完毕
- 滚动加载，mescroll.js 或者自己写