移动设备上的CSS3优化总结
https://www.flypeng.com win10系统 发布时间:2015-08-29 00:00 来源:鹏鹏电脑知识网

网上关于css3优化的中文资料相当少,没办法只能google国外的资料了。

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

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

 

如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到#qq.com(#替换为@)。期待你的好消息!