详解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制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
用CSS3实现背景渐变的方法
Jul 14 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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 Curl出现403错误的解决办法
2014/05/29 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
看了就知道什么是JSON
2007/12/09 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python入门篇之字符串
2014/10/17 Python
python获取本机外网ip的方法
2015/04/15 Python
Python抽象类的新写法
2015/06/18 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python分布式编程实现过程解析
2019/11/08 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
办公室文秘自我评价
2013/09/21 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
健康状况证明书
2014/11/26 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
基于PyQt5制作一个群发邮件工具
2022/04/08 Python