移动Web前端优化总结

手机开发火了很久了，各种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
• 耗流量，占内存

未完待续…

相关阅读：

网站前端性能优化总结