html加载字节流,流加载是什么

本文介绍了流加载的概念,即下载与加载同步,以提高小程序的启动速度。通过使用ttpkg包替换zip包,资源加载时机提前,以及app-service.js和game.js的拆分优化,实现了流加载的各个阶段,从而减少首屏渲染时间和加载时间。同时,也讨论了流加载可能带来的副作用和解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用一句话来解释 流加载,那就是“下载程序包的同时加载包内的文件”,下载与加载并发可以加速小程序首次无缓存启动的时间。

为了提升小程序加载速度,我们做了下列改动:

流加载 1 期:实现下载与加载同步

使用 ttpkg 包替代 zip 包

在流加载方案之前,小程序的文件都是压缩到 zip 包内的,尽管 zip 包的体积更小,但 zip 包内的文件需要等完整的 zip 包下载好后才能解压出来使用,解压也需要时间。

在流加载方案中,我们改用 ttpkg 包来装载小程序的文件,ttpkg 包是未压缩过的二进制文件包,可以直接读取包内指定区域的二进制数据。ttpkg 包相比于压缩的 zip 包体积会更大,通过开启 CDN 智能压缩服务,在 ttpkg 包请求过程中,服务器对返回的 ttpkg 数据进行 gzip 编码,压缩重复的字符串等,可以减少 ttpkg 包的传输大小,从而缩短下载时间。

下图可见 ttpkg 包内的文件分布结构,仅举例,不同的小程序文件顺序可能不同。

fbfe53090491d52cd5c392dbe071d873.png

资源加载时机提前

在 ttpkg 格式程序包的支持下,我们不必等待包下载完成后才去加载资源,资源加载的时机得以提前。

流加载优化前后的启动阶段流程分别如下:

优化前

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值