位置: IT常识 - 正文

前端如何处理后端一次性传来的10w条数据?(何为前端后端)

编辑:rootadmin
前端如何处理后端一次性传来的10w条数据? 写在前面

推荐整理分享前端如何处理后端一次性传来的10w条数据?(何为前端后端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端如何处理后端的问题,前端如何处理后端数据,前端如何处理后端返回的页面?,前端处理后端数据,前端如何处理后端的问题,前端如何处理后端返回的页面?,前端如何处理后端返回数据量大的问题,前端如何处理后端返回的页面?,内容如对您有帮助,希望把文章链接给更多的朋友!

如果你在面试中被问到这个问题,你可以用下面的内容回答这个问题,如果你在工作中遇到这个问题,你应该先揍那个写 API 的人。

创建服务器

为了方便后续测试,我们可以使用node创建一个简单的服务器。

const http = require('http')const port = 8000;let list = []let num = 0// create 100,000 recordsfor (let i = 0; i < 100_000; i++) { num++ list.push({ src: '', text: `hello world ${num}`, tid: num })}http.createServer(function (req, res) { // for Cross-Origin Resource Sharing (CORS) res.writeHead(200, { 'Access-Control-Allow-Origin': '*', "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS", 'Access-Control-Allow-Headers': 'Content-Type' }) res.end(JSON.stringify(list));}).listen(port, function () { console.log('server is listening on port ' + port);})node server.js//把服务器运行起来创建前端模板页面

然后我们的前端由一个 HTML 文件和一个 JS 文件组成。

Index.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> <style> * { padding: 0; margin: 0; } #container { height: 100vh; overflow: auto; } .sunshine { display: flex; padding: 10px; } img { width: 150px; height: 150px; }</style></head><body> <div id="container"> </div> <script src="./index.js"></script></body></html>

Index.js:

// fetch data from the serverconst getList = () => { return new Promise((resolve, reject) => { var ajax = new XMLHttpRequest(); ajax.open('get', 'http://127.0.0.1:8000'); ajax.send(); ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { resolve(JSON.parse(ajax.responseText)) } } })}// get `container` elementconst container = document.getElementById('container')// The rendering logic should be written here.

好的,这就是我们的前端页面模板代码,我们开始渲染数据。

直接渲染

最直接的方法是一次将所有数据渲染到页面。代码如下:

const renderList = async () => { const list = await getList() list.forEach(item => { const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` container.appendChild(div) })}renderList()

一次渲染 100,000 条记录大约需要 12 秒,这显然是不可取的。  

通过 setTimeout 进行分页渲染前端如何处理后端一次性传来的10w条数据?(何为前端后端)

一个简单的优化方法是对数据进行分页。假设每个页面都有limit记录,那么数据可以分为Math.ceil(total/limit)个页面。之后,我们可以使用 setTimeout 顺序渲染页面,一次只渲染一个页面。

const renderList = async () => { const list = await getList() const total = list.length const page = 0 const limit = 200 const totalPage = Math.ceil(total / limit) const render = (page) => { if (page >= totalPage) return setTimeout(() => { for (let i = page * limit; i < page * limit + limit; i++) { const item = list[i] const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` container.appendChild(div) } render(page + 1) }, 0) } console.time("time"); render(page) console.timeEnd("time");//time: 0.27392578125 ms}​

分页后,数据可以快速渲染到屏幕上,减少页面的空白时间。

requestAnimationFrame

在渲染页面的时候,我们可以使用requestAnimationFrame来代替setTimeout,这样可以减少reflow次数,提高性能。

