性能提升80%！详解饿了么H5性能优化秘诀 _H5

前言随着移动互联网的发展，用户对产品的使用体验要求越来越高。H5作为业务的重要载体，在移动端的应用非常广泛，因此H5页面性能是一个非常核心的用户体验指标。
本文结合【饿了么首屏优化实践】为大家介绍页面性能优化的思路。

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
首屏性能指标性能优化的首要基础是数据和指标。没有正确的数据和指标指引，优化思路和方向可能是偏差的。
UC在首屏性能指标的统计上，支持内核指标和标准的W3C标准指标。
内核指标

文章插图
性能提升80%！详解饿了么H5性能优化秘诀

start：blink内核开始创建请求的时间点, 可以理解为 “0”点
T0：blink收到http head的时间
T1：首屏有内容显示的时间
T2：首屏全部显示出来的时间

性能W3C指标首屏时间是指页面第一屏所有资源完整展示的时间。这是一个对用户来说非常直接的体验指标，但是对于前端却是一个非常难以统计衡量的指标。
通常的做法是，domContentLoadedEventEnd - fetchStart，甚至使用 loadEventStart-fetchStart ，此时页面DOM树已经解析完成并且显示内容。以下给出统计页面性能指标的方法。

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
性能监控线上监控对于数据摸底和发现问题意义重大，一般在测试阶段我们只能做到基本的分析，很难获得在不同环境下真实准确的数据，那怎么知道上线后性能是否有问题，或者怎么在出现问题苗头的时候，尽快的掐灭呢？实时线上监控是最优的选择。
岳鹰全景监控平台，可以将SDK采集上报的数据进行实时分析，可以很直观很方便的查看应用的性能指标。并且还能通过设置告警规则，当性能指标达到阈值的时候，及时通知，第一时间发现问题，及时处理。
实时大盘通过实时大盘，初步了解性能波动情况。

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
查看性能趋势查看页面性能情况，通过核心指标，如首字节、DOM Ready、页面完全加载等分析首屏性能、页面加载性能。（如果对接了UC内核，可直观的通过T2了解首屏性能）

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
分析定位到具体页面进一步分析，了解TOP访问页面的性能情况

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
通过多维度聚合分析，更进一步定位到问题范围

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
详情分析

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
性能优化思路通过线上数据进行摸底分析之后，可以继续进行深入分析和优化。
1 优化方向前端：前端围绕着优化首屏，收敛域名，js资源治理，js耗时治理，图片治理，接口治理等方向展开。
客户端：客户端围绕着提升容器启动速度，优化拦截逻辑，为前端提供预加载等各种能力，提供类原生体验等方向展开。
【干货预警】下面是我们在饿了么端H5优化专项中，整体的优化思路。