浏览器空闲api性能优化---动态插入dom

一、概念

requestIdleCallback 是一个Web API,它安排在浏览器的空闲期间运行 JavaScript 函数。 requestAnimationFrame: 这个API通常用于动画,但也可以用来执行需要在下一次屏幕刷新之前完成的计算。

requestIdleCallback不同,它在每帧都会运行,所以你需要注意不要执行过于耗时的操作,以免影响到动画性能。

这使得开发人员能够在主事件循环空闲时执行背景和低优先级工作,而不会影响到关键的事件,如动画和输入响应。简单来说,这个 API 为你提供了一个优化网页性能的方法,通过把非紧急任务安排在浏览器有额外空闲时间时才去执行。

这个API的基础用法是:

scss 复制代码
requestIdleCallback(myNonEssentialWork);

Deadline 对象包含两个重要的属性:

  1. timeRemaining(): 这是一个函数,返回一个 DOMHighResTimeStamp,表示当前帧中剩余的空闲时间(以毫秒为单位)。当这个值大于 0 时,表示还有时间可以进行不打断用户操作的后台工作。
  2. 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还是得去看浏览器的兼容性,老旧的浏览器还是得考虑好使用其他来实现

相关推荐
断竿散人3 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD4 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟5 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire6 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH6 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_7 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
断竿散人7 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
肖魏眸9 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶10 分钟前
VUE带你乘风破浪~
前端·vue.js
橘黄的猫10 分钟前
深入浅出掌握 Git 子模块:项目管理利器
前端·github