使用虚拟列表只渲染可见区域，结合节流控制滚动事件频率，并通过DocumentFragment和transform减少重排重绘，实现高性能无限滚动。
实现无限滚动时，如果不做性能优化，很容易导致页面卡顿、内存占用过高。关键在于减少DOM元素数量、合理使用事件监听和避免频繁重排重绘。以下是几个核心思路与代码示例。
1. 虚拟列表（只渲染可见区域）
无限滚动不等于把所有数据都渲染到页面上。使用虚拟列表技术，只渲染当前可视区域附近的元素，其余用占位空白代替。
假设每条数据高度固定为60px，可视区域最多显示10条：
const container = document.getElementById('list-container');const itemHeight = 60;const visibleCount = 10;let items = Array.from({ length: 10000 }, (_, i) => Item ${i}); // 模拟大量数据
立即学习“Java免费学习笔记（深入）”；
function renderVisible(startIndex) {const fragment = document.createDocumentFragment();const endIndex = Math.min(startIndex + visibleCount, items.length);
// 清空并重新渲染可视区域container.innerHTML = '';
// 上方空白占位const spacerTop = document.createElement('div');spacerTop.style.height = ${startIndex * itemHeight}px;fragment.appendChild(spacerTop);
// 渲染可见项for (let i = startIndex; i < endIndex; i++) {const item = document.createElement('div');item.style.height = ${itemHeight}px;item.textContent = items[i];item.classList.add('list-item');fragment.appendChild(item);}
container.appendChild(fragment);}
// 滚动处理container.addEventListener('scroll', () => {const scrollTop = container.scrollTop;const startIndex = Math.floor(scrollTop / itemHeight);renderVisible(startIndex);});
// 初始化container.style.height = '600px';container.style.overflowY = 'auto';renderVisible(0);
2. 防抖与节流优化滚动事件
滚动事件触发频率极高，直接在 scroll 中执行渲染会严重卡顿。使用节流控制执行频率。
function throttle(fn, delay) { let inThrottle; return function () { if (!inThrottle) { fn.apply(this, arguments); inThrottle = true; setTimeout(() => inThrottle = false, delay); } };}container.addEventListener('scroll', throttle(() => {const startIndex = Math.floor(container.scrollTop / itemHeight);renderVisible(startIndex);}, 100));
3. 使用 Intersection Observer 替代 scroll 监听（可选）
对于更复杂的场景，可以用 Intersection Observer 来检测元素是否进入视口，避免手动计算 scrollTop。
虽然虚拟列表仍推荐用 scroll + 节流，但该 API 更高效地处理“懒加载”类需求。
4. 减少重排与重绘
频繁操作 DOM 会导致浏览器不断重排重绘。优化建议：
使用 transform 移动内容区域，而不是改变 top 或 margin将列表容器设置为 will-change: transform，提示浏览器优化批量更新 DOM，使用 DocumentFragment避免在滚动中读取 layout 属性（如 offsetHeight、scrollTop 等）
基本上就这些。核心是：不要渲染全部数据，控制事件频率，减少DOM操作。这样即使上万条数据也能流畅滚动。
以上就是使用JavaScript实现一个简单的无限滚动_javascript性能优化的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534563.html
微信扫一扫 
支付宝扫一扫 
