项目开发bug记录

最新推荐文章于 2024-07-24 20:38:02 发布

bin_123ge

最新推荐文章于 2024-07-24 20:38:02 发布

阅读量130

点赞数 2

文章标签： bug javascript 前端 vue.js

本文链接：https://blog.csdn.net/bin_123ge/article/details/131214458

版权

用requestIdleCallback（）解决10万条数据造成的卡顿问题

项目场景：

最近在项目开发的时候，遇到首屏渲染数据过多从而造成的卡顿现象，下面以一个简单的例子来说明一下

点击按钮创建10万个div

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            width: 200px;
            height: 50px;
            border-radius: 15px;
            background-color: skyblue;
            color: wheat;
        }
    </style>
    <button class="btn">点击获取10万条数据</button>
    <script src="./index.js"></script>
</head>
<body>
    
</body>
</html>

const btn = document.querySelector(".btn");
console.log(btn);
const datas = new Array(100000).fill(0).map((_, i) => i);

btn.onclick = () => {
    
  for (const item of datas) {
    const div = document.createElement("div");
    div.textContent = item;
    document.body.appendChild(div);
  }
};

在这里插入图片描述
点击的时候会发现会有3-4秒的卡顿时间，数据才能显示出来，那么我们可以什么方法来解决呢，其实在实际的项目开发中，我们可以使用window.requestIdleCallback()
我们来看下MDN上关于这个函数定义：

window.requestIdleCallback() 方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打乱执行顺序。

参数
callback
一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 IdleDeadline 的参数，这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态。

IdleDeadline 接口上的 timeRemaining() 方法返回当前空闲期间剩余的估计毫秒数。回调函数可以在任何时候调用此方法，以确定在必须返回之前它可以继续工作多长时间。例如，如果回调完成了一个任务，并且有另一个任务要开始，它可以调用 timeRemaining() 来查看是否有足够的时间来完成下一个任务。如果没有，回调函数可以立即返回，或者用剩余的时间寻找其他合适的工作。

思路：

我们虽然无法减少它循环的总时间，但是我们却可以减少它的卡顿，我们可以把这个很长的任务分解成一段一段的任务，在每一段任务之间给浏览器一个渲染的时机，这样子虽然总的任务时间没变，但是浏览器能够得到及时的渲染，给用户的感知就相当于没有卡顿了。

解决方案：分时函数


const btn = document.querySelector(".btn");
console.log(btn);
const datas = new Array(100000).fill(0).map((_, i) => i);

btn.onclick = () => {
    
 performChunk(datas)
};

function performChunk(datas) {
   
  if (datas.length === 0) {
    return;
  }
  let i = 0; // 目前应该取出的任务下标
  // 执行一块任务
  function _run() {
    // console.log(datas.length);
    if (i === datas.length) {
      return;
    }
    // 通过这个requestIdleCallback我们可以知道每一帧还有没有剩余时间
    requestIdleCallback((idle) => {
      while (idle.timeRemaining() > 0 && i < datas.length) {
        // 在这一帧还有空闲时间
        const item = datas[i];
        const div = document.createElement("div");
        div.textContent = item;
        document.body.appendChild(div);
        i++;
      }
      _run()
    });
  }

  _run()
}

测试

有了这样子的解决方案之后，哪怕我们一次性创建100万条数据，用户也不会感知到卡顿

const datas = new Array(1000000).fill(0).map((_, i) => i);

在这里插入图片描述
这里只是简单的实现了一下，后续还需要对这个函数进行复用封装，让它能够变得更加的通用。

bin_123ge

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
项目开发bug记录

最近在项目开发的时候，遇到首屏渲染数据过多从而造成的卡顿现象，下面以一个简单的例子来说明一下。
复制链接

扫一扫