H5性能优化意义

• 对于一个H5的产品，功能无疑很重要，但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app，如果不把性能优化做起来，将极大地影响用户使用产品的积极性。

用户感受

• 当用户能够在1-2秒内打开H5页面，看到信息的展示，或者能够开始进行下一步的操作，用户会感觉速度还好，可以接受；而页面如果在2-5秒后才进入可用的状态，用户的耐心会逐渐丧失；而如果一个界面超过5秒甚至更久才能显示出来，这对用户来说基本是无法忍受的，也许有一部分用户会退出重新进入，但更多的用户会直接放弃使用。

一秒钟法则

• 移动互联网的架构、通讯机制，与有线网络有着巨大的差异，这也给H5的开发带来了很大的挑战。

  
  Paste_Image.png

经典案例

图片未优化

• 通过charles可以方便地进行测试。 从请求监控的情况看，有一张图片超过了60KB，宽度640px，但是在应用中，实际显示的是一张小缩略图，是通过代码控制让它显示成小图的，因此修改方案很简单，将所有头像的图片均改为获取120px宽度的即可。 90.png

• 按需加载

  • 钉钉的教学页面
  • 多个slide页面, 每个页面有2-3个图片, 其中有一个是大图显示
  • 图片是客户提供的, 最大的图片大约是300KB以上
  • 第一次进入页面后, 所有slide的图片均进行加载
  • 3G网络下, loading的图标大约持续6000ms后才会消失

• 优化方案

  • 尽可能优化图片, 但是压缩后发现噪点明显增加, 影响了显示效果
  • 修改加载方案, 第一次进入后, 只加载本页的图片
  • loading时间降低至1秒左右

WebView相关：

• 在android和IOS上测试H5性能，测试员还应该关注因加载H5而引起的app常规性能指标。
• 内存：加载页面前后内存变化，可间接反映H5中资源数量和大小，如dom数量，图片大小。
• CPU：当页面中资源样式复杂，强调视觉效果时，测试员可观察CPU占用率来反映H5绘制质量。如果CPU长期处于高占用率，可考虑降低高计算量的视觉效果等手段。
• FPS：帧率尤其在有视频和动画效果的H5中，测试员应该重点关注，防止严重的卡顿流出。

(主要原文来自)[http://ddtalk.github.io/blog/2015/09/07/dingding-first/]