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许可证）

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

微信



支付宝