如果后端返回了十万条数据要你插入到页面中,你会怎么处理?

news2024/12/24 20:13:31

当面临需要插入大量数据到页面的情况时,下面是一些建议的处理方法:

  1. 分页加载:考虑将数据分成多个页面,每次只加载当前页面所需的数据。这样可以减少一次性加载大量数据对页面性能的影响,并提供更好的用户体验。

  2. 虚拟滚动:使用虚拟滚动技术,只渲染当前可见区域的数据,而不是全部渲染。这可以显著减少渲染时的性能开销,并提高滚动时的响应速度。

  3. 延迟加载:只在用户需要时加载数据。例如,当用户滚动到页面底部时,再加载下一页的数据。这样可以逐步加载数据,减轻页面的负担。

  4. 后台分页查询:考虑在后端实现分页查询,只返回当前页所需的数据量。通过限制每次请求的数据量,可以减少数据传输和页面渲染的时间。

  5. 数据缓存:如果数据是经常被使用的,并且不经常变化,可以考虑在前端进行数据缓存。这样可以避免每次加载都从后端请求数据,提高页面的加载速度。

以上这些方法可以根据具体的场景和需求进行组合使用。重要的是权衡性能和用户体验,确保页面加载和操作的流畅性。

下面是我使用的 时间分片来处理

通过 setTimeout

直接上一个例子:

<!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>
  <ul id="list-container"></ul>

  <script>
    const oListContainer = document.getElementById('list-container')

    const fetchData = () => {
      return new Promise(resolve => {
        const response = {
          code: 0,
          msg: 'success',
          data: [],
        }

        for (let i = 0; i < 100000; i++) {
          response.data.push(`content-${i + 1}`)
        }

        setTimeout(() => {
          resolve(response)
        }, 100)
      })
    }

    // 模拟请求后端接口返回十万条数据
    // 渲染 total 条数据中的第 page 页,每页 pageCount 条数据
    const renderData = (data, total, page, pageCount) => {
      // base case -- total 为 0 时没有数据要渲染 不再递归调用
      if (total <= 0) return

      // total 比 pageCount 少时只渲染 total 条数据
      pageCount = Math.min(pageCount, total)

      setTimeout(() => {
        const startIdx = page * pageCount
        const endIdx = startIdx + pageCount
        const dataList = data.slice(startIdx, endIdx)

        // 将 pageCount 条数据插入到容器中
        for (let i = 0; i < pageCount; i++) {
          const oItem = document.createElement('li')
          oItem.innerText = dataList[i]
          oListContainer.appendChild(oItem)
        }

        renderData(data, total - pageCount, page + 1, pageCount)
      }, 0)
    }

    fetchData().then(res => {
      renderData(res.data, res.data.length, 0, 200)
    })

  </script>
</body>

</html>

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

在这里插入图片描述
但是很明显能看到的问题是,快速拖动滚动条时,数据列表中会有闪烁的情况

这是因为:

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

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

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

通过 requestAnimationFrame

<!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>
  <ul id="list-container"></ul>

  <script>
    const oListContainer = document.getElementById('list-container')

    const fetchData = () => {
      return new Promise(resolve => {
        const response = {
          code: 0,
          msg: 'success',
          data: [],
        }

        for (let i = 0; i < 100000; i++) {
          response.data.push(`content-${i + 1}`)
        }

        setTimeout(() => {
          resolve(response)
        }, 100)
      })
    }

    // 模拟请求后端接口返回十万条数据
    // 渲染 total 条数据中的第 page 页,每页 pageCount 条数据
    const renderData = (data, total, page, pageCount) => {
      // base case -- total 为 0 时没有数据要渲染 不再递归调用
      if (total <= 0) return

      // total 比 pageCount 少时只渲染 total 条数据
      pageCount = Math.min(pageCount, total)

      requestAnimationFrame(() => {
        const startIdx = page * pageCount
        const endIdx = startIdx + pageCount
        const dataList = data.slice(startIdx, endIdx)

        // 将 pageCount 条数据插入到容器中
        for (let i = 0; i < pageCount; i++) {
          const oItem = document.createElement('li')
          oItem.innerText = dataList[i]
          oListContainer.appendChild(oItem)
        }

        renderData(data, total - pageCount, page + 1, pageCount)
      })
    }

    fetchData().then(res => {
      renderData(res.data, res.data.length, 0, 200)
    })

  </script>
