1. 何为硬件加速
就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。
2 .为何要开启硬件加速
国内浏览器的内核,大部分是Chrome的内核,Chrome下的动画比IE9和FF都要慢很多,所以要开启硬件加速,提升动画的流畅性。
3. 如何开启硬件加速
Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速,只要使用特定的CSS语句就可以开启硬件加速:
3.1 使用3d效果来开启硬件加速
.lusheng {
-webkit-transform: translate3d(-50%,-50%,0x)
rotate3d(10px,10px,0,180deg)
scale3d(1.1,1.1, 1.1);
}
3.2 如果并不需要用到transform变换,仅仅是开启硬件加速:
.lusheng{
-webkit-transform: translateZ(0);
}
3.3 通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后,有些时候可能会导致浏览器频繁闪烁或抖动,可以尝试以下办法解决之:
.lusheng {
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
}
注: 通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题,但使用仍需谨慎,使用前一定要进行严谨的测试,否则它反而会大量占用浏览网页用户的系统资源,尤其是在移动端