Css3在移动设备上的优化点

最近进了一家新公司，主要是做互联网电视盒子的，盒子系统用的是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

因为某些原因后者没有硬件加速

 

================================================================================

注：转载请注明出处：绿茶-续(偷饭猫)email: xiaodong1986@icloud.com