JS 分片任务的高阶函数封装

白雾茫茫丶

已于 2024-04-22 16:21:16 修改

阅读量717

点赞数 3

分类专栏：前端开发文章标签： javascript html

于 2024-04-22 15:58:00 首次发布

本文链接：https://blog.csdn.net/qq_36117388/article/details/138080149

版权

前端开发专栏收录该内容

25 篇文章 1 订阅

订阅专栏

前言

在我们的实际业务开发场景中，有时候我们会遇到渲染大量元素的场景，往往这些操作会使页面卡顿，给用户带来非常不好的体验，这时候我们就需要给任务分片执行。

场景复现

我们看一段代码：

<!DOCTYPE html>
<html lang="en">

<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>分片任务的高阶函数封装</title>
  <style>
    .ball {
      width: 100px;
      height: 100px;
      background: #f40;
      border-radius: 50%;
      margin: 30px;
    }

    .ball1 {
      position: absolute;
      left: 0;
      animation: move1 1s alternate infinite ease-in-out;
    }

    @keyframes move1 {
      to {
        left: 100px;
      }
    }
  </style>
</head>

<body>
  <button class="btn"">点击按钮向页面插入 100000 条数据</button>
  <div class=" ball ball1"></div>
    <script>
      const btn = document.querySelector(".btn");
      const datas = new Array(100000).fill(0).map((_, i) => i);
      btn.onclick = () => {
        // 记录开始时间
        console.time('耗时');
        for (const i of datas) {
          const div = document.createElement("div");
          div.innerText = i;
          document.body.appendChild(div);
        }
        console.timeEnd('耗时');
      }
    </script>
</body>

</html>

效果：
在这里插入图片描述

这里的小球动画是为了演示浏览器的卡顿效果，我们可以看到，直接向页面插入 100000 条元素，页面会直接卡死，等渲染完才正常，为什么会这样呢？

问题本质

这是因为浏览器的渲染频率一般是 60Hz,也是目前主流显示屏的频率。60Hz 表示计算机一秒钟要渲染 60 帧画面,所以渲染一帧或者说每一片段所需时间就是 1/60 = 16.6ms

但是现在这个任务的执行时间比较长，导致这个任务没有给浏览器留出足够的空间进行渲染，导致渲染任务延后执行，这就是页面卡死的原因。这就涉及到浏览器的渲染原理了，有关这方面的知识可以看下我之前发过的文章：现在浏览器的渲染原理及流程

问题分解

我们已经知道问题产生的原因，那我们怎么优化呢？解决办法就是给这些任务分片执行，让任务一段一段执行，这样我们就看不到页面卡顿了。

这里我们就涉及到两个问题：

下一次分片什么时候开始？
每一次分片执行多少

这里我们就要用到一个 API ：requestIdleCallback

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

代码优化

我们要实现一个分片函数，让它帮我们执行任务：

<!DOCTYPE html>
<html lang="en">

<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>分片任务的高阶函数封装</title>
  <style>
    .ball {
      width: 100px;
      height: 100px;
      background: #f40;
      border-radius: 50%;
      margin: 30px;
    }

    .ball1 {
      position: absolute;
      left: 0;
      animation: move1 1s alternate infinite ease-in-out;
    }

    @keyframes move1 {
      to {
        left: 100px;
      }
    }
  </style>
</head>

<body>
  <button class="btn"">点击按钮向页面插入 100000 条数据</button>
  <div class=" ball ball1"></div>
    <script>
      const btn = document.querySelector(".btn");
      const datas = new Array(100000).fill(0).map((_, i) => i);
      btn.onclick = () => {
        // 记录开始时间
        console.time('耗时');
        performChunk(datas)
        console.timeEnd('耗时');
      }

      const performChunk = (datas) => {
        // 边界判定
        if (datas.length === 0) {
          return;
        }
        let i = 0;
        // 开启下一个分片的执行
        function _run() {
          // 边界判定
          if (i >= datas.length) {
            return;
          }
          // 一个渲染帧中，空闲时开启分片执行
          requestIdleCallback((idle) => {
            // timeRemaining 表示当前闲置周期的预估剩余毫秒数
            while (idle.timeRemaining() > 0 && i < datas.length) {
              // 分片执行的任务
              const div = document.createElement("div");
              div.innerText = i;
              document.body.appendChild(div);
              i++
            }
            // 此次分片完成
            _run()
          })
        }
        _run();
      }
    </script>
</body>

</html>

核心代码就是 requestIdleCallback 函数，我们看下效果：
在这里插入图片描述

这里就没有明显的卡顿效果了，这是因为浏览器把这些任务分片执行了，比如说前面执行100次，然后再接着执行100次，所以现在的渲染效率就比较高了。

封装高阶函数

这里我们已经完成这项任务的分片执行，但我们希望这个分片函数针对的不仅仅是这个任务，它应该是通用的，所以我们要提取一些操作，让用户自己去执行，比如说：

具体任务的执行过程
分片任务执行的时机？每一次具体分片多少？
如果是 node 环境呢？

这些都应该由开发者去定义，基于这些，我们封装成一个更加通用的高阶函数：

<!DOCTYPE html>
<html lang="en">

<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>分片任务的高阶函数封装</title>
</head>

<body>
  <button class="btn"">点击按钮向页面插入 100000 条数据</button>
    <script>
      const btn = document.querySelector(".btn");
      btn.onclick = () => {
        // 自定义执行过程
        const taskHandler = (_,i) => {
          const div = document.createElement("div");
          div.innerText = i;
          document.body.appendChild(div);
        }
        broswerPerformChunk(10000, taskHandler)
      }

      const performChunk = (datas, taskHandler,scheduler) => {
        if(typeof datas === 'number'){
          datas = {
            length:datas
          }
        }
        // 边界判定
        if (datas.length === 0) {
          return;
        }
        let i = 0;
        // 开启下一个分片的执行
        function _run() {
          // 边界判定
          if (i >= datas.length) {
            return;
          }
          // goOn 判断是否还继续执行
          scheduler((goOn) => {
            // timeRemaining 表示当前闲置周期的预估剩余毫秒数
            while (goOn() && i < datas.length) {
              // 分片执行的任务
              taskHandler(datas[i], i);
              i++
            }
            // 此次分片完成
            _run()
          })
        }
        _run();
      }

    /**
     * @description: 浏览器执行环境
     */  
    const broswerPerformChunk = (datas, taskHandler) => {
      const scheduler = (task) => {
          requestIdleCallback((idle) => {
            task(() => idle.timeRemaining())
          })
        }
        performChunk(datas, taskHandler,scheduler)
    }    
    </script>
</body>

</html>