• 前端时间分片渲染

    在经典的面试题中：”如果后端返回了十万条数据要你插入到页面中，你会怎么处理？”

    除了像 useVirtualList 这样的虚拟列表来处理外，我们还可以通过 时间分片 来处理

    通过 setTimeout

    直接上一个例子：

     

    1. <!--
    2.  * @Author: Jolyne
    3.  * @Date: 2023-09-22 15:45:45
    4.  * @LastEditTime: 2023-09-22 15:47:24
    5.  * @LastEditors: Jolyne
    6.  * @Description: 
    7. -->
    8. <!DOCTYPE html>
    9. <html lang="en">
    10.  
    11. <head>
    12.   <meta charset="UTF-8" />
    13.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    14.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    15.   <title>十万数据渲染</title>
    16. </head>
    17.  
    18. <body>
    19.   <ul id="list-container"></ul>
    20.  
    21.   <script>
    22.     const oListContainer = document.getElementById('list-container')
    23.  
    24.     const fetchData = () => {
    25.       return new Promise(resolve => {
    26.         const response = {
    27.           code: 0,
    28.           msg: 'success',
    29.           data: [],
    30.         }
    31.  
    32.         for (let i = 0; i < 100000; i++) {
    33.           response.data.push(`content-${i + 1}`)
    34.         }
    35.  
    36.         setTimeout(() => {
    37.           resolve(response)
    38.         }, 100)
    39.       })
    40.     }
    41.  
    42.     // 模拟请求后端接口返回十万条数据
    43.     // 渲染 total 条数据中的第 page 页，每页 pageCount 条数据
    44.     const renderData = (data, total, page, pageCount) => {
    45.       // base case -- total 为 0 时没有数据要渲染 不再递归调用
    46.       if (total <= 0) return
    47.  
    48.       // total 比 pageCount 少时只渲染 total 条数据
    49.       pageCount = Math.min(pageCount, total)
    50.  
    51.       setTimeout(() => {
    52.         const startIdx = page * pageCount
    53.         const endIdx = startIdx + pageCount
    54.         const dataList = data.slice(startIdx, endIdx)
    55.  
    56.         // 将 pageCount 条数据插入到容器中
    57.         for (let i = 0; i < pageCount; i++) {
    58.           const oItem = document.createElement('li')
    59.           oItem.innerText = dataList[i]
    60.           oListContainer.appendChild(oItem)
    61.         }
    62.  
    63.         renderData(data, total - pageCount, page + 1, pageCount)
    64.       }, 0)
    65.     }
    66.  
    67.     fetchData().then(res => {
    68.       renderData(res.data, res.data.length, 0, 200)
    69.     })
    70.  
    71.   </script>
    72. </body>
    73.  
    74. </html>

    上面的例子中，我们使用了 setTimeout，在每一次宏任务中插入一页数据，然后设置多个这样地宏任务，直到把所有数据都插入为止。

    但是很明显能看到的问题是，快速拖动滚动条时，数据列表中会有闪烁的情况

    这是因为：

    当使用 setTimeout 来拆分大量的 DOM 插入操作时，虽然我们将延迟时间设置为 0ms，但实际上由于 JavaScript 是单线程的，任务执行时会被放入到事件队列中，而事件队列中的任务需要等待当前任务执行完成后才能执行。所以即使设置了 0ms 延迟，setTimeout 的回调函数也不一定会立即执行，可能会受到其他任务的阻塞。

    当 setTimeout 的回调函数执行的间隔超过了浏览器每帧更新的时间间隔（一般是 16.7ms），就会出现丢帧现象。丢帧指的是浏览器在更新页面时，没有足够的时间执行全部的任务，导致部分任务被跳过，从而导致页面渲染不连续，出现闪烁的情况

    所以，我们改善一下，通过 requestAnimationFrame 来处理

    通过 requestAnimationFrame

    1. <!--
    2.  * @Author: Jolyne
    3.  * @Date: 2023-09-22 15:45:45
    4.  * @LastEditTime: 2023-09-22 15:47:24
    5.  * @LastEditors: Jolyne
    6.  * @Description: 
    7. -->
    8. <!DOCTYPE html>
    9. <html lang="en">
    10.  
    11. <head>
    12.   <meta charset="UTF-8" />
    13.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    14.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    15.   <title>直接插入十万条数据</title>
    16. </head>
    17.  
    18. <body>
    19.   <ul id="list-container"></ul>
    20.  
    21.   <script>
    22.     const oListContainer = document.getElementById('list-container')
    23.  
    24.     const fetchData = () => {
    25.       return new Promise(resolve => {
    26.         const response = {
    27.           code: 0,
    28.           msg: 'success',
    29.           data: [],
    30.         }
    31.  
    32.         for (let i = 0; i < 100000; i++) {
    33.           response.data.push(`content-${i + 1}`)
    34.         }
    35.  
    36.         setTimeout(() => {
    37.           resolve(response)
    38.         }, 100)
    39.       })
    40.     }
    41.  
    42.     // 模拟请求后端接口返回十万条数据
    43.     // 渲染 total 条数据中的第 page 页，每页 pageCount 条数据
    44.     const renderData = (data, total, page, pageCount) => {
    45.       // base case -- total 为 0 时没有数据要渲染 不再递归调用
    46.       if (total <= 0) return
    47.  
    48.       // total 比 pageCount 少时只渲染 total 条数据
    49.       pageCount = Math.min(pageCount, total)
    50.  
    51.       requestAnimationFrame(() => {
    52.         const startIdx = page * pageCount
    53.         const endIdx = startIdx + pageCount
    54.         const dataList = data.slice(startIdx, endIdx)
    55.  
    56.         // 将 pageCount 条数据插入到容器中
    57.         for (let i = 0; i < pageCount; i++) {
    58.           const oItem = document.createElement('li')
    59.           oItem.innerText = dataList[i]
    60.           oListContainer.appendChild(oItem)
    61.         }
    62.  
    63.         renderData(data, total - pageCount, page + 1, pageCount)
    64.       })
    65.     }
    66.  
    67.     fetchData().then(res => {
    68.       renderData(res.data, res.data.length, 0, 200)
    69.     })
    70.  
    71.   </script>
    72. </body>
    73.  
    74. </html>

     

    很明显，闪烁的问题被解决了

    这是因为：

    requestAnimationFrame 会在浏览器每次进行页面渲染时执行回调函数，保证了每次任务的执行间隔是稳定的，避免了丢帧现象。所以在处理大量 DOM 插入操作时，推荐使用 requestAnimationFrame 来拆分任务，以获得更流畅的渲染效果

  • 相关阅读:
    Flutter入门教程（二）开发环境搭建
    线段树的区间修改
    Python的pytest框架（6）--测试钩子（hooks）
    Spring IoC 容器生命周期:Ioc容器启停过程发生了什么-13
    使用Docker搭建Nextcloud私有网盘
    SSM+Mysql实现的共享单车管理系统（功能包含分角色，登录、用户管理、服务点管理、单车管理、分类管理、学生信息管理、单车租赁、信息统计、系统设置等）
    R语言使用MASS包的polr函数构建有序多分类logistic回归模型、使用summary函数获取模型汇总统计信息
    进程间通信
    数据清洗（data clean）
    车载u盘支持什么格式音乐？怎么把音乐转成MP3格式？
  • 原文地址：https://blog.csdn.net/why_1639946449/article/details/134024370