如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则:
1、PC优化手段在Mobile端同样适用。
2、在Mobile侧我们提出三秒种渲染完成首屏指标。
3、基于第二点,首屏加载3秒完成或使用Loading。
4、基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB。
5、Mobile端因手机配置原因,除加载外渲染速度也是优化重点。
6、基于第五点,要合理处理代码减少渲染损耗。
7、基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置。
8、加载完成后用户交互使用时也需注意性能。
加载优化
对于移动端的网页来说,加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点,当然,手机站的其他前端要素
优化也是不能忽略的。
1、减少HTTP请求
因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数
不能超过4个,建议优化要点为以下2点:
1、合并CSS、Java
2、合并小图片,使用雪碧图
2、缓存
使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资
源的更新可使用时间戳)。