前端性能监控（RUM）接入：优化小程序首屏耗时的解决方案
前言
关于时间消耗：
1.到达首屏的时间和用户的设备、网络环境、程序代码有很大关系，线上环境2/3是运气。
2、理论上同地域访问比IP地址访问慢，但是小程序必须使用。
3、小程序启动时代码包由微信加载，与服务域名无关，进入页面后发起首次网络请求，部分用户环境因网络状况不佳，报API接口及首屏时长消耗超限。
——小白于2021年12月写道
前端性能监控 (RUM) 访问
：
RUM是腾讯提供的前端监控解决方案，只需要在控制台上创建业务系统和应用，获取上报ID，通过安装npm、配置JSON即可实现测速、日志收集。
// 在应用支持 NPM 时使用 NPM 安装 Aegis SDK。 // npm install --save aegis-mp-sdk
// 引入后进行初始化 import Aegis from 'aegis-mp-sdk';
const aegis = new Aegis({ id: 'xxxx', // 上报 id uin: 'xxx', // 用户唯一 ID（可选） reportApiSpeed: true, // 接口测速 spa: true // spa 应用页面跳转的时候开启 pv 计算 });
注意：
在小程序中，你需要按照小程序规则开启npm 。
必须添加合法域名，否则RUM控制台中将没有正式版本的数据。一般在RUM控制台中开启忽略合法域名验证，为了方便开发调试和调用开发环境，忽略此项配置。
数据分析
：
在RUM控制台-性能页面，列出了该时间段内各个页面的首次渲染时间，并且提供了地域、网络、机型等不同维度的数据统计，接下来需要对耗时较长、访问频繁的页面进行分析并进行优化。
通过按照耗时和采样量排序，明显可以发现下图中的1，3，4三个页面增加了用户的等待时间，是应该重点考虑优化的页面。
[点击查看大图]
页面具体分析
：
上图中的页面都包含网络请求，并且请求完成后会触发页面的 DOM 更新。另外：
如何分析和优化？
首屏优化分析
：
提升网页性能，一般涉及优化加载速度和程序执行的流畅度；而加载速度又可以优化服务器响应时间（包括代码包的下载时间、网络请求接口的响应时间以及互联网图片、字体等资源文件的响应时间）和页面本身的加载渲染时间。
图片资源
常见的图片可以用JPG、PNG、WEBP、或者字体图标来实现，可搜索到的描述大概是不同格式适用的不同场景，以及基于带宽占用的描述。
照片图像使用webP。
对于复杂的图形，请使用 PNG 或 JPG，无论哪种格式的文件大小较小。
对于具有透明度的图形，请使用 PNG 或 webP。
使用 SVG 来表示可缩放的图形、图标等。
动态图像尽量不要使用GIF，如果不能使用CSS则使用视频代替。
网络分析与优化
通过RUM控制台中的API监控页面可以发现，从微信小程序监测到的网络请求耗时波动较大，分布在-。
[点击查看大图]
输入并筛选出对应时间段的网络请求，按照图中$me分组进行统计，发现服务端接口表现比较稳定，问题应该出现在客户端网络与服务端之间的网络上。
[点击查看大图]
小程序需要使用该协议发起网络请求，请求链路为 DNS -> -> SSL -> -> 。本地调试各阶段起止时间戳及耗时如下：（数据仅代表本地网络情况，结果可能有波动）。可以看出，小程序发起第二次请求时，已经缓存了DNS等信息并复用了链路。客户端到动态加速网络耗时约40ms，动态加速网络到服务端耗时约20ms。第一次请求时客户端需要进行DNS解析，建立SSL链路增加了网络消耗。
JS 优化
{ "lazyCodeLoading": "requiredComponents" }
/** @const */ var LOG = false; LOG && log('hello world !');
CSS 优化
因为构建树会阻碍页面的解析，所以你需要：
优化过程
：
资源优化
1、按照页面访问频率，将图片资源分为常用和不常用，常用的放进小程序代码包本地加载，不常用的转成webp放到服务端。
2. 减小代码包大小：压缩代码包内图片资源，PNG格式透明图片设置更少颜色；通过依赖分析替换更小的渲染依赖。代码包大小从1M+减小到280K+。
网络优化
1、由于华北地区只有一台服务器，为了解决不同地区、不同运营商的访问速度，启用了全站动态加速。通过测速网站可以解析到70+独立IP，不同地区的用户会访问距离同一运营商较近的IP，然后DCDN会通过内线将用户的请求转发到服务器上。
2、通过分析，首次请求需要进行域名解析和建立连接，后续请求都会复用链接，且解析和SSL时间为0。通过某测速网站可以看到平均响应时间为0.3s。考虑链接复用，网络请求时间会在60ms左右。
3、对于不经常更改但访问频繁的接口，可以在DCDN中设置静态缓存，并触发接口预热，将接口响应缓存在DCDN的从节点上。这样当用户发起这些请求时，DCDN会直接响应，而不需要返回真实服务器进行处理。
4、服务端和客户端均开启http/2协议支持，由于小程序内没有高并发请求，所以自测没有明显提升。
5.对大于 1kb 的响应主体启用 gzip 压缩。
6.为服务器上的图片等静态资源设置浏览器缓存。
7、由于小程序不像BAT那样拥有庞大的用户规模和高频访问，根据DNS解析机制，如果当地运营商已经缓存了DNS解析结果，则不会再使用DNS进行解析，而是使用网站测速提供的服务，发送GET测速，让当地运营商缓存DNS结果。
8.启用OCSP，提高证书的验证性能。
9、小程序使用时，服务器会通过调用微信公众平台接口获取用户IP地址，在服务器上执行ping命令，找到最快的IP地址，写入host文件，时间由40ms降低至28.8ms。
编码
1.在代码中启用图像标签的延迟加载。
2.减少冗余的层级嵌套。
3、给数据赋一个初始值，避免网络请求完成后再赋值导致页面元素位置发生变化。
4. 启用按需代码注入
5、采用DCDN后，各个地区各个运营商的网络请求大部分会在0.3s内到达，因此删除了网络请求开始和结束的浮动动画。
6、为了方便实机调试，原来打印了网络请求，自定义组件的响应等，目前线上生产环境已经删除了所有日志打印。
7.删除了一些无用的CSS代码，优化了一些CSS样式选择器。
8. 将网络请求从 推进到 。
9.个人测试过，使用骨架屏只会让人感觉页面不是白屏，但是会增加首屏时间。
商业逻辑
1、所有新用户（首次访问）进入小程序时，页面上的数据和data里的数据是一样的，这些数据作为data的默认值，直接展示，网络请求到达后，由于数据内容不变，页面不会重新渲染。
2.用户使用程序后，通过网络请求获取的用户数据保存在 中。
3、服务端，当小程序用户登录时，启动异步线程从刷出主要用户数据，进行热备。
4. 对于长列表，数据将分页加载。
优化效果
：
如下图所示，腾讯云前端性能监控显示大部分地域首屏时间在0-0.5s之间：
[RUM 首屏时间截图]
[来自速度测试网站DCDN的截图]
上文提到的首屏时长消耗优化效果最终测评平台是：腾讯云前端性能监控。点击文末“阅读全文”可以了解更多腾讯云前端性能监控的相关内容。
联系我们
扫描二维码添加云监控助手，回复“朗姆酒”
加入前端性能监控技术交流群
RUM相关文章：
关注我们，了解腾讯云监控最新动态
本文转载自腾讯云+社区，原文链接：
。