m0_45093055的博客

前端虚拟滚动是一种用于优化长列表或大量数据展示的技术。它的主要原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。在传统的列表渲染中，如果数据量很大，渲染所有数据可能会导致性能下降，特别是在滚动时。虚拟滚动通过动态计算可见区域的位置和需要渲染的数据范围，只渲染可见区域内的部分数据，并在滚动时实时更新渲染的内容。总结下就是：先上代码直观体验下index.vuemyVirtualScroller.vue虚拟滚动的思路总结如下：1. 确定视窗位置：通过获取列表滚动区域的scrollTop属性

MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。

ResizeObserver的应用场景广泛，主要包括以下几个方面：响应式布局：当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。数据可视化：在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。

此篇文章主要是针对特定场景加深对scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性的认识，实际场景以上的方案可能并非最佳，比如判断dom元素是否滚动到底，可以使用IntersectionObserver浏览器api.IntersectionObserver监听滚动事件虚拟列表的最佳尝试可以使用requestAnimationFrame浏览器api，requestAnimationFrame用法解析。

这里为了讲解requestAnimationFrame的用法，而举例的处理大数据的方法，但是实际项目中，处理大数据的解决方案还是应用虚拟列表的形式。我的发！被后端五万条数据爆破我是怎么处理的听说你还不会虚拟列表？原谅我来晚了其它参考文章前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比。