性能提升80%!详解饿了么H5性能优化秘诀( 三 )

一般说来v8.compile耗时超过100ms,就是比较耗时的了 。

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

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
另外还需要关注两个v8.run之间的执行间隔,一般说来出现间隔的时候是在等待接口或者资源 。这块可以成为优化的点,例如接口预加载、资源离线等 。
性能提升80%!详解饿了么H5性能优化秘诀

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
然后使用timeline分析具体函数耗时,找出耗时较多的js函数,针对性的进行优化 。
性能提升80%!详解饿了么H5性能优化秘诀

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
7 观察图片解码对T2时间的影响一般说来影响T2计算的有两个因素:
  1. 图片解码与绘制 。
  2. 首屏内容发生变化 。(滑动、图片懒加载、动态节点)
图片特别是小图标会某些页面上会显著的影响T2时间,比如在饿了么的选择红包页,经过分析,是红包列表上面的小图标大大的延长了T2时间,改成iconfont实现后 。优化T2耗时1400多ms,性能提升45%以上 。
所以我们可以把这部分小图片用IconFont或者css代替(svg矢量图无法计算图片宽高,故不纳入计算) 。如果实在有些图片需要忽略T2计算,也可以使用uc-perf-stat-ignore(新版本内核支持3.22)标记 。
性能提升80%!详解饿了么H5性能优化秘诀

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
比较UC的T2Paint_Event和W3C的loadEventStart两个事件的时间差,来观察图片解码对T2计算的影响 。
性能提升80%!详解饿了么H5性能优化秘诀

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
搜索DecodeImage可以观察图片的解码情况
性能提升80%!详解饿了么H5性能优化秘诀

文章插图
性能提升80%!详解饿了么H5性能优化秘诀
本文就给大家介绍这么多,如果想要知道应用线上的性能情况,欢迎试用岳鹰全景监控平台 。

【性能提升80%!详解饿了么H5性能优化秘诀】


推荐阅读