详解CSS3开启硬件加速的使用和坑

站长资源 2024/12/26 佚名

43 1538 43

DDR爱好者之家 Design By 杰米

前言

最近在看在github上看iscroll的文档。虽然是英文的，但是为了装逼，没办法硬着头皮看完了，觉得作者写得不错（我有那么好耐心写那么长的文档就好了[捂脸]），然后为了更好地装逼，有看了一遍，其中是发现了不少好东西的，比如说 CCS3硬件加速就是在上面被我扩展出来的。为了大家可以一起愉快地玩耍，我就先附上iscroll的Github Link：https://github.com/issaxite/iscroll

开启CSS3加速

平时我们写的css3动画（没有触发硬件加速的）都是使用浏览器缓慢的软件渲染引擎来执行，字面上意思就是没有开启硬件加速。比如有时候写的移动端网页的动画（比如最简单的模态框）在安卓手机上会出现卡帧的现象，有很大可能就是使用浏览器软件渲染引擎来执行，性能跟不上导致的。上面说到硬件加速就可以解决这个问题，性能跟不上嘛，那就Spider Man上（能力越大，责任越大）——来硬件加速，性能提上去呀（我知道这又是一个烂gag），其实所谓硬件加速就是告诉浏览器，让它使用GPU进行渲染，切换到GPU模式，发挥GPU的一系列功能。

举个例子：

CSS的 animations, transforms 以及 transitions 不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。为了性能，这个时候或许你就需要开启硬件加速功能。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。

Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。

在其他的文章上看到的几个可以切换到GPU模式的几个3d属性：

.isaax{
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

在iscroll的文档上看到的是下面这个：

.isaax {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}

据说使用以上样式触发硬件加速后会出现 “页面可能会出现闪烁的效果“ 的问题，我是还没有发现，在网上是找到两个可以解决的方法：

方法一

.isaax {
   -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;
}

backface-visibility （ie10+）是用来隐藏被旋转元素的背面，translateZ 导致的？;
而当为元素定义 perspective 属性时，其子元素会获得透视效果。

换言之，并不是去掉闪烁，而是设成透明[技术太渣根本不敢说话]

方法二

如果是webkit内核，还有一种方式可以解决：

.isaax {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

硬件加速的坑

看了大神的文章才知道，握草，这东西也不是万金油啊，用得不好，狠起来你那女票还狠，看了打开大神的例子又再次感受到深深的恶意。头部的那个轮播动画元素的存在居然会导致下面所有相对和绝对定位的元素都被放到复合层中。。。

然后说一下怎么打开查看【复合层】元素选项的方式，好像上面文章提到的方法有点过时：

打开控制台

勾选Layer Borders选项，你会发现世界突然清晰了许多

最后，附上跳过坑的方法：

使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。

.isaax{
  position: relative;
  z-index: 1;  // 可以设大点，尽量设得比后面元素的z-index值高
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

CSS3开启硬件加速,CSS3硬件加速

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“详解CSS3开启硬件加速的使用和坑”

暂无评论...

详解CSS3开启硬件加速的使用和坑

CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集

CSS鼠标悬浮DIV后显示DIV外的按钮解决方法

评论“详解CSS3开启硬件加速的使用和坑”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接