jquery代码实现数据太大会卡顿,如何做到10万条数据渲染不卡顿

在前端渲染大量数据时，如果一次性渲染全部数据，会导致性能问题。为了避免这个问题，可以使用虚拟滚动技术。

虚拟滚动技术的基本思路是，只渲染可见区域内的数据，而不是一次性渲染全部数据。这样可以减少DOM操作和渲染时间，从而提高页面性能和响应速度。

以下是一个使用虚拟滚动技术实现的jQuery代码，可以渲染10万条数据而不卡顿：

HTML代码：

<div id="container" style="height: 500px; overflow-y: scroll">
  <div id="content"></div>
</div>

JavaScript代码：

var itemHeight = 20; // 每个数据项的高度
var itemCount = 100000; // 数据项的数量
var containerHeight = $('#container').height(); // 容器的高度
var visibleCount = Math.ceil(containerHeight / itemHeight); // 可见区域内的数据项数量
var totalHeight = itemCount * itemHeight; // 所有数据项的总高度
var scrollTop = 0; // 容器滚动的距离
var startIndex = 0; // 可见区域内的第一个数据项的索引
var endIndex = startIndex + visibleCount - 1; // 可见区域内的最后一个数据项的索引
var $content = $('#content'); // 内容区域的jQuery对象

// 初始化内容区域的高度
$content.height(totalHeight);

// 监听容器的滚动事件
$('#container').scroll(function () {
  // 更新startIndex和endIndex
  scrollTop = $(this).scrollTop();
  startIndex = Math.floor(scrollTop / itemHeight);
  endIndex = startIndex + visibleCount - 1;
  // 更新内容区域的位置
  $content.css('transform', 'translateY(' + startIndex * itemHeight + 'px)');
});

// 初始化可见区域的内容
for (var i = 0; i < visibleCount; i++) {
  $content.append('<div style="height: ' + itemHeight + 'px">数据项' + i + '</div>');
}

以上代码实现了一个使用虚拟滚动技术的数据渲染示例。该代码使用了jQuery库来简化DOM操作，通过监听容器的滚动事件来动态更新可见区域内的内容。该代码可以渲染10万条数据而不卡顿。