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


Posted in HTML / CSS onAugust 21, 2017

前言

最近在看在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的文档上看到的是下面这个:

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

.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);
}

硬件加速的坑

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

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

打开控制台

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

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

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

最后,附上跳过坑的方法

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
Aug 17 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
前端面试必备之CSS3的新特性
Sep 05 #HTML / CSS
纯CSS实现预加载动画效果
Sep 06 #HTML / CSS
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 #HTML / CSS
分享8款纯CSS3实现的搜索框功能
Sep 14 #HTML / CSS
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 #HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 #HTML / CSS
CSS3轻松实现圆角效果
Nov 09 #HTML / CSS
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
javascript闭包入门示例
2014/04/30 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
教师党员思想汇报
2014/01/06 职场文书
党风廉政承诺书
2014/03/27 职场文书
《海底世界》教学反思
2014/04/16 职场文书
家长通知书教师评语
2014/04/17 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
python数字图像处理实现图像的形变与缩放
2022/06/28 Python