CSS开启硬件加速 hardware accelerated

作者:孙志勇 微博

日期:2016年12月6日

一、时效性

所有信息都具有时效性。文章的价值,往往跟时间有很大关联。特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间。

二、背景

在一次项目当中,需要用到图片随着鼠标移动而变化,需要很多次重新绘制。从而导致了页面卡顿,想到了硬件加速,就使用CSS属性来开启硬件加速。

三、原因

硬件加速背后的原理,请参考:https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

四、使用方法

并不是所有的CSS元素属性都可以开启硬件加速,只有下面几个可以开启硬件加速:

  • transform
  • opacity
  • filter

只要在元素添加这三个属性之一就可以开启。注意:CSS3的兼容性。你需要自行添加前缀。

五、参考链接

  1. https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

六、转载分享

版权声明:*转载-非商用-非衍生-保持署名(创意共享3.0许可证

七、如果你觉得此文章对你有帮助,并且想为我买杯咖啡,请扫一扫下面,谢谢。

微信

CSS开启硬件加速 hardware accelerated

支付宝

CSS开启硬件加速 hardware accelerated

上一篇:vue css动画原理


下一篇:position窗口居中