h5性能优化有哪些(饿了吗h5)

前言随着移动互联网的发展，用户对产品体验的要求越来越高。作为H5服务的重要载体，它广泛应用于移动终端，因此H5页面性能是用户体验非常核心的指标。
本文结合【饿了么首屏优化实践】介绍页面性能优化的思路。
性能提升80%！详细解释H5性能优化的秘密。
首屏性能指标性能优化的首要基础是数据和指标。没有正确的数据和指标，优化思路和方向可能会出现偏差。
在UC首屏性能指数统计上，支持内核指数和标准W3C标准指数。
内核性能提升80%！详细解释H5性能优化的秘密。
start:start:Blink内核开始创建请求的时间可以理解为“0”点t0:Blink收到http头的时间T1:首屏显示内容的时间T2:首屏完全显示的时间。性能W3C指标首屏时间是指折叠上方页面所有资源全部显示的时间。这对于用户来说是一个非常直接的体验指标，但是对于前端来说却很难统计衡量。
当页面DOM树已经被解析并且内容被显示时，通常的方法是使用domcontentloadeventend-fetchStart，或者甚至使用loadEventStart-fetchStart。下面给出了统计页面性能指标的方法。
性能提升80%！详细解释H5性能优化的秘密。
监测性能在线监测对于摸清数据，发现问题具有重要意义。一般在测试阶段只能做基础分析，在不同环境下很难获得真实准确的数据。那么我们如何知道上线后的性能是否有问题，或者有问题时如何尽快扑灭呢？在线监控是最好的选择。
岳影全景监控平台可以实时分析SDK采集上报的数据，可以直观方便的查看应用性能指标。另外，通过设置告警规则，当性能指标达到阈值时，可以及时通知，第一时间发现问题，及时处理。
实时行情通过实时行情，初步了解业绩波动。
性能提升80%！详细解释H5性能优化的秘密。
查看性能趋势查看页面性能，通过首字节、DOM Ready、全页加载等核心指标分析首屏性能和页面加载性能。(如果对接了UC内核，可以通过T2直观的了解第一屏的性能)
性能提升80%！详细解释H5性能优化的秘密。
分析具体页面做进一步分析，了解访问排名靠前页面的性能。
性能提升80%！详细解释H5性能优化的秘密。
通过多维度的聚合分析，可以进一步定位问题的范围。
性能提升80%！详细解释H5性能优化的秘密。
详细分析性能提升80%！详细解释H5性能优化的秘密。
性能优化思路通过线上数据深入分析后，可以进一步分析优化。
1优化方向前端：前端重点优化首屏，汇聚域名、js资源管理、js耗时管理、图片管理、界面管理等方向。
客户端：客户端重点提升容器启动速度，优化拦截逻辑，提供前端预加载等各种能力，提供类原生体验。
【干货预警】以下是我们在饿了么H5优化项目中的整体优化思路。
性能提升80%！详细解释H5性能优化的秘密。
H5资源和数据依赖于网络，因此优化的一个重要策略是预加载。让我们看看H5场景中常见的缓存。
HttpCache:从网络回来的资源通过一定的规则缓存在本地，下次使用时可以直接从本地读取。Stale-while-invalidate允许资源过期后继续使用一段时间，同时发起异步请求，允许先使用资源，再验证资源。LocalStorage:前端可以使用LocalStorage在本地存储资源，类似于IndexedDB。LocalStorage也有一些限制。比如一个域名只能存储5M的数据，不能跨域读取。MemoryCache: MemoryCache。Chrome中的MemoryCache主要由GC管理。当资源进入内存缓存时，它将与一个弱引用相关联，当主文档关闭时，它将被清除。离线包(ZCache):当用户访问一个页面时，内核会通过shouldInterceptRequest询问shell是否有可用的资源。如果有可用的资源，shell会返回资源，所以不需要去网络请求资源。【ZCache会去shell拦截逻辑，效率比HttpCache低。一般资源到达Blink内核需要100ms，主文档需要300 ms】NetCache:DNS解析结果，长连接复用。V8字节码缓存：V8字节码缓存。【JS已经执行了一次，第二次执行明显可以减少时间】。图像解码缓存：图像解码缓存。PageCache:页面级缓存，WebViewCache在UC的上角，点击UC浏览器上的前进后退按钮会生成WebViewCache。对于这些缓存，我们经常使用预加载的方法。
预先加载全屏文档：主要用于信息流，预先加载前几项的文档，用户点击即可秒级访问。预先加载第一个屏幕图像：主要用于信息流。当您单击以访问文档时，对图像的请求会同时发出。当需要图像进行文档分析时，第一个屏幕图像已经预先加载到本地。链接预加载：需要预加载的资源在资源响应头或者主文档头中有标记，内核会按照一定的规则和优先级提前加载这些资源。模块预加载：类似于链接预加载，但是是模块级预加载，可以预加载模块的依赖资源，也可以提前编译解析模块JS。链接预取：域名提前寻址。提前加载接口数据：导航预加载算法会在空闲时预加载。至于接口预加载，我们在js插件中完成。当然，也可以在网库中间件中拦截处理。实现HTTP接口预加载的两种方式：
should Intercept request Intercept:拦截此处是否有响应缓存，并返回。缺点是不能做界面同步。mtoppwvplugin拦截(ANetBridge):我们重新实现了一个类似mtoppwvplugin的JS插件扩展，在扩展层拦截。2性能分析工具及平台鲁班驰：UC鲁班驰基于灯塔。它会分析页面在内核中的真实呈现，并给出优化建议。海鸥实验室：UC海鸥实验室是一个性能分析平台，可以提供完美的首屏、内存、启动、帧率分析数据。Lighthouse:检测页面性能瓶颈。时间轴：记录页面运行过程的具体细节，用于分析页面出现问题的具体位置。Profile:分析页面内存使用和JS/CSS执行时间。一般可以用TImeline定位大概位置，然后用JavaScript CPU profiler详细分析每个JS函数的耗时。Chrome Trace:记录浏览器内核中页面执行的全过程，细粒度到每个函数方法，可以准确定位具体问题。练习接下来，我们来看看如何分析一个H5页面的性能优化点。
1可以使用UC鲁班驰平台获取性能分析数据。它会生成一份性表现报告。
性能提升80%！详细解释H5性能优化的秘密。
鲁班赤以灯塔为原型。Lighthouse在本地运行时，不仅可以生成性能报告，还可以生成Chrome Trace文件，方便我们分析。
当然，你也可以在本地捕获Timeline和Chrome跟踪日志。拿到性能报告后，大致可以看出哪些地方比较耗时，资源加载，S耗时等等。根据跟踪日志，进行详细的分析。
获取T2日志并分析T2时间线。如果UC内核对接，可以分析T2日志。分析时，注意几个数据：
FrameCount:最后一个T2的帧数，表示T2是在这一帧中计算的。当我们在Trace界面搜索T2Paint_Event的时候，发现了这个frameCount，按了M键，标记了T2线。t:表示T0的开始时间，可以通过搜索tStart _ point定位。确定了T2线之后，我们就可以分析T2线之前的页面渲染，以及影响页面渲染的因素。
3整体性能分析T2之前的整体渲染情况分析，比如JS执行时间长的部分，加载时间长的部分。
加载性能分析主要包括Doc、接口和各种资源的加载性能。一般来说，即使加载超过300ms也是很慢的，主要看资源是否离线缓存。
性能提升80%！详细解释H5性能优化的秘密。
5排版性能分析主要分析排版的内容是否合理，排版的时机是否合理，是否有大量的重排和刷新样式。
性能提升80%！详细解释H5性能优化的秘密。
6 JS绩效分析JS绩效主要包括三个方面：
JS解析和编译JS对应的业务逻辑JS的具体功能执行需要时间。一般来说，v8.compile需要100ms以上，相当耗时。
性能提升80%！详细解释H5性能优化的秘密。
另外，我们需要注意两个v8.run之间的执行间隔，一般来说，当间隔发生时，我们在等待接口或者资源。这可以是优化点，比如接口预加载，资源离线等。
性能提升80%！详细解释H5性能优化的秘密。
然后用timeline分析具体函数的耗时，找出耗时较多的js函数，有针对性地进行优化。
性能提升80%！详细解释H5性能优化的秘密。
7观察图片解码对T2时间的影响。一般来说，有两个因素影响T2计算：
解码和画图。第一个屏幕的内容发生变化。(滑动、图片懒加载、动态节点)图片，尤其是小图标，会显著影响某些页面的T2时间。比如你饿了，可以选择红包页面。经过分析，是红包列表上的小图标大大延长了T2时间，改为iconfont。T2优化耗时超过1400 ms，性能提升超过45%。
所以我们可以把这部分小图片替换成IconFont或者css (svg矢量图片无法计算图片的宽度和高度，所以不在计算之列)。如果有些图片确实需要忽略T2计算，也可以使用uc-perf-stat-ignore(新版本内核支持3.22)标签。
性能提升80%！详细解释H5性能优化的秘密。
比较UC的T2Paint_Event和W3C的loadEventStart的时间差，观察图片解码对T2计算的影响。
性能提升80%！详细解释H5性能优化的秘密。
搜索DecodeImage观察图片解码。
性能提升80%！详细解释H5性能优化的秘密。
这篇文章就给你介绍这么多。如果您想了解应用程序行的性能，请尝试岳影全景监控平台。
性能提升80%！详细解释H5性能优化的秘密。