H5强大的兼容性和手机硬件能力的提高,Webapp势头大有超过NativeApp趋势。也就很幸运的跟着公司做了一个项目,整体觉得Webapp的性能和用户体验还是有待提高。
H5的启动速度优化:
1 主界面WebView并行启动
2 DOM快照,提前显示Dom结构。在html加载中,使用上一次没有数据的UI结构缓存填充界面,然后对UI结构进行内容填充,分步加载。
H5常见性能问题:
1 图文列表滚动不流畅 2 JS动画 3 形变动画
优化思路:开启硬件加速 使用requestanimationframe(不断学习中),Chromium低版本形变动画降阶
优化优先级:Chromium>WebView>H5
WebView内存优化
新开一个webview的内存增加20-40MB,优化思路,共用一个WebView,单页面应用,开启缓存。
优化原则:
1 优化手段不应该成为架构的障碍
2 优先结合Native优化
3 优先H5基础优化