在 CSS 动画中使用硬件加速(翻译)
在最近一个项目中,因为初期没有做太好的规划与人员技术能力有限,在性能方面有很多问题,而我加入这个项目的主要任务就是进行各种性能优化。其中对于重排重绘以及硬件加速相关优化进行的比较多,这种优化方式成本比较低,风险小,在配置较差设备效果明显。此文章来之原文链接
近些年,我们总是听到硬件加速,以及它如何帮助我们提升网页的动画性能,让网页动画变得更好,在移动端更流畅。但是我想一大部分经验少的工程师是不知道硬件加速是如何工作的以及我们如何使用它来帮助我们让动画变得更流畅。
硬件加速听起来非常复杂,像高等数学。在这篇文章中,我会简明的讲解如何在你的前端工程中使用这项技术。
为什么需要它?
让我们看一个简单的动画例子,一些球叠加在一起。然后移动这一组球按照一个四边形轨迹移动。最简单的办法就是通过设置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
启动动画:
CodePen Preview for Animating overlapping balls with top/left Properties
点击“Start Animation”,你会发现动画在任何桌面浏览器运行的都并不是很顺畅。如果你在移动端运行这个动画网页,你会看到很严重的丢帧现象(译者注:其实)。为了解决这个问题,我们可以使用transform
的translate()
函数代替对left
和top
的改变。
.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);}
}
复制代码
在下面例子中尝试运行上面的代码:
Animating overlapping balls with CSS transforms
现在动画比以前流畅多了。非常好!那么,为什么会这样呢?哈,css的transform
并没有不像操作left
和top
属性那样导致重绘。让我们看看Chrome
中的DevTools
里面Timeline
页面的执行结果(译者注:在Chrome
新版本中,该工具变成了performance
)。
在left
和top
这个例子中,我们可以看到在每一个步骤都有绿色柱状图。这是一个性能代价很高的操作。动画会产生丢帧,这也是我们优化动画效果的标准。
项目看看css
的transforms
的时间线:
就像你看到的那样,几乎没有绿色的柱形图出现。
另一个用于跟踪重绘处理的工具是Chrome
的DevTools
中rendering
里面的Enable paint flashing
选项。当该选项被选中,绿色的框会出现在重绘的区域。在left
和top
的例子中,当动画运行的时候,球就有一个绿色的框,因此球就发生了重绘。
在另一个例子中,重绘仅仅发生在动画开始和结束的时候。
那么transform
是如何让动画不会导致重绘的呢?最直接的答案就是transform
会直接使用硬件加速,在GPU
中运行,绕开了软件渲染。
硬件加速如何工作的
当浏览器接收到页面的信息,他会将页面解释成DOM
输。DOM
树和CSS
让浏览器构建渲染树。渲染书包含渲染对象 - 在页面中需要渲染的元素。每一个渲染对象被分配到一个图层中。每一个图层被更新到GPU
。这里的秘诀就在于通过transform
的层会使用GPU
渲染,因此不需要重绘,就像3D图形一样。这个转换是单独处理的。
在我们的例子中,CSS
的transform
在GPU
直接创建一个新的层。Chrome
的DevTools
的“Show layer borders”选项可以帮助我们查看那些是单独的层,开启这个选项以后单独的层会具有一个橙色的边框。
使用transform
样式的球会被一个橙色的边框所包围,因此它在一个独立的层中:
在此,你可能会问:什么时候浏览器会创建这种独立的层呢?
在以下情况会产生新的层:
- 3D 或者
CSS
的transform
属性 <video>
和<canvas>
元素CSS
的filter
属性- 覆盖在其它元素之上的元素,比如通过
z-index
提升层级
你可能会想,‘等等,这个例子用的是2D转换,并不是3D转换’。是的。这就是为什么在开始和结束的时候会有两次重绘产生。
3D转换和2D转换的不同在于是否提前生成新的层,如果是2D的话是在实行的时候。在动画开始的时候,一个新的层被创建,并且被传入GPU
处理。当动画结束,独立的层被移除,结果被重新绘制。
在GPU
渲染元素
并不是所有的CSS
属性变化都会直接在GPU
处理。只有下面的属性会这样处理:
- transform
- opacity
- filter
因此为了页面更加流畅,高性能的动画,我们需要尽可能的使用GPU
来处理。
强制在GPU
渲染
在某些情况下,它会在动画开始的时候尝试在GPU
渲染一个元素。这可以帮助我们避免创建新层的时候导致重绘。因此,我们需要使用transform hack
技术
.example1 {transform: translateZ(0);
}.example2 {transform: rotateZ(360deg);
}
复制代码
这么做会让浏览器知道,我们希望采用3D的方式做转换,这会让浏览器在最开始的时候就使用GPU
处理,启动硬件加速。
这个技术也可以用于结构复杂的元素上。让我们回到第一个例子,修改这个例子为包含一个球,还有使用filter
属性并一个具有一个背景图片的容器。球通过left
和top
实现动画效果。
Animating a ball with top/left properties
再一次,动画开始丢帧。因为每一次重绘都导致了大量的性能消耗。
现在让我们加上transform hack
。
Animating left/top properties with hardware acceleration
现在就没之前那么糟糕了。为什么?因为现在背景再一个独立的层中处理,因此重绘的代价变得很低。
使用硬件加速需要注意的地方
天下没有免费的午餐。对于硬件加速,目前有几个问题。
Memory
大部分重要的问题都是关于内存。GPU
处理过多的内容会导致内存问题。这在移动端和移动端浏览器会导致崩溃。因此,通常不会对所有的元素使用硬件加速。
Font rendering
在GPU
渲染字体会导致抗锯齿无效。这是因为GPU
和CPU
的算法不同。因此如果你不在动画结束的时候关闭硬件加速,会产生字体模糊。
The Near Future
有必要使用transform hack
的地方是提高性能。浏览器自身也提供了优化的功能,这也就是will-change
属性。这个功能允许你告诉浏览器这个属性会发生变化,因此浏览器会在开始之前对其进行优化。这里有一个例子:
.example {will-change: transform;
}
复制代码
遗憾的是,并不是所有浏览器都支持这个功能。
文末
概述以下我们都讲了什么:
GPU
渲染可以提高动画性能GPU
渲染会提高动画的渲染帧数- 使用会导致
GPU
渲染的CSS
属性 - 理解如何通过“transform hack”强制让一个元素在
GPU
渲染
在 CSS 动画中使用硬件加速(翻译)相关推荐
- Chrome中的硬件加速合成
概述 本文主要讲述了硬件加速合成在chrome中的实现细节以及使用背景. 引言 以前的浏览器都使用CPU来渲染整个网页的内容. 随着硬件加速的发展,一些小型设备也具备硬件加速的能力,同时视频 ...
- 一文读懂,Android中的硬件加速
/ 今日科技快讯 / 近日,携程发布<2023年春节旅游总结报告>.报告显示,春节期间国内外旅行订单皆迎来三年巅峰,旅游订单整体较虎年春节增长4倍.同时,春节期间出境游整体订单同比 ...
- CSS动画中的贝塞尔曲线
前言 最近在学习CSS动画,其中动画时间函数的部分涉及到了贝塞尔曲线的相关知识.对于这部分知识,之前一直没有好好学习过,正好借着这个机会学习下. 1. 贝塞尔曲线 首先简单介绍下贝塞尔曲线. 贝塞尔曲 ...
- “一文读懂“系列:Android中的硬件加速
浅谈 前几天有个朋友问我"了不了解关于手机硬件加速方面的知识?",嗯?其实我也想知道... 于是笔者就去网上搜罗了文章再结合自己对源码的理解,总结了这篇关于硬件加速的理解. 关于屏 ...
- WebRTC框架中的硬件加速
WebRTC框架中的硬件加速 典型缓冲流量 应用程序和单元测试设置 重要方法调用 WebRTC软件包 局限性 WebRTC是一个免费的开源项目,可为浏览器和移动应用程序提供实时通信功能. WebRTC ...
- matlab2017硬件加速,现场影像增强中的硬件加速机制研究
现场影像增强中的硬件加速机制研究 [摘要]:随着处理器性能的不断提升,图像.影像中越来越多的信息被直观化地呈现给用户.然而,面对用户在直观化成像上越来越高的应用需求,信息的数据量庞大且需要实时处理.基 ...
- 在程序中设置[硬件加速 级别]
[文章标题]: 在程序中设置[硬件加速 级别] [文章作者]: FishSeeWater[丰盛辉煌] [操作平台]: Windows XP [关 键字]: 硬件加速 VC++ 禁用硬件加速 设 ...
- 浏览器中支持硬件加速
1 什么是硬件加速 硬件加速是指,应用程序使用计算机硬件的能力,比软件实现的功能能够更有效地执行某些操作.在 Chrome/Chromium 浏览器中,硬件加速能够利用计算机的图形处理单元(GPU)来 ...
- 【如何在 Debian、Ubuntu 或 Linux Mint 上的 Google Chrome、Brave、Vivaldi 和 Opera 浏览器中启用硬件加速视频解码】
如何在 Debian.Ubuntu 或 Linux Mint 上的 Google Chrome.Brave.Vivaldi 和 Opera 浏览器中启用硬件加速视频解码 铬, 操作方法, 视频 G ...
最新文章
- 房子成焦点,被挂马的房产网站仍在增加中
- 架构周报| 浅析MySQL JDBC连接配置上的两个误区
- ajax 阻止默认提交,jQuery验证插件:在对ajax调用servlet时,submitHandler不会阻止默认提交-返回false无效...
- 为Qt Designer创建自定义Widgets小部件
- asp.net操作Excel总结
- 计算机认识新朋友教案,小班教案认识新朋友
- 利用websocket实现一对一聊天
- matlab 价格统计,matlab中的金融数据统计
- linux服务器程序开发,怎样搭建一个linux开发服务器
- DropDownList.SelectedItem与DropDownList.SelectedValue的区别
- pads layout PCB整体旋转,不改变布局并保留连线
- 乐高ev3搭建图_你所不知道的乐高EV3发展史
- day01(计算机基本知识+JAVA基础知识+环境变量的配置+标识符命名规则+注释的分类)
- windows xp 美化大师之系统主题
- Word一行有空白格,却无法输入新的文字
- AirSim学习日志 9-三维空间航路点跟踪
- Vue详细介绍及使用
- Python中IO编程-文件读写
- mysql 锁(三)
- 融合算法性能评价指标
热门文章
- Gmedian(几何中位数或者中位数中心)
- 微信小程序跳一跳辅助程序(手动版)
- 在阿里干了6年自动化测试,30岁即将退休的我,告诉你自动化测试工程师有多吃香...
- 新时代下的医疗行业新基建研讨会
- 剖析《最后生还者 第二部》叙事系统的成就与败笔(下)
- Real-Time Rendering——7.1 Planar Shadows平面阴影7.1.1 Projection Shadows投影阴影
- Bootstrap03之表单,按钮,图片,辅助类,响应式工具
- 我的世界龙珠服务器配置文件修改,【更新】【龙珠】【DragonBlockC】配置文件修改...
- macbook上网没问题但是无法连接到app store的解决办法
- 要计算机专业才拥有的桌面,手把手教您win10黑屏一会才进桌面,win10开机黑屏很久才有画面解决办法...