</body>

</html>

在这里插入图片描述
很明显,闪烁的问题被解决了

这是因为:

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1100855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TCP/IP(十七)实战抓包分析(一)ICMP

一 TCP实战抓包分析 网络排查案例 ① 抓包分析涉及的内容 关于&#xff1a; TCP理论知识和tcpdump命令的知识,前面已经铺垫过了,这里不再赘述下面罗列了TCP的重点知识 客户端工具&#xff1a; curl、wget、postman、telnet、浏览器、ncwget --bind-addressADDRESS 指定…

Devdept Eyeshot Fem 2024.1 Crack

Eyeshot 是.NET 的 CAD 控件。它原生支持Windows Forms和Windows Presentation Foundation。它附带四个不同的Visual Studio工具箱项目&#xff1a;用于 2D 和 3D 几何创建或编辑的设计、用于自动 2D 视图生成的 绘图、使用线性静态分析进行几何验证的模拟以及用于CNC刀具路径生…

c 语言基础:L1-041 寻找250

对方不想和你说话&#xff0c;并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字。 输入格式&#xff1a; 输入在一行中给出不知道多少个绝对值不超过1000的整数&#xff0c;其中保证至少存在一个“250”。 输出格式&#xff1a; 在一行中输出第一…

户外LED大屏推广的精确受众分析-华媒舍

随着科技的不断发展和人们对广告推广方式的需求不断变化&#xff0c;户外LED大屏作为一种新兴的广告形式&#xff0c;吸引了越来越多企业的注意。要想提高广告推广效果&#xff0c;就需要进行精确受众分析&#xff0c;以确保广告准确地传达给目标受众。本文将介绍户外LED大屏推…

如何将IDEA控制台输出的路径折叠起来,只留到java.exe

参考资料&#xff1a; idea运行时显示一堆路径_idea打印sql出现省略号-CSDN博客 1.问题现象&#xff1a; 2.预期效果&#xff1a; 3.问题产生原因&#xff1a; 环境变量没配好&#xff0c;重新配好就行了。(注&#xff1a;我配了&#xff0c;没成功&#xff0c;重新新建了一个m…

figma拉伸画板,导致元素变形,一键搞定

先来看问题&#xff0c;第一张是原图&#xff0c;第二张是拉伸画板后出现的问题 老样子废话不多说&#xff0c;直接上解决办法&#xff01; MAC按住Cmd进行拉伸&#xff0c;windows按住Ctrl进行拉伸即可&#xff01;

找回共享盘里被误删文件的几种方法

在我们使用共享盘进行文件存储和共享的过程中&#xff0c;不可避免地会遇到误删文件的情况。而这些文件可能是我们努力工作的成果&#xff0c;或者是珍贵的回忆。因此&#xff0c;本文将介绍一些方法来帮助您找回共享盘中误删的文件。 图片来源于网络&#xff0c;如有侵权请告知…

通过商品ID查询京东商品详情数据,可以拿到商品标题,商品价格,商品库存,商品销量,商品sku数据等,京东API接口

要通过商品ID查询京东商品详情数据&#xff0c;可以按照以下步骤进行&#xff1a; 在京东开放平台注册开发者账号&#xff0c;并创建应用。在创建应用时&#xff0c;选择商品API权限。在您的应用中&#xff0c;找到获取商品详情数据的接口。京东开放平台提供了多个API接口来获…

(实操)生命周期配置

Hello大家好&#xff61; 在本课时我们将了解如何使用S3的生命周期配置来管理我们的对象。 回到S3控制台&#xff0c;选择iloveawscn-saa这个存储桶&#xff0c;然后点击上面的“管理”。在这里&#xff0c;我们可以创建生命周期规则&#xff0c;我们点击“创建生命周期规则”。…

