使用css3实现动画来开启GPU加速
参考文章:
https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html
http://blog.csdn.net/hsany330/article/details/50925260
用CSS3动画替代JS模拟动画的好处:
不占用JS主线程;
可以利用硬件加速;
浏览器可对动画做优化(元素不可见时不动画减少对FPS影响)
下面让我们来看一个动画效果,在该动画中包含了几个堆叠在一起的球并让它们沿相同路径移动。最简单的方式就是实时调整它们的 left
和 top
属性。我们可以使用JavaScript,但我们将使用CSS动画来替代。请注意,文中的示例不带任何前缀,示例中使用了Autoprefixer来确保完整的兼容性。
.ball-running {
animation: run-around 4s infinite;
}
@keyframes run-around {
0%: {
top: 0;
left: 0;
}
25% {
top: 0;
left: 200px;
}
50% {
top: 200px;
left: 200px;
}
75% {
top: 200px;
left: 0;
}
}
这里有一个动画按例,点击按钮启动一个JavaScript动画:
点击“Start Animation”按钮之后,你会隐约感觉到动画并不是那么流畅,即使使用电脑上的浏览器也会有些卡顿,更不要提在移动端达到 60fps
的流畅效果了。为了解决这个问题,我们可以使用 CSS transform 中的 translate()
来替代 top
和 left
:
.ball-running {
animation: run-around 4s infinite;
}
@keyframes run-around {
0%: {
transform: translate(0, 0);
}
25% {
transform: translate(200px, 0);
}
50% {
transform: translate(200px, 200px);
}
75% {
transform: translate(0, 200px);
}
}
现在动画看起来流畅多了。这是为什么呢?这是因为 transform
属性不会触发浏览器的 repaint,而 left
和 top
则会一直触发 repaint,下图是从 chrome 开发者工具的 timeline 面板监测到的数据:
上图数据中的绿色条纹表示的就是使用 top
和 left
实现动画时浏览器发生的 repaint 操作,从中可以看出动画帧数远低于 60
帧。
下图是使用CSS transform 检测到的数据:
如你所见,动画演示期间并没有过多的 repaint 操作。
从 chrome 的开发者工具按 ESC
之后选择 “rendering” 面板,我们可以通过选中“Enable piant flashing”来进一步监测 repaint 操作。开启该选项后,页面中的 repaint 区域就会被绿色蒙版高亮显示出来。重新使用 top
和 left
的示例演示的话,你会发现包裹球的那块区域会一直闪烁绿色的蒙版。
另一方面,在使用 transform
的示例中,绿色蒙版只会在动画开始和结束的时候出现。
那么,为什么 transform
没有触发 repaint 呢?简而言之,transform
动画由GPU控制,支持硬件加速,并不需要软件方面的渲染。
浏览器接收到页面文档后,会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个图层又会被加载到GPU形成渲染纹理,而图层在GPU中 transform
是不会触发 repaint 的,这一点非常类似3D绘图功能,最终这些使用 transform
的图层都会由独立的合成器进程进行处理。
在我们的示例中,CSS transform
创建了一个新的复合图层,可以被GPU直接用来执行 transform
操作。在chrome开发者工具中开启“show layer borders”选项后,每个复合图层就会显示一条黄色的边界:
示例中的球就处于一个独立的复合图层,移动时的变化也是独立的:
此时,你也许会问:浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:
- 3D 或者 CSS transform
<video>
和<canvas>
标签- CSS filters
- 元素覆盖时,比如使用了
z-index
属性
等一下,上面的示例使用的是 2D transition 而不是 3D 的 transforms 啊?这个说法没错,所以在timeline中我们可以看到:动画开始和结束的时候发生了两次 repaint 操作。
3D 和 2D transform 的区别就在于,浏览器在页面渲染前为3D动画创建独立的复合图层,而在运行期间为2D动画创建。动画开始时,生成新的复合图层并加载为GPU的纹理用于初始化 repaint。然后由GPU的复合器操纵整个动画的执行。最后当动画结束时,再次执行 repaint 操作删除复合图层。
使用 GPU 渲染元素
并不是所有的CSS属性都能触发GPU的硬件加速,实际上只有少数属性可以,比如下面的这些:
transform
opacity
filter
强制使用GPU渲染
为了避免 2D transform 动画在开始和结束时发生的 repaint 操作,我们可以硬编码一些样式来解决这个问题:
.example1 {
transform: translateZ(0);
}
.example2 {
transform: rotateZ(360deg);
}
这段代码的作用就是让浏览器执行 3D transform。浏览器通过该样式创建了一个独立图层,图层中的动画则有GPU进行预处理并且触发了硬件加速。
开启GPU硬件加速可能触发的问题:
通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后,有些时候可能会导致浏览器频繁闪烁或抖动,可以尝试以下办法解决之:
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;
如何监测动画帧速率
推荐两种实时监测网页渲染帧速率的方法:
1.Chrome的DevTool中TimeLine的Frame模块
2.地址栏输入”chrome:flags”搜索”fps”,将”FPS计数器”开启,浏览器重启后右上角会实时显示帧速率。
转载于简书Evan_zhan,原文地址
使用css3实现动画来开启GPU加速的更多相关文章
- 开启gpu加速的高性能移动端相框组件!
通过设置新的css3新属性translateX来代替传统的绝对定位改变left值的动画原理,新属性translateX会开启浏览器自带的gpu硬件加速动画性能,提高流畅度从而提高用户体验, 代码有很详 ...
- ubuntu 15 安装cuda,开启GPU加速
1 首先要开启GPU加速就要安装cuda.安装cuda,首先要安装英伟达的驱动.ubuntu有自带的开源驱动,首先要禁用nouveau.这儿要注意,虚拟机不能安装ubuntu驱动.VMWare下显卡只 ...
- 【python基础】python开启GPU加速
前言 训练时使用GPU可以加速程序运行,本文介绍如何使用GPU加速. 前提条件 1. 机子有GPU显卡,并安装GPU显卡驱动: 2. 安装GPU的使用环境,CUDA等: 3. 打开nvidia-smi ...
- python开启GPU加速
看了好多教程都提到了使用 os.environ["CUDA_VISIBLE_DEVICES"] = "1" 或者export CUDA_VISIBLE_DEVI ...
- CSS动画的性能分析和浏览器GPU加速
此文已由作者袁申授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 有数的数据大屏可以在一块屏幕上展示若干张不同的图表,以炫酷的方式展示各种业务数据.其中有些图表使用CSS实现了 ...
- 用CSS开启硬件加速来提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...
- 用CSS开启硬件加速来提高网站性能(转)
翻译文章,原文地址:http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-cs ...
- GPU加速有坑?
大多数人都知道有动画的地方可以使用GPU来加速页面渲染. 例如,做优化的时候,将使用left和top属性的动画修改成使用transform属性的CSS动画.或者听到别人教你使用transform:tr ...
- CSS开启硬件加速提高网站性能
国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/yzw7489757/ 原文地址:http://blog.teamtreehouse.com/i ...
随机推荐
- Windows下安装配置Flutter
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且 ...
- 教你如何下载并破解IAR
最近参加项目要写STM8的工程的,所以用到IAR,所以就自己安装了一次然后写个心得. 因为我用到的是STM8,所以我就下载了STM8的,不过其他过程都一样的. 首先去到IAR SYSTEMS的官网,找 ...
- docker整理
Docker的简单介绍 docker是什么 Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,于 2013 年 3 月以 Apache ...
- 安装Git Bash图文教程
1.下载Git Bash,下载地址 https://pan.baidu.com/s/1sllsi0d 2.双击Git-2.9.2-64-bit.exe,运行,进行安装:点击“Next” 3.设置安装路 ...
- c#字符串to/from文本文档IO示例
写入文本文档 class Program { static void Main(String[] args) { //写入string数组,每个string一行 string[] lines = { ...
- FTP学习笔记
FTP有两个连接方式 1.控制连接 2.数据连接 控制链接 标准端口为21 用于数据传输中的控制 数据连接 标准端口20 用于数据传输中的上传 下载数据 数据传输的连接方式,主动连接 被动连接. ...
- vs2017安装和使用教程(详细)
借鉴:https://blog.csdn.net/qq_36556893/article/details/79430133#一.官网下载
- [python,2018-06-29] 37%法则及其拓展解决恋爱问题
37%法则 苏格拉底的问题: 在一片麦田里摘出一颗最大最好的麦穗.但只能摘一次,而且不能回头. 传说这是苏格拉底给他的弟子柏拉图提出的问题,又传说柏拉图进行了2次选择: 1.柏拉图第一次走进麦田,他发 ...
- windows计划任务启动bat执行java文件
系统:win7 环境:需要配置好jdk的环境变量 需求:每次开机,用bat批处理执行将一个位于D:\workspace\console目录底下的console.txt重命名的java文件 拿到需求,我 ...
- 利用pyinstaller生成exe之后,运行不能正常产生结果文件问题记录
https://segmentfault.com/q/1010000011284617/a-1020000011493026 在此链接已解决问题,现在在这里在详细记录一次 问题描述: 利用pychar ...