头条小程序
  • 爱学习公众号

    关注爱学习公众号

  • 扫码手机阅读更方便

推荐阅读
  • 头条小程序注册页面

    注册页面对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。使用 Page 构造器注册页面简单的页面可以使用 Page() 进行构造。代码示例://index.jsPage({ data: { text: "This is page data.", }, onLoad: functi

  • 头条小程序text

    text基础库 1.0.0 开始支持本组件文本。属性说明属性名类型默认值说明最低版本selectableBooleanfalse是否可以选中文字1.0.0spaceStringfalse是否显示连续的空格,可以取值ensp emsp nbsp1.0.0decodeBooleanfalse是否转义1.0.0效果示例

  • 头条小程序模块

    sjs 模块sjs 可以在独立的sjs文件中编写,也可以在 ttml 文件中使用 <sjs> 标签编写。每个 sjs 文件或者 sjs 标签内联的代码都是一个独立的模块。使用方法.sjs 文件// utils/index.sjsfunction formatTime(dateStr) { var date = getDate(dateStr); var year =

  • 头条小程序web-view

    web-viewweb-view 组件是一个可以用来承载网页的容器,会自动铺满整个页面。属性名类型默认值说明最低版本srcStringN/Awebview 指向网页的链接。可打开关联的头条号的文章,其它网页需登录字节小程序开发者平台配置业务域名。1.0.0bindmessageEventHandler

  • 头条小程序注册小程序

    注册小程序每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档。App({ onLaunch: function (options) { // Do something initial when launch. }, onShow: function (op

  • 头条小程序场景值

    场景值⚠️ 注意基础库 1.12.0 开始支持场景值 ID 与入口位置对应关系表今日头条场景值

  • 头条小程序swiper-item

    swiper-item基础库 1.0.0 开始支持本组件。滑块视图内容。仅可放置在 swiper组件中,宽高自动设置为 100%。属性说明属性类型默认值必填说明最低支持版本item-idstring否该 swiper-item 的标识符1.0.0效果示例参见swiper示例内容。代码示例参见swiper示例内容。点击纠错开发者平台

  • 头条小程序createQRCode

    createQRCode获取小程序/小游戏的二维码。该二维码可通过任意 app 扫码打开,能跳转到开发者指定的对应字节系 app 内拉起小程序/小游戏,并传入开发者指定的参数。通过该接口生成的二维码,永久有效,暂无数量限制。请求地址POST https://developer.toutiao.com/api/apps/qrcode请求参数以下参数均在 JSON body 中。

  • 头条小程序Component 构造器

    Component 构造器Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等定义参数选项名类型是否必填说明propertiesObject否组件的对外属性,是

  • 头条小程序removeUserStorage

    removeUserStorage删除上报到字节跳动的云存储服务的 key-value 数据。请求地址POST https://developer.toutiao.com/api/apps/remove_user_storage请求参数属性数据类型说明access_tokenstring服务端 API 调用标识,获取方

头条小程序流加载是什么

流加载是什么

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

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

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

使用 ttpkg 包替代 zip 包

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

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

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

图片名称

资源加载时机提前

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

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

优化前

图片名称

优化后

图片名称

假设某个版本的小程序 A 在改造前后包内文件不变,资源加载顺序相同,提前加载文件可以使得小程序首屏渲染更快出现。

类似的,我们可以提前加载某些不在 ttpkg 包内的文件来减少加载文件这块的耗时,比如:

  • tma-core.js、tmg-core.js 预加载
  • page-frame.html 预加载
  • webview.js 预加载

game.js 拆分

我们还对小游戏的 game.js 文件进行了拆分,支持按需加载拆分后的 js 文件。

  • 优化前:game.js 文件包含着所有游戏场景的逻辑,这在启动阶段就会全量加载到 JSC 环境中,但实际上一些加载进来的游戏逻辑尚用不到。
  • 优化后: game.js 拆分出多个散文件,在 game.js 内根据散文件的使用先后顺序,边运行边按需加载,在理想情况下,不需要加载所有拆出的散文件即可渲染出首帧。

图片名称

如上图,优化后从 game.js 拆出了 pageA.js、pageB.js、pageC.js、pageD.js,若该小游戏仅需要加载 pageA、pageB、pageC.js 即可渲染出首屏,那我们就省下了下载以及加载 pageD.js 的时间。

副作用

当小程序无缓存冷启动,流加载的边下边加载在特定情况下也会给我们带来副作用,比如:

  • 启动阶段,ttpkg 包已下载的部分足以展示出首屏界面,但用户在操作首屏界面的过程中,忽然发生断网等问题导致 ttpkg 下载失败,此时会弹出一个报错窗口打断用户操作,用户需要重启小程序
  • 用户使用阶段, ttpkg 包中的某个图片可能因为尚未下载完,而迟迟无法展示出来;或者小游戏 ttpkg 中的某个 js 文件没下载完,而发生卡顿

流加载 2 期:小程序包体改造优化

包体改造主要是优化小程序的首屏加载时间,以下方面做了优化:

app-service.js 拆分

对齐小游戏 game.js 的拆分优化,把小程序不同界面的 js 逻辑从 app-service.js 文件中拆分出来, 各界面打开时再按需加载,减少了首屏加载过程中所需要加载的内容,可缩短首屏展示时间。

如下图所示,拆分前,app-service.js 包含拆出来的 pageA、pageB、pageC 的 js 逻辑。拆分后,首屏仅需要下载完“瘦身后”的 app-service.js 以及首页 pageA.js 再加载即可。

图片名称

WebView 预加载通用 page-frame.html、webview.js

除了实现流加载做到下载与加载并发来缩短首屏展示时间外,在文件加载阶段,我们会把某些特定文件提前预加载好,并且确保这些文件不在 ttpkg 包内,这样就不会被 ttpkg 下载过程所影响。

最佳理想情况下,可达到的效果图:

图片名称

WebView 的创建、page-frame.html 和 webview.js 的加载都是必须的操作,所以在小程序启动前预创建、预加载好,可以一定程度减少小程序启动后再去加载他们的消耗的时间。

为了能做到预加载,流加载二期,就把 ttpkg 中的 page-frame.html(它包含所有界面的结构)精简成各界面通用的 page-frame.html, 并放到我们的 jssdk 基础库中。而 jssdk 基础库都是内置在 SDK 中的,不强依赖于下载过程。

流加载 3 期:ttpkg 包中文件分布顺序的优化

为了达到流加载的最大收益,我们还在要做 ttpkg 包中文件分布顺序的优化。

举个例子,如下是某个小游戏 ttpkg 包文件分布图,从低到高位分别安放着以下文件:

图片名称

当游戏启动后,ttpkg 下载的大小刚好包含 game.js 文件,于是小游戏开始加载执行 game.js, 但 game.js 中又去加载了 gameB.js,这种情况下,小游戏就会停止等待 ttpkg 继续下载,直到包下载大小超过了 gameB.js 才会继续执行。

ttpkg 包内文件分布顺序 的优化就是为去调整文件在 ttpkg 包中的坐落位置,尽可能让文件分布顺序与小程序/游戏启动执行要加载的文件顺序一致。这样就可以减少在启动无缓存小程序的过程中, 出现要加载某个尚未下载到的文件而停止等待的场景。

后台每日根据上报的文件访问顺序埋点,按顺序以及频率进行排序,优化 ttpkg 的文件顺序,生成新的 ttpkg。该操作无需开发者做任何操作。

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图