安卓 html 列表滚动卡顿_前端优化手段之一长列表的优化

// 实现纲要  //

• 可视区域展示固定 n 条数据。

• 监听滚动，样式上通过 transform 来更改偏移量造成滚动的视觉效果。

// 在线例子 //

• 例子链接在文末。

• visibleData 可视区域内可见的数据，目前默认固定 10+ 条左右。

• handleScroll 监听滚动，根据 scrollTop 属性滚动列表。

• 滚动过程中计算滚动距离和处理显示的数据。

// 原理说明  //

为何要这么折腾？ 如果一次性 DOM 插入大量数据可能会有卡顿问题，所以我们现在就只插入少量数据，然后模拟出滚动的效果。在滚动的过程中，替换数据。 如何模拟滚动效果？

常规的滚动效果，在固定高度的容器内，设置 overflow: auto; 即可。这个时候页面其实隐含“可视区域”概念，就是你看到的内容，而随着滚动，可视区域的顶部内容会往上滑动，移动到可视区域以外的地方，即图上灰色部分。

---

View 模拟滚动效果

className="list-view-phantom" style={{ height: data.length * itemHeight }} >

{visibleData.map((item, index) => { return (

{item.value}

); })}

• list-view 作为容器，设置固定高度 400px, 以及滚动条可见 overflow: auto。

• list-view-phantom 作为高度撑起整个列表以便让滚动条出现。

• list-view-content 作为数据列表的展示，固定 n 条数据。

---

Data 监听滚动过程

• 通过 list-view 的 scrollTop 获得滚动距离，并通过 transform 属性制造垂直距离滚动效果。

• 数据列表的起点通过 scrollTop 除以每条数据的高度可知，终点即为起点加上列表固定的显示条数。

---

最后，可以点击" https://codesandbox.io/s/longlist-k1j64