位置: 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)(非洲加纳霍霍埃族是个国家吗)

  • 微信状态可以看访客吗(微信状态可以看到浏览记录吗)

    微信状态可以看访客吗(微信状态可以看到浏览记录吗)

  • 频繁访问某人抖音他会有提示的吗(频繁访问某人抖音有浏览记录吗)

    频繁访问某人抖音他会有提示的吗(频繁访问某人抖音有浏览记录吗)

  • vivo手机如何设置字体大小(vivo手机如何设置动态壁纸)

    vivo手机如何设置字体大小(vivo手机如何设置动态壁纸)

  • 网络设备在什么情况下会发送ARP REQUEST?(网络设备什么工作于网络层)

    网络设备在什么情况下会发送ARP REQUEST?(网络设备什么工作于网络层)

  • 街电充电宝怎么还回去(街电充电宝怎么使用)

    街电充电宝怎么还回去(街电充电宝怎么使用)

  • 华为手机怎样把几张照片拼在一起(华为手机怎样把时间改为24小时制)

    华为手机怎样把几张照片拼在一起(华为手机怎样把时间改为24小时制)

  • m2固态和sata固态能一起用吗(m2固态硬盘和sata固态哪个好)

    m2固态和sata固态能一起用吗(m2固态硬盘和sata固态哪个好)

  • 卸载质量更新什么意思(卸载质量更新和功能更新什么意思)

    卸载质量更新什么意思(卸载质量更新和功能更新什么意思)

  • ctrl+S什么意思

    ctrl+S什么意思

  • 耳机音质怎么调(耳机音质怎么调节)

    耳机音质怎么调(耳机音质怎么调节)

  • ios12字体是什么字体(ios12字体叫什么)

    ios12字体是什么字体(ios12字体叫什么)

  • vivos5怎么一键锁屏(教你vivo手机这样设置下,马上一键锁屏,很实用!)

    vivos5怎么一键锁屏(教你vivo手机这样设置下,马上一键锁屏,很实用!)

  • 手机上显示月亮怎么关(手机上显示月亮标志怎么关闭)

    手机上显示月亮怎么关(手机上显示月亮标志怎么关闭)

  • 苹果手机可以扩容吗(苹果手机可以扩容内存吗)

    苹果手机可以扩容吗(苹果手机可以扩容内存吗)

  • 华为magic book笔记本怎么下载软件(华为magicbook笔记本官网)

    华为magic book笔记本怎么下载软件(华为magicbook笔记本官网)

  • 怎么看自己的闲鱼id(怎么看自己的闲鱼信用等级)

    怎么看自己的闲鱼id(怎么看自己的闲鱼信用等级)

  • 文本填充效果怎么设置(文本填充怎么搞)

    文本填充效果怎么设置(文本填充怎么搞)

  • qq群全员禁言怎么回事(qq群全员禁言怎么解除)

    qq群全员禁言怎么回事(qq群全员禁言怎么解除)

  • 颂拓9怎么关机(颂拓9如何重置)

    颂拓9怎么关机(颂拓9如何重置)

  • 如何永久保存网课(如何永久保存网课视频)

    如何永久保存网课(如何永久保存网课视频)

  • 华为vie一al10(华为vie–al10价格参数比)

    华为vie一al10(华为vie–al10价格参数比)

  • 反向摄像头抓拍什么(反向摄像头拍闯红灯吗)

    反向摄像头抓拍什么(反向摄像头拍闯红灯吗)

  • 拼多多怎么合并付款(拼多多怎么合并退货)

    拼多多怎么合并付款(拼多多怎么合并退货)

  • 如何在线网络测速呢?(如何网络测试)

    如何在线网络测速呢?(如何网络测试)

  • element ui datepicker时间控件实现范围选择周,季,年。(element ui datepicker 源码)

    element ui datepicker时间控件实现范围选择周,季,年。(element ui datepicker 源码)

  • Kali Linux利用MSF入侵安卓手机(小白版超详细)(kali linux如何使用)

    Kali Linux利用MSF入侵安卓手机(小白版超详细)(kali linux如何使用)

  • phpcms中怎么判断是否为首页(php判断useragent)

    phpcms中怎么判断是否为首页(php判断useragent)

  • 个体工商户是否跨省经营
  • 外资企业法最新
  • 企业进口葡萄酒也要缴纳消费税吗
  • 未达起征点增值税能否开票
  • 销售农产品是否可以抵税
  • 房产公司售楼部装修费入什么会计科目
  • 制造费用结转成什么
  • 资本公积与什么有关
  • 工程材料增值税税率2023年
  • 其他收益科目账务处理
  • 公司收个人不开票的货款是否可以收取现金?
  • 应付未付的款项如何税务处理
  • 税金及附加里面有印花税吗
  • 小规模纳税人增值税优惠政策2023
  • 注册资本转让股权
  • 对外捐赠视同销售分录
  • 房屋租赁税务局开票税点
  • 制造费用年末需要结转吗
  • 会计调账必须写说明吗
  • 上月计提租赁费下月扣怎么做账
  • 支付测量费的补贴费用怎么记账
  • 客户扣款会计分录明细科目
  • 网上申报附加税怎么报
  • win10怎么恢复被系统删除的文件
  • 未到期的商业票据是什么
  • 网络适配器感叹号代码43
  • 去除页眉的横线快捷方式
  • 公司利润为负数 贷款
  • 小规模企业年末怎么结转
  • linux硬链接命令
  • vue前端代码实例
  • 福利费发票已认证怎么查
  • win11怎么桌面快捷方式
  • 单位未足额缴纳社保可以补交几年
  • 无私有住房证明怎么开
  • 若依管理系统前端代码分析
  • 汉密尔顿岛在哪里
  • elipse左侧菜单栏显示
  • 帝国cms配置数据库
  • 信息技术服务所得税税负率多少
  • mysql基本sql语句大全(基础用语篇)
  • 所得税汇算清缴退税会计分录怎么做
  • 借款的帐务处理?
  • 预提的费用当年必须冲掉吗
  • 怎样增加资产负债率
  • 背书转让操作
  • 企业注销资本公示时间
  • 购货方收到红字发票计入进项税转出还是进项税额负数?
  • 关于事业支出期末的结转
  • 免税如何做分录发票
  • 去年的账科目记错了怎么办
  • 出口退税的计算与流程
  • 小企业会计准则主要按照什么计量
  • 收回投标保证金 建立台账
  • 边际成本是什么意思大白话
  • 营业执照过期多久不能审
  • 新成立公司怎么办理社保开户
  • 企业清算的会计处理
  • mysqlusing
  • SQL Server提示"选定的用户拥有对象,所以无法除去该用户”
  • 从硬盘安装系统
  • linux chfn命令
  • 苹果mac系统怎么安装pip工具
  • windows8_os
  • 向Windows8靠拢 全新的个性化库页面
  • windows8无法安装wps
  • android屏幕适配的五种方式
  • toggle button什么作用
  • 相同目录
  • unity与android交互详细
  • vue vue cli
  • python数据清洗的方法有哪些
  • dom基础知识
  • 陕西省地方税务局公告2017年第2号
  • 交通运输业的税率9%和13%
  • 环保税新政策
  • 营业执照三证合一图片
  • 税务机关宣传
  • 超期未申报还能申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设