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

离线包（ZCache）：用户访问页面时，内核会通过shouldInterceptRequest询问外壳是否有可用资源，如果有可用资源，外壳会返回资源，不用再去网络请求资源。【ZCache会走到外壳拦截逻辑，效率比HttpCache低一些，一般资源到Blink内核需要100ms，主文档需要300ms】

NetCache：DNS解析结果，长连接复用。

V8 Bytecode Cache：V8字节码缓存。【JS执行过一次，第二次执行能明显减少时间】。

Image Decode Cache：图片解码缓存。

PageCache：页面级缓存，在UC上角WebViewCache，在UC浏览器上点击前进后退按钮，就会产生WebViewCache 。

针对这些缓存，我们常用的预加载手段。

提前加载整屏文档：主要用在信息流，提前加载前几个Item的文档，用户点击的时候可以秒开访问。
提前加载首屏图片：主要用在信息流，点击访问文档时，图片的请求同时发出去，在文档解析需要用到图片时，首屏图片已经提前加载到本地了。
Link preload：在资源响应头或者主文档头部标记出需要预加载的资源，内核会根据一定规则和优先级去提前加载这些资源，
Module preload：类似于Link preload，但它是模块级的预加载，除了可以预加载模块的依赖资源，还可以提前编译和解析模块JS 。
Link prefetch：域名提前寻址。
提前加载接口数据：导航预加载&算法闲时预加载。

关于接口预加载，我们是在js plugin里面做的。当然还可以在网络库中间件中拦截处理。HTTP接口预加载的两种实现方式：

shouldInterceptRequest拦截：在这里拦截是否有Response缓存，返回返回，缺点是不能做接口同步，
MtopWVPlugin（ANetBridge）拦截：我们重新实现了一个和MtopWVPlugin一样的JS Plugin扩展，在扩展层做拦截。

2 性能分析工具和平台

鲁班尺：UC鲁班尺是基于Lighthouse来做的，它会分析页面在内核中真实渲染的情况，并给出优化建议。
海鸥实验室：UC海鸥实验室是一个性能分析平台，它可以提供完善的首屏、内存、启动、帧率分析数据。
Lighthouse：检测页面性能瓶颈。
Timeline：记录页面运行过程的具体细节，用于分析页面出现问题的具体位置。
Profile：分析页面内存的使用情况和JS/css执行时间。一般可以用TImeline定位出大概位置，再用JAVAScript CPU profiler详细分析每个JS函数的耗时。
Chrome Trace：记录页面在浏览器内核执行的完整过程，粒度精细到每个函数方法，可以很准确的定位到具体问题。

优化实践接下来我们来看看如何去分析一个H5页面的性能优化点。
1 拿到性能分析数据可以使用UC鲁班尺平台。它会生成一份性性能报告

文章插图
性能提升80%！详解饿了么H5性能优化秘诀
鲁班尺是基于Lighthouse做的，Lighthouse本地跑的时候，除了可以生成性能报告，还可以生成Chrome Trace文件，便于我们分析。
当然也可以本地去抓Timeline、Chrome Trace日志。拿到性能报告后，我们可以大致看看哪些地方比较耗时，资源加载，S耗时等等。再根据Trace日志去具体分析。
2 拿到T2日志，分析T2时间线如果对接了UC内核，可以分析T2日志，分析的时候关注几个数据：

frameCount：最后一次T2的frameCount，表示T2在这一帧计算完成。我们在Trace界面搜索T2Paint_Event的时候，找到这个frameCount，按下m键，标记T2线。
tStart：代表T0开始计算的时间，搜索TStart_Point可以定位到这个点。

确定了T2线之后，就可以分析T2线之前的页面渲染情况，以及影响页面渲染的因素。
3 分析整体性能分析T2之前的渲染整体渲染情况，比如JS执行较长的部分，加载时间较长的部分。
4 分析加载性能主要是Doc、接口和各种资源的加载性能。一般说来加载耗时超过300ms就算非常慢了，主要看资源是否走了离线缓存。