前言
hello world欢迎来到前端的新世界
😜当前文章系列专栏：前端系列文章
🐱👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力
定时器分片处理
const batchSize = 1000; // 定义当前处理的起始索引 let currentIndex = 0; // 定义定时器处理函数 function processDataBatch() { // 截取当前批次的数据 const batchData = bigDataArray.slice(currentIndex, currentIndex + batchSize); // 处理当前批次的数据 processBatchData(batchData); // 更新当前处理的起始索引 currentIndex += batchSize; // 如果还有数据待处理，则继续设置定时器 if (currentIndex < bigDataArray.length) { setTimeout(processDataBatch, 0); // 使用 setTimeout 避免阻塞主线程 } } // 开始处理数据 processDataBatch(); // 处理当前批次的数据的函数 function processBatchData(data) { // 对当前批次的数据进行相应的处理，例如渲染到页面上或者其他操作 console.log('Processing batch data:', data); }
文档碎片
// 模拟后端返回的10万条数据 const backendData = Array.from({ length: 100000 }, (_, index) => index + 1); // 创建文档碎片 const fragment = document.createDocumentFragment(); // 遍历数据并将每一项转换为 DOM 元素，添加到文档碎片中 backendData.forEach((item, index) => { // 创建 DOM 元素 const div = document.createElement('div'); div.textContent = `Item ${item}`; // 将创建的元素添加到文档碎片中 fragment.appendChild(div); // 每当累积到一定数量时，一次性将这一批元素渲染到页面上 if ((index + 1) % 100 === 0) { renderFragmentToPage(fragment); } }); // 渲染文档碎片到页面上的函数 function renderFragmentToPage(fragment) { // 将文档碎片中的元素一次性渲染到页面上 document.body.appendChild(fragment); // 清空文档碎片，以便下一批元素的累积 fragment = document.createDocumentFragment(); } // 渲染文档碎片中剩余的元素 renderFragmentToPage(fragment);
懒加载
// 模拟后端返回的10万条数据 const backendData = Array.from({ length: 100000 }, (_, index) => index + 1); // 每次加载的数据量 const batchSize = 100; // 当前已加载的数据索引 let currentIndex = 0; // 加载下一批数据的函数 function loadNextBatch() { const batchData = backendData.slice(currentIndex, currentIndex + batchSize); batchData.forEach((item, index) => { // 创建 DOM 元素 const div = document.createElement('div'); div.textContent = `Item ${item}`; // 将创建的元素添加到页面上 document.body.appendChild(div); }); currentIndex += batchSize; } // 初始加载第一批数据 loadNextBatch(); // 在滚动到页面底部时加载下一批数据 window.addEventListener('scroll', function() { if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { loadNextBatch(); } });
在上述示例中，我们模拟了后端一次性返回10万条数据，并通过前端懒加载的方式逐步加载数据。每次加载一定量的数据，并且当用户滚动页面到底部时自动加载下一批数据。这样可以避免一次性加载大量数据导致页面性能问题，并且提供更流畅的用户体验。
通过懒加载可以有效减少页面加载时间，降低内存占用，并且可以更好地处理大量数据的情况。不过需要注意确保懒加载的数据加载和渲染过程能够平滑进行，避免给用户带来不必要的等待或者卡顿。
后言
创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力
