详解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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 HTML / CSS
CSS中em的正确打开方式详解
Apr 08 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快速排序原理与实现方法分析
2016/05/26 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
超简单的jquery的AJAX用法
2010/05/10 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
微信小程序联网请求的轮播图
2017/07/07 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python 伯努利分布详解
2020/02/25 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Java如何调用外部Exe程序
2015/07/04 面试题
小加工厂管理制度
2014/01/21 职场文书
学校消防演习方案
2014/02/19 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
MySQL查询日期时间
2022/05/15 MySQL