WebApp性能优化的总结

  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基础优化

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值