一、概念
requestIdleCallback
是一个Web API,它安排在浏览器的空闲期间运行 JavaScript 函数。 requestAnimationFrame
: 这个API通常用于动画,但也可以用来执行需要在下一次屏幕刷新之前完成的计算。
与requestIdleCallback
不同,它在每帧都会运行,所以你需要注意不要执行过于耗时的操作,以免影响到动画性能。
这使得开发人员能够在主事件循环空闲时执行背景和低优先级工作,而不会影响到关键的事件,如动画和输入响应。简单来说,这个 API 为你提供了一个优化网页性能的方法,通过把非紧急任务安排在浏览器有额外空闲时间时才去执行。
这个API的基础用法是:
scss
requestIdleCallback(myNonEssentialWork);
Deadline
对象包含两个重要的属性:
timeRemaining()
: 这是一个函数,返回一个 DOMHighResTimeStamp,表示当前帧中剩余的空闲时间(以毫秒为单位)。当这个值大于 0 时,表示还有时间可以进行不打断用户操作的后台工作。didTimeout
: 这是一个布尔值,指示回调是否已超过指定的超时时间。如果您在调用requestIdleCallback
时没有设置超时,那么didTimeout
将始终为false
。如果你设置了超时时间,当任务最终执行时(即使当前不是空闲时期),didTimeout
将会是true
。
那么在使用场景下,渲染一个excel表格会有大量数据时,我们通过xlsx.js库进行一个文件上传读取会等待几秒,页面才会出现,这给用户的感觉就是卡顿,我们可以借助浏览器的这个api来解决
这个是解析对应excel表格,并通过自己封装的高阶函数去分块渲染对应的数据
通过xlsx在前端上传excel获取到数据,然后封装函数去动态给table赋值
ini
import * as XLSX from 'xlsx';
function uploadChange(file) {
tableData.value = [];
// 将上传的excel文件转成js对象
const reader = new FileReader();
// 拿到字符串分隔
fileName.value = file.name.split('-')[0];
reader.onload = async e => {
const data = e.target?.result;
const workbook = XLSX.read(data, { type: 'binary' });
const sheetNames = workbook.SheetNames;
const sheet1 = workbook.Sheets[sheetNames[0]];
const jsonData = XLSX.utils.sheet_to_json(sheet1);
// 调用batchProcess开始分批处理
batchProcess(jsonData, updateTableData);
lazyLoading();
jsonData.forEach((item, index) => {
translateList.value.push(item.en);
});
};
reader.readAsBinaryString(file.raw);
}
options = { batchSize: 20, idleDeadline: 50 }每次20条,超过50s就会强制更新,保证会有数据展示
arduino
/**
* 这个函数将在浏览器空闲时分批处理数据
* @param {Array} data - 要渲染到table中的数据数组
* @param {Function} updateFunc - 用于更新tableData的函数
* @param {object} options - 可选项,包含batchSize和idleDeadline
*/
export function batchProcess(data: any[], updateFunc: Function, options = { batchSize: 20, idleDeadline: 50 }) {
let position = 0;
function processNextBatch(deadline: { timeRemaining: () => number; didTimeout: any }) {
// 根据空闲时间和指定的批处理大小来更新数据
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && position < data.length) {
const end = Math.min(position + options.batchSize, data.length);
const batch = data.slice(position, end);
// 更新tableData
updateFunc(batch);
position = end;
}
if (position < data.length) {
// 如果还有数据,继续请求下一批处理
requestIdleCallback(processNextBatch, { timeout: options.idleDeadline });
}
}
// 首次调用处理函数
requestIdleCallback(processNextBatch);
}
认识一个web api还是得去看浏览器的兼容性,老旧的浏览器还是得考虑好使用其他来实现
