前端优化之分分钟学会渲染百万条数据不卡顿

唐代王维写代码

已于 2024-03-12 15:22:47 修改

阅读量1.1k

点赞数 20

文章标签：前端 javascript 开发语言

于 2024-03-12 15:21:03 首次发布

本文链接：https://blog.csdn.net/w199809w/article/details/136653451

版权

前言

又到了秋天了，很多小伙伴意识到2021年的余额也所剩不多，开始回首年初给自己定下的学习计划...emmmm ~ 一言难尽了吧，不过重要的还是当下啦，今天让我们来学一个操作极其简单却能无形装x的活：百万级列表渲染，好了，先就哔哔这么多，一起来学习学习。

正文

起初是这样的

大家都知道，js是单线程语言，而且dom的操作（如插入、删除等）所带来的性能损耗是巨大的，比如我们对一个ul连续插入100w条li，会发生什么呢？

尝试运行一下？

html

复制代码

<!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>Document</title>
</head>
<body>
    
<ul></ul>

<script>
    
    const targetElement = document.querySelector('ul')
    for(let i=0;i<1000000;i++){
        const li = document.createElement('li')
        li.innerHTML = Math.random()
        targetElement.appendChild(li)
    }
</script>
</body>
</html>

电脑好的同学笔记本的风扇应该已经加速了工作，随后出现了一个这样的画面，问题不大电脑还没蓝屏，说明写得还行。

当然了作为专业的前端工程师，我们也可以让用户选择升级一下cpu、换台电脑等作为解决的办法。

然后我先这样

可是作为前端工程师，其他不重要，但是必须要骚啊，那我们得找找有没有骚操作？

思考：目的是插入100万条数据，只要让用户用人类的角度能第一时间看到数据并且感觉到丝滑不卡顿不就好了吗？两个点入手：

减少dom操作：dom操作是非常损耗性能的，如果能够在保证单次dom操作任务量比较少（控制在短时间内能够完成）的前提下还能减少dom的操作，就能够极大程度的提升运行速度；
分时插入：js单线程机制导致如果一个时间段内，一个任务所需要的耗时越久，则会导致其他任务无法进行，比如我们一直去插入数据，导致渲染这件事情没有办法去做，则会表现出无内容更新、卡住了；我们通过分配时间去操作，比如在不影响用户观看的前提下，把任务分解成多个时间去做，简单来说就是先去插入一部分，然后渲染一部分，这就考虑到；

然后我再这样

一番搬运之后，我得出如下结论：

createDocumentFragment：

摘一下官方的文档：

理解一下：

创建一个dom节点，且不在主dom树中，简单理解为“虚拟dom”；并且在插入到dom树中，只会出现该虚拟节点下的子孙节点，真可以说是事了拂衣去，深藏功与名
这个节点是存在于内存中，所以对这个节点的任何操作不会引起页面的回流；

requestAnimationFrame：

理解一下：

就是在每一帧的重绘之前执行一个函数，非常适合作用于动画。

细心的同学肯定要问了：都是分时插入为什么不用setTimeout、setInterval。

优势主要有两点：

requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

最后我再这样

直接上代码，过程都写在注释里了

html

复制代码

<!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>Document</title>
  </head>
  <body>
    <ul></ul>

    <script>
      // createDocumentFragment
      // requestAnimationFrame

      // 百万条数据
      let total = 1000000;
      // 单次插入 可自定义
      let once = 20;
      // 需要插入的次数 向上取整
      let loopCount = Math.ceil(total / once);
      // 当前渲染次数
      let countRender = 0;

      function render() {
        // 需要插入的目标对象
        const targetElement = document.querySelector("ul");
        // 文档因为存在片段于内存中，并不在DOM树中，将所以子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
        // 创建一个虚拟Dom节点 插入真实文档之前不会触发dom渲染、回流等操作
        // 因此能够很大程度减少dom操作所带来的的性能损耗
        const fragment = document.createDocumentFragment();

        // 对虚拟节点插入dom节点，也不会触发真是dom操作，同上
        for (let i = 0; i < 20; i++) {
          // 搞个节点
          const li = document.createElement("li");
          // 给li搞点内容
          li.innerHTML = Math.random();
          // 插入到虚拟节点
          fragment.appendChild(li);
        }
        // 插入到真实节点的时候，只会把虚拟fragment下的子孙节点插入
        targetElement.appendChild(fragment);
        // 渲染次数加1，控制递归的次数
        countRender++;
        // // 递归调用
        if (countRender < loopCount) {
          // window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
          // 回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。
          // 能够把每次dom的操作汇总在下一次重绘之前更新动画帧
          // 因此在浏览器单线程的机制下，能够无卡顿的加载，百万级列表
          window.requestAnimationFrame(render);
        }
      }

      // 执行渲染
      render();
    </script>
  </body>
</html>