大家好，我是小杜杜，有关高性能，大数据量的列表渲染的示例已经非常常见，可以说是前端必须要了解的功能点，今天我们一起手写一下，看看如何去更好的实现～

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

IntersectionObserver API 的用法，以及如何兼容。 如何在React Hook中实现无限滚动。 如何正确渲染多达10000个元素的列表。 无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。 当你使用滚动作为…

原文地址：https://developers.google.com/web/updates/2016/07/infinite-scroller 原文作者：Surma 译者：王芃 摘要: 重用你的 DOM 元素以及删除那些远离可视范围的元素。为延迟显示的元素使用占位符。这里是一个无尽滚…

这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛... 重点看这里监听目标元素与其祖先或视窗交叉状态的手段，其实就是观察一个元素是否在视窗可见。 可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。 其实就是一个简单的构造函数。 以上代码会返回一个In…