最近进了一家新公司，主要是做互联网电视盒子的，盒子系统用的是android，界面则由html5来弄，在mac上开发完放到盒子中运行时发现真的性能很差，非常卡，很多时候还黑屏。所以要非常注重性能优化，特别是css3上有很多坑啊。网上关于css3优化的中文资料相当少，没办法只能google国外的资料了，最后发现了zepto.js作者Thomas Fuchs的博客，觉得这大牛说的应该没错。
1、图片
图片在移动设备上渲染是众所周知的慢
2、渐变gradients
这个属性在公司的电视盒子上跑时明显感觉到性能非常差
-webkit-gradient, 渐变在浏览器中真实的实现是构建一张位图并渲染到浏览器，这和从外部加载一张图片无异(如从外部加载一张png图片)
对渐变的优化，可采用canvas来实现如：
// WebKit CSS gradient -webkit-gradient(linear, left top, right top, from(#4b4c4d), color-stop(0.249, #4b4c4d), color-stop(0.25, #575b5c), color-stop(0.329, #575b5c), color-stop(0.33, #6b7071), color-stop(0.749, #6b7071), color-stop(0.75, #575b5c), color-stop(0.909, #575b5c), color-stop(0.91, #4b4c4d), to(#4b4c4d) ); // <canvas> gradient var gradient = $('canvas').getContext("2d").createLinearGradient(0,0,230,0); gradient.addColorStop(0,'#4b4c4d'); gradient.addColorStop(0.249,'#4b4c4d'); gradient.addColorStop(0.25,'#575b5c'); gradient.addColorStop(0.329,'#575b5c'); gradient.addColorStop(0.33,'#6b7071'); gradient.addColorStop(0.749,'#6b7071'); gradient.addColorStop(0.75,'#575b5c'); gradient.addColorStop(0.909,'#575b5c'); gradient.addColorStop(0.91,'#4b4c4d'); gradient.addColorStop(1,'#4b4c4d');
3、避免使text-shadow和box-shadow
这两个东东是另一个主要降低性能坑
4、硬件加速hardware acceleration
这玩意儿很新很酷，但是bug也不少。例如它的并发动画是有限的，过多会导致闪烁或渲染错误。也许会闪瞎你的钛合金狗眼哟…
5、 touch事件优先
尽量使用touch事件代替click等一些老的事件，因为老的事件可能会有轻微的延迟
6、opacity
避免使用opacity,因为某些原因，它会干扰硬件加速的渲染
7、对于javascript和css没有银弹
别太依赖框架或库
8、要用translate3d别用translate
因为某些原因后者没有硬件加速