【137.只出现一次的数字Ⅱ】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 class Solution { public:int singleNumber(vector<int>& nums) {int bitset0;for(int i0;i<32;i){int sum0;for(auto num:nums){if((num>>i)&1){sum;}}sum%3;if(s…

UnitTesting 单元测试

1. 测试分为两种及详细介绍测试书籍: 1.1 Unit Test : 单元测试 - test the business logic in your app : 测试应用中的业务逻辑 1.2 UI Test : 界面测试 - test the UI of your app : 测试应用中的界面 1.3 测试书籍网址:《Testing Swift》 https://www.hackingwithswift.c…

win10安装nginx及简单使用(命令)

下载 下载地址&#xff1a;http://nginx.org/en/download.html 使用 解压 更改配置 conf目录下nginx.conf 修改为未被占用的端口&#xff0c;地址改成你的地址 server {# 监听端口 listen 9010;# 地址 server_name 127.0.0.1;# 静态资源location / {root html;i…

web前端开发基础---表格类页面

插入表格 <table>用于创建表格&#xff0c;<tr>表示表格的一行&#xff0c;<td>表示一个单元格 <td>与<th>标签的用法一致&#xff0c;往往<td>存储数据,<th>存储数据标题 <th>中的内容默认是加粗&#xff0c;居中显示的。…

智慧公厕管理系统:科技赋能城市公共卫生服务的便利

在现代社会的城市化进程中&#xff0c;公共设施的管理变得越来越重要。而公厕作为城市公共设施的重要组成部分&#xff0c;也需要借助科技的力量进行管理和监控。智慧公厕管理系统应运而生&#xff0c;它为公厕管理人员提供了实时监控和数据统计分析的功能&#xff0c;大大提高…

0基础学习VR全景平台篇第109篇:认识拼接软件PTGui Pro

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01;今天给大家讲解我们全景后期拼接软件PTgui pro&#xff0c;下面我们开始吧&#xff01; &#xff08;PTgui pro软件课程大纲&#xff09; 1.PTGui这个软件是什么 发明人 &#xf…

2023年中国建筑检测行业现状分析:国家政策推行[图]

建筑检测是指建设工程质量检测机构接受委托&#xff0c;依据国家有关法律、法规和工程建设强制性标准与相关规范&#xff0c;对涉及工程结构安全、使用功能和进入施工现场的建筑材料、构配件、设备的性能进行抽样检测和见证取样检测。 建设检测行业的下游主要是基础设施建设、房…

零售业:用这个小技巧,轻松搞定业绩!

自动售货机是一种现代化的零售解决方案&#xff0c;它已经深刻改变了我们购物的方式。不仅为消费者提供了更多的购物选择&#xff0c;还为企业提供了一种创新的销售渠道。 随着科技的不断进步&#xff0c;自动售货机已经从简单的零食和饮料销售机演化成了多功能的智能终端&…

俄罗斯YandexGPT 2在国家考试中获得高分;OpenAI API开发者快速入门指南

&#x1f989; AI新闻 &#x1f680; 俄罗斯YandexGPT 2聊天机器人成功在国家考试中获得高分 摘要&#xff1a;俄罗斯YandexGPT 2聊天机器人通过国家统一考试文学科目&#xff0c;以55分的加权分数成功进入大学。Yandex团队强调他们在开发过程中确保数据库不包含任何关于统考…

基于 ceph-deploy 部署 Ceph 集群

基于 ceph-deploy 部署 Ceph 集群 1、存储基础1.1单机存储设备1.2单机存储的问题1.3单机存储问题的解决方案1.3.1商业存储解决方案1.3.2分布式存储&#xff08;软件定义的存储 SDS&#xff09; 2、分布式存储2.1常见的分布式存储2.2分布式存储的类型 3、Ceph概述3.1Ceph简介3.2…

浅谈自媒体运营

文章目录 一、内容创作1.定位目标受众2.多元化的内容形式3.保持内容更新频率 二、推广渠道1.线上推广(1)微信公众号(2)微博(3)抖音、快手等短视频平台 2.线下推广 三、数据分析1.关注读者反馈2.分析数据 自媒体运营全攻略&#xff1a;文案写作流量打造个人品牌优势定位本书亮点…