移动Web前端优化总结

分类:手机开发| 发布:camnprbubuol| 查看: | 发表时间:2013/11/30

手机开发火了很久了,各种app玲琅满目,一直开发pc web版的前端人员,怎么转到移动开发上呢?wap站?好老了,现代浏览器,很大的特点是:webkit内核, 支持html5,css3,国内主流的手机浏览器UC、海豚等,因此pc转移动,也就是要会html5、css3,自然js、html4、css2也是必须的。

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。

关于流畅度,主要体现在前端动画中,人在前端动画体系中,通常有两种模式:JS动画与CSS动画。 JS动画是为在低级浏览器中实现动画能力的一种方案,而在移动端,我们必然选择CSS动画。

然而在移动端,CSS动画相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。

目前对提升移动端CSS动画体验的主要方法有几点:

一、尽可能多的利用硬件能力,如使用3D变形来开启GPU加速。

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

如动画过程有闪烁(通常发生在动画开始的时候),可以尝试下面的Hack:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:

#ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
#ball-1.slidein {
-webkit-transform: translate3d(500px, 0, 0);
}
#ball-2 {
transition: left .5s ease;
left:0;
}
#ball-2.slidein {
left:500px;
}

注:3D变形会消耗更多的内存与功耗,应确实有性能问题时才去使用它,兼在权衡

二、尽可能少的使用box-shadows与gradients

box-shadows与gradients往往都是页面的性能杀手,尤其是在一个元素同时都使用了它们。

三、尽可能的让动画元素不在文档流中,以减少重排

position: fixed;
position: absolute;

慎用datauri

datauri文件增大0.1k;每次都需要解码,消耗cpu;了解详细的data uri优缺点

优化图片大小

建议图片大小<4kb,个数<6
img方式的图片不建议使用datauri这种方式

二次访问做到0请求--native

资源的静态花(可以cdn),本地存储的应用(但要考虑ios下safari能手动禁止localStorage)

网页的高清问题(高清屏的普及)

问题的根源:width=device-width, initial-scale=1.0,maximumscale=1.0
css pixel和设备dpi不统一
其实也可以这样:devicePixelRatio==2
这样设置viewport initial-scale=0.5,maximumscale=0.5
借助less把css函数化,方便适应各种设备屏

Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).

字体容器布局图片放大一倍
– font-size使用rem
– line-height使用100%

优点
• 实现css的1px
• no background-size
• native
缺点
• 适配成本大一点,依赖less
• 耗流量,占内存

 

未完待续…

相关阅读:

网站前端性能优化总结

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/mobile-dev/mobile-web-front-end.html