抖音开放平台Logo
开发者文档
小程序
控制台
  • 开发教程与代码示例
  • 入门
  • 小程序框架
  • 小程序运行时
  • 自定义组件
  • 基础教程
  • 能力教程
  • 性能优化
  • 概述
  • 性能优化辅助平台/工具
  • 性能优化方法
  • 启动性能
  • 小程序启动流程
  • 小程序启动性能优化
  • 启动耗时优化
  • 启动打开率优化
  • 启动性能优化指引
  • 概述
  • 运行时性能
  • 小程序白屏&渲染异常问题优化
  • 安全

    • 如何分析和优化

    为全面分析、优化小程序，我们分别提供线上、线下调试工具，用于不同分析阶段，具体如何使用见《本地优化开发》介绍。
    （1）线上分析：可直观看到线上真实的性能状态，耗时阶段分布，各个阶段到达率，优化手段成功率（如预取缓存命中率）等。可在每次发版前后观察线上问题和收益。工具使用说明。
    （2）线下调试：在开发过程中发现代码可优化的空间，提升问题发现和修复效率。工具使用说明。
    优化前了解：启动性能优化概述、小程序启动流程

    排查思路

    了解小程序启动性能现状

    进入「控制台-开发-性能分析」平台 性能概览 部分可以看到小程序核心性能数据（如下图）。
    较同类型：是指和同类型较差基线对比
    数据解读示例
      •冷启动耗时 3238ms， 劣于 同类型较差水平 8.33%，表示小程序冷启动耗时急需优化
      •冷启动到达率 91.52%， 劣于 同类型较差水平 3.3%，表示小程序冷启动打开率处于较低水平，启动流失人数也相对同类型较高。
    ​

    分析线上启动耗时点

    主要耗时阶段

    进入 「控制台-开发-性能分析」平台 启动性能 部分可以看到启动过程分为四个阶段，其中
      •启动过程耗时主要集中在 阶段3 -> 阶段4长达 2600ms +，表示该阶段为主要耗时段
      •阶段3 -> 阶段4 的转化过程流失了 4%（95.7-91.5），表示该流程用户流失较大
    ​

    具体耗时点和优化手段

    根据启动漏斗和《小程序启动流程》介绍，拆解各个阶段的优化点。

    本地优化开发

    开始前
    下载最新版本 IDE 调试工具（4.2.4 或以上版本）

    第一步：明确优化页面目标

    选取PV较高的作为重点优化对象（不确定的可以通过「控制台-数据-数据中心-页面分析」模块查看）。
    将PV 较高的页面设置为启动页面（如右图），然后进行第二步。
    ​
    ​

    第二步：找出影响启动 / 页面切换耗时的主要影响元素

    （1）在 IDE 中点击 “工程分析” 入口，弹出工程分析面板，用android 抖音扫码预览 ，运行待整个页面渲染完成，点击屏幕后停止（点击屏幕是为了触发 LCP 上报）。
    （2）查看工程分析结果（右图），截图部分为当前场景的最大元素，也就是主要优化对象。
    （3）找到主要优化目标
    目标一：影响该部分渲染的数据请求（数据来源 / 展示时机等），为主要优化接口，进行下一步「预取主要接口」。
    目标二：如果该区域有图片资源，且资源 URL 固定（如背景图等），则需要重点优化图片，同时根据 「数据预取JS方案」用 tt.preloadImage 预取图片资源。如果图片依赖网络请求，进行第三步。
    ⚠️ 如果触发元素为图片资源，页面上同时渲染的图片资源过多或较大也会影响该图片的展示耗时，建议对所有图片压缩和懒加载。
    ​
    ​

    第三步：预取主要数据接口

    优化思路：尽可能前置主要元素的渲染时机。
    预取逻辑：
      1.根据上述流程找到 LCP 触发元素（上右图 已经圈⭕️出来了！），如果是图片，直接预取该图片。
      a.点击「查看详情」展开渲染层，可以看到图片渲染时机
      2.点击「查看详情」（下左图）展开网络层，找到影响 LCP 元素的网络请求，选中看 URL 信息确认是不是 LCP 元素的数据源
      3.找到重要请求后，尽可能前置请求发出的时机，依次检查以下几点：
      a.有前置依赖请求：对前置依赖配置预取。否则直接预取该请求。参考接入示例代码。
      b.请求发起时机较晚？（trace中请求前有其他逻辑或在 onload 之后）应该尽早早早发出该请求，并及时更新数据。
      c.有前置同步 API：尽可能替换为异步API，或者放在请求后。
    ​
    ​

    第四步：追求极致体验

    参考《启动耗时优化》文档应用其他优化手段能进一步优化启动体验。
    ​

    查看优化效果

    （1）避免线上事故
    优化上线后一般一周内指标趋于平稳，刚上线 1～2 天冷启动耗时可能略有劣化（包更新影响）。为及时感知改动对性能稳定性的劣化影响，需要订阅相关指标的波动。
    订阅地址：「控制台-开发-性能分析」性能预警-预警规则
    ​
    （2）关注优化效果
    可以在性能分析平台查看版本更新前后的优化幅度
    ​

    优化结果是否符合预期

    不是所有优化方案都能够撬动小程序启动性能，具体和业务逻辑有关，性能分析平台冷启动耗时看板数据为 80 分位，部分优化幅度较低可能无法直接看到收益， 比如同步 API 耗时优化，优化了 3 次 API 同步调用对整体影响可能是毫秒级，但能够优化部分低端机器的体验，因此不能因为优化幅度低而不去做。
    ​