hybrid App网页性能优化总结

[damoclesX]

公司某项目第一阶段开发已经完成，总结如下：

原有网页技术方案概括

• 适配

  采用手淘flexlib的适配方案。使用过程比较顺畅

• 页面

  页面采用ajax请求接口，获取数据，组装模板，插入到页面

• 与native交互

  封装bridge，兼容ios和android

• 优化

  文件合并压缩，图片裁剪压缩，图片懒加载

按照以上方案完成后，在网速较快、ios设备下，体验较好。安卓设备部分机型卡顿严重。

性能优化

• 静态资源优化

hybrid app中用到的html、js、css之前都在线上，部分资源在cdn上面。调整后静态资源全部放在app本地，提升在慢速网络环境下的加载速度，前端提供所需资源静态资源压缩包。

• 页面数据来源优化

之前页面数据由前端请求接口获取（jsonp），接口比较分散，进入首页需要10个以上的请求，导致用户看到界面的时间延长。由于webview中发送http请求代价昂贵，并有并发限制，调整为，网页数据通过native获取，由native传递，native请求不受并发限制，并可有效缓存页面数据（网页也可用localStorage，与本地缓存各有利弊），顺带也完成了离线使用，采用这种改进后，用户看到界面的时间缩短。

• 滚动卡顿优化

初步设想：

• 判断图片区域（图片标签和背景图），是否出现在可视区，在则显示不在则隐藏（通过改变opacity）
• 初始化时缓存各种变量，图片区域的位置信息、高度信息、url信息。使用采取读表，而不是在dom元素上实时获取的方式。
• 函数节流。监听滚动事件时使用，控制计算是否显示图片的频率
• 滚动使用iscroll代替html自己的滚动
• 使用canvas绘制图片代替img

优化主要为android，体验差基本也体现在android上面。按照上面的设想一一实现或几个合在一起优化，实际效果（在魅蓝note 上面测试）如下：

主观感受：

• 使用iscroll，卡顿更严重
• 根据图片区域是否出现在可视区决定是否显示，滚动比未优化前顺畅
• 使用canvas绘制图片代替，并未感到滚动更流畅

使用adb工具监测cpu使用率：

• 使用iscroll未测试，因为卡顿难以接受
• 根据图片区域是否出现在可视区决定是否显示，和不作这个控制，cpu使用率无明显差别
• 使用canvas绘制图片代替img，和直接使用img，cpu使用率无明显差别

另外在监测cpu使用率过程中发现：

• 页面数据来源优化有明显作用，用户界面显示时间较大幅度缩短
  

（优化前）

（优化后）

• 页面幻灯效果（transform方式）的每一次切换，都会占用较高的cpu的使用
  

（每次波动就是幻灯效果切换）

• 页面cpu使用率与页面内容无较大关系，页面内容较少，只要滚动页面，cpu使用率与内容较多的页面无明显区别（滚动才是性能杀手）

总结

• 减少页面http请求能明显改善页面呈现速度，不仅要合并css、js、image之类，更在于页面数据来源方面
• 滚动是非常耗性能的操作