const renderList = async () => { const list = await getList() const total = list.length const page = 0 const limit = 200 const totalPage = Math.ceil(total / limit) const render = (page) => { if (page >= totalPage) return requestAnimationFrame(() => { for (let i = page * limit; i < page * limit + limit; i++) { const item = list[i] const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` container.appendChild(div) } render(page + 1) }) } console.time("time"); render(page) console.timeEnd("time");//time: 0.27685546875 ms 这里改善不明显}

window.requestAnimationFrame () 方法告诉浏览器您希望执行动画,并请求浏览器调用指定函数在下一次重绘之前更新动画。该方法将回调作为要在重绘之前调用的参数。

文档片段

以前,每次创建 div 元素时,都会通过 appendChild 将元素直接插入到页面中。但是 appendChild 是一项昂贵的操作。

实际上,我们可以先创建一个文档片段,在创建了 div 元素之后,再将元素插入到文档片段中。创建完所有 div 元素后,将片段插入页面。这样做还可以提高页面性能。

const renderList = async () => { console.time('time') const list = await getList() console.log(list) console.timeEnd('time') console.time('time2') const total = list.length const page = 0 const limit = 200 const totalPage = Math.ceil(total / limit) const render = (page) => { if (page >= totalPage) return requestAnimationFrame(() => { const fragment = document.createDocumentFragment() for (let i = page * limit; i < page * limit + limit; i++) { const item = list[i] const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` fragment.appendChild(div) } container.appendChild(fragment) render(page + 1) }) } render(page) console.timeEnd('time2')//time2: 0.195068359375 ms 有改善}延迟加载

虽然后端一次返回这么多数据,但用户的屏幕只能同时显示有限的数据。所以我们可以采用延迟加载的策略,根据用户的滚动位置动态渲染数据。

要获取用户的滚动位置,我们可以在列表末尾添加一个空节点空白。每当视口出现空白时,就意味着用户已经滚动到网页底部,这意味着我们需要继续渲染数据。

同时,我们可以使用getBoundingClientRect来判断空白是否在页面底部。

使用 Vue 的示例代码:

<script setup lang="ts">import { onMounted, ref, computed } from 'vue'const getList = () => { // code as before}const container = ref<HTMLElement>() // container elementconst blank = ref<HTMLElement>() // blank elementconst list = ref<any>([])const page = ref(1)const limit = 200const maxPage = computed(() => Math.ceil(list.value.length / limit))// List of real presentationsconst showList = computed(() => list.value.slice(0, page.value * limit))const handleScroll = () => { if (page.value > maxPage.value) return const clientHeight = container.value?.clientHeight const blankTop = blank.value?.getBoundingClientRect().top if (clientHeight === blankTop) { // When the blank node appears in the viewport, the current page number is incremented by 1 page.value++ }}onMounted(async () => { const res = await getList() list.value = res})</script><template> <div id="container" @scroll="handleScroll" ref="container"> <div class="sunshine" v-for="(item) in showList" :key="item.tid"> <img :src="item.src" /> <span>{{ item.text }}</span> </div> <div ref="blank"></div> </div></template>最后

我们从一个面试问题开始,讨论了几种不同的性能优化技术。

作者:前端学习站 链接:https://www.zhihu.com/question/525562842/answer/2536419265 来源:知乎  

本文链接地址:https://www.jiuchutong.com/zhishi/292933.html 转载请保留说明!

上一篇:CNN(一维卷积Conv1D)实现时间序列预测(PyTorch版)(一维卷积padding)

下一篇:纳加尔霍雷国家公园的孔雀,印度卡纳塔克邦 (© Vivek BR/Shutterstock)(非洲加纳霍霍埃族是个国家吗)

  • 分析文章营销技巧与推广方法(营销技巧分析)

    分析文章营销技巧与推广方法(营销技巧分析)

  • 论坛发帖推广的几个技巧(论坛发帖推广的目的)

    论坛发帖推广的几个技巧(论坛发帖推广的目的)

  • 打印机共享0000709(打印机共享0000040)

    打印机共享0000709(打印机共享0000040)

  • applewatch7血氧怎么测量(iwatch血氧功能怎么打开)

    applewatch7血氧怎么测量(iwatch血氧功能怎么打开)

  • 电脑着火了正确的做法是

    电脑着火了正确的做法是

  • b450能放哪些cpu(b450能带什么cpu)

    b450能放哪些cpu(b450能带什么cpu)

  • 打印机尺寸一般多大(打印机尺寸对照表)

    打印机尺寸一般多大(打印机尺寸对照表)

  • 淘宝阿里发票在哪(淘宝阿里发票在哪里找)

    淘宝阿里发票在哪(淘宝阿里发票在哪里找)

  • 微信聊天记录可以隐藏的吗(微信聊天记录可以恢复多久以前的)

    微信聊天记录可以隐藏的吗(微信聊天记录可以恢复多久以前的)

  • 苹果可以用两个微信吗(苹果可以用两个微信分身)

    苹果可以用两个微信吗(苹果可以用两个微信分身)

  • qq消息免打扰什么意思(qq里消息免打扰)

    qq消息免打扰什么意思(qq里消息免打扰)

  • 兼容性检查器怎么回事(兼容性检查器怎么解决word)

    兼容性检查器怎么回事(兼容性检查器怎么解决word)

  • 苹果手机删除不了照片怎么回事(苹果手机删除不了app怎么回事)

    苹果手机删除不了照片怎么回事(苹果手机删除不了app怎么回事)

  • 华为屏幕录制不见了(华为屏幕录制不开麦克风)

    华为屏幕录制不见了(华为屏幕录制不开麦克风)

  • ipadair3用pencil几代(ipad air3可用pencil)

    ipadair3用pencil几代(ipad air3可用pencil)

  • 微信绑定手机号操作过于频繁(微信绑定手机号注销了微信还能用吗)

    微信绑定手机号操作过于频繁(微信绑定手机号注销了微信还能用吗)

  • 计算机主频用什么表示(计算机主频的概念)

    计算机主频用什么表示(计算机主频的概念)

  • 苹果6电池一般多少毫安(苹果6电池一般多少钱)

    苹果6电池一般多少毫安(苹果6电池一般多少钱)

  • 手机怎么将两张照片合在一起(手机怎么将两张照片拼接在一起)

    手机怎么将两张照片合在一起(手机怎么将两张照片拼接在一起)

  • 唯品会能修改登录账号吗(唯品会怎么修改登录名)

    唯品会能修改登录账号吗(唯品会怎么修改登录名)

  • 移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

    移动魔百盒怎么看卫视(移动魔百盒怎么恢复出厂设置)

  • 苹果双卡双待的是什么型号(苹果双卡双待的怎么切换)

    苹果双卡双待的是什么型号(苹果双卡双待的怎么切换)

  • 玩游戏手机发热(玩游戏手机发热是什么原因)

    玩游戏手机发热(玩游戏手机发热是什么原因)

  • pppoe错误是什么意思(pppoe失败691)

    pppoe错误是什么意思(pppoe失败691)

  • 笔记本恢复出厂设置教程(笔记本恢复出厂设置后和新的一样吗)

    笔记本恢复出厂设置教程(笔记本恢复出厂设置后和新的一样吗)

  • 个人独资企业要注意什么
  • 小规模附加税如何做帐
  • 物业收电费有问题找谁解决
  • 信息技术服务可以简易征收吗
  • 公司账户被法院冻结了多久可以恢复
  • 临时占用耕地可以种树吗
  • 产权转让与股权转让
  • 电子承兑背书失败是怎么回事
  • 建筑安装业什么时候确认收入
  • 补开的银行手续费发票怎么做账
  • 企业股东投资
  • 货样广告品出口需要开票吗
  • 事业单位自筹事业人员
  • 发票认证了还能退回吗
  • 金税盘在电脑上怎么打开
  • 小规模装饰公司干150万的活开专票需要多少钱
  • 固定资产金额小于5000元,可以不一次性税前扣除吗
  • 新个税过了申报期怎么办
  • 纳税人在什么情况下可以申请延期申报
  • 使用专项资金购买的固定资产 需要取得发票吗
  • 购买原材料并作会计分录
  • 企业所得税税率表2023年最新
  • 一次性伤残补助金由谁支付
  • 个人出售普通住房个人所得税
  • 重装系统后分辨率1920x1080不见了
  • windows7便签删除了怎么恢复
  • PHP:Memcached::append()的用法_Memcached类
  • PHP:curl_multi_exec()的用法_cURL函数
  • 营改增后的增值税税目税率表
  • 2022年开始,手握大量现金的人
  • 为什么老是跳到别的网站
  • 基于php实现简单函数
  • anaconda创建虚拟环境有什么用
  • 在代开发票时已经预缴个人所得税了,怎么处理?
  • php常用加密方式
  • 基本数据结构包括哪些
  • 销售返利的账务处理购买方
  • 利用职务之便谋取私利是什么罪
  • mysql字符集详解
  • 非金融企业借款利息收入计入什么科目
  • 事业单位成本核算具体指引—公立医院
  • 丢失增值税发票怎么办
  • SQL Server 2005通用分页存储过程及多表联接应用
  • 保理公司会计核算讲解
  • 物业费分解
  • 失业保险金领取多少钱
  • 资产的计税基础通俗理解
  • 总结哪些纳税人可以采用简易计税方法
  • 办理契税所需要的证件
  • 关税计入什么科目
  • 小规模开票的税点是多少
  • 可供分配利润包括哪些
  • 一般纳税人的服务费税率是多少
  • 向非金融企业借款会计分录
  • 公司汽车上牌费用多少
  • sql语句查询有多少条数据
  • 电脑主机windows 7
  • 电脑xp系统如何
  • win2008远程桌面闪退
  • macos终端删除文件
  • ubuntu的sudo
  • xp电脑小游戏
  • win10开机提示xwz
  • 每日一个linux命令
  • linux里面vim
  • unity物理效果
  • opengl怎么导入模型
  • android面试题及答案2021
  • android课程心得体会
  • 详解杭州亚运会会徽和口号
  • 遍历字符串python
  • jquery悬浮弹出提示框
  • javascript面向对象精要pdf
  • js判断怎么写
  • 大学奖学金需要什么材料
  • 江苏国家电子税务局官网登录
  • 武汉洪山实验中学是初中还是高中
  • 非盈利org
  • 房产税税源编号
  • 辽宁税务局代码是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设