前端较大数据传输优化方案(上)

本文涉及的产品
数据传输服务 DTS,数据同步 small 3个月
推荐场景:
数据库上云
数据传输服务 DTS,数据迁移 small 3个月
推荐场景:
MySQL数据库上云
数据传输服务 DTS,数据同步 1个月
简介: 前端较大数据传输优化方案

92a1e15c83028b4b6ab0f931cb3fb1b.png

前言

今天刷抖音看到一个与前端海量数据下载优化相关的问题(在大数据资源请求的时候,前端如果等待所有数据加载完,那么页面从请求到最终呈现内容,会有很长一段的空白期,如何优化响应速度呢,这就需要我们对响应数据做切片处理了),刚好学习了顺便对客户端请求数据的相关知识简单做了下总结复习

关于 Fetch

mdn文档:使用 Fetch - Web API 接口参考 | MDN (mozilla.org)

Fetch API 提供了一个 JavaScript 接口,用于访问和操纵 HTTP 管道的一些具体部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源

视频的内容是基于 fetch 展开做讲解的,这里我们也一样,先用 fetch 为案例降解,后续用 axios 以同样的思路再做一遍

首先我们看一下官网提供的一段代码

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
复制代码

这里我们发现 fetch 发送请求时里边有 2 个 then,有的同学可能会有疑问,毕竟现在大部分项目使用的请求库都是 axios ,实际上 axios 也有这两个过程,只不过 axios 在内部把第一步 .json()或者.text() 数据转化的过程处理掉了,直接返回了我们处理后的结果

关于请求过程

68e50797c3a52fcae350a2e144b2630.png

前面提到,在请求中第一个异步回调有两个数据处理的方法 json()和text() ,而这些方法的调用都有一个前提,就是必须等待请求头 header 传输完成后才可以调用

而后一个回调则是需要等待整个body传输完成后触发,这就意味着,如果body数据很大的话,那么等待响应就需要很长的时间

优化思路

既然等待整个body传输完再响应需要花很长时间,那么我们能不能在body传输的过程中就取到数据呢?就是传输一点用一点(即分片),答案是可以的,那么具体怎么做呢,请看下面

优化方法

fetch 方法在它的第一个响应体中提供了一个方法 getReader ,可以获取一个观察加载进度的对象,这个对象上又提供了一个read方法,可以异步的获取当前读取的数据内容(value 字节数组)和加载状态(done,未加载完成时为false,全部加载完成时为true),我们可以根据这个 done 的状态做一个递归,直到加载完成时一直去读取当前已加载好的数据进行处理

TextDecoder 文本解码器,用来处理文本数据

async function loadBody (url) {
    const res = await fetch(url)
    const reader = await res.body.getReader()
    let flag = false
    while(!flag) {
        const { value, done } = await reader.read()
        flag = done
        const decoder = new TextDecoder() // 文本解码器
        decoder.decode(value)
        const text = decoder.decode(value)
        console.log(text);
    }
}
复制代码

现在我们拿一个本地 txt 文件,在浏览器慢速3G模式下调用一下上面的方法看看效果

ee434c8d24825496f3543e6b149c6a8.png

我们发现数据已经可以按照我们的期望做到分段加载了

但是细心的同学会发现现在还有一点小瑕疵,就是在切分点,由于字节的截取,很有可能在还原时造成乱码,这时就需要我们对这些切割点做特殊处理了,关于切割点如何优化处理,还有使用 axios 时如何分片,我们会在下一节在做详细讲解,敬请关注

相关实践学习
部署高可用架构
本场景主要介绍如何使用云服务器ECS、负载均衡SLB、云数据库RDS和数据传输服务产品来部署多可用区高可用架构。
Sqoop 企业级大数据迁移方案实战
Sqoop是一个用于在Hadoop和关系数据库服务器之间传输数据的工具。它用于从关系数据库(如MySQL,Oracle)导入数据到Hadoop HDFS,并从Hadoop文件系统导出到关系数据库。 本课程主要讲解了Sqoop的设计思想及原理、部署安装及配置、详细具体的使用方法技巧与实操案例、企业级任务管理等。结合日常工作实践,培养解决实际问题的能力。本课程由黑马程序员提供。
目录
打赏
0
0
0
0
2
分享
相关文章
大数据 优化数据读取
【11月更文挑战第4天】
107 2
大数据分区优化存储成本
大数据分区优化存储成本
68 4
大数据增加分区优化资源使用
大数据增加分区优化资源使用
56 1
深入剖析极态云优雅的前端框架设计方案(上)
最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
大数据-164 Apache Kylin Cube优化 案例1 定义衍生维度与对比 超详细
大数据-164 Apache Kylin Cube优化 案例1 定义衍生维度与对比 超详细
65 1
大数据-164 Apache Kylin Cube优化 案例1 定义衍生维度与对比 超详细
大数据 数据存储优化
【10月更文挑战第25天】
161 2
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
88 4
大数据-165 Apache Kylin Cube优化 案例 2 定义衍生维度及对比 & 聚合组 & RowKeys
大数据-165 Apache Kylin Cube优化 案例 2 定义衍生维度及对比 & 聚合组 & RowKeys
69 1
拿下奇怪的前端报错(四):1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点
在一个使用MongoDB GridFS存储文件的项目中,音频和视频文件在大部分设备上播放时长显示为无限,而单独播放则正常。经调查发现,问题源于HTTP Range请求的处理不当,导致最后一个字节未被正确返回。通过调整请求参数,使JavaScript/MongoDB的操作范围与HTTP Range一致,最终解决了这一问题。此案例强调了对HTTP协议深入理解及跨系统集成时注意细节的重要性。

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    24
  • 3
    详解智能编码在前端研发的创新应用
    17
  • 4
    巧用通义灵码,提升前端研发效率
    16
  • 5
    智能编码在前端研发的创新应用
    12
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    10
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    28
  • 8
    VSCode AI提效工具,通义灵码前端开发体验
    70
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等