css实现硬件加速
原文请点击一下链接:
http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
1. 何为硬件加速
就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。
2. 如何开启硬件加速
Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速,只要使用特定的CSS语句就可以开启硬件加速:
/**使用3d效果来开启硬件加速**/
.speed-up {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}
如果并不需要用到transform变换,仅仅是开启硬件加速,可以用下面的语句:
/**原理上还是使用3d效果来开启硬件加速**/
.speed-up{
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
对于safari以及chrome,可能会在使用animation或者transition时出现闪烁的问题,可以使用以下的解决方法:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/**webkit上也可以用以下语句 **/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
3. 注意事项
硬件加速最好只用在animation或者transform上。不要滥用硬件加速,因为这样会增加性能的消耗,如果滥用反而会使动画变得更加卡,这样就得不偿失了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步