GPU硬件加速
.cube {
-webkit-transform: translateZ();
-moz-transform: translateZ();
-ms-transform: translateZ();
-o-transform: translateZ();
transform: translateZ();
/* Other transform properties here */
}
在webkit内核的浏览器中,另一个行之有效的方法是
.cube {
-webkit-transform: translate3d(, , );
-moz-transform: translate3d(, , );
-ms-transform: translate3d(, , );
transform: translate3d(, , );
/* Other transform properties here */
}
原生的移动端应用总是可以很好的运用GPU,这是为什么它比网页应用(Web apps)表现更好的原因。硬件加速在移动端尤其有用,因为它可以有效的减少资源的利用。如果通过你的测试,结果确是提高了性能,你才可以使用这些方法。使用GPU可能会导致严重的性能问题,因为它增加了内存的使用,而且它会减少移动端设备的电池寿命。
硬件加速的工作原理:
transform
是不会触发 repaint 的,这一点非常类似3D绘图功能,最终这些使用 transform
的图层都会由独立的合成器进程进行处理。transform
opacity
filter
使用硬件加速并不是十全十美的事情,比如:
- 内存。如果GPU加载了大量的纹理,那么很容易就会发生内容问题,这一点在移动端浏览器上尤为明显,所以,一定要牢记不要让页面的每个元素都使用硬件加速。
- 使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了,文本还是会在动画期间显示得很模糊。
什么情况下能使元素获得自己的层?虽然 Chrome 的启发式方法(heuristic)随着时间在不断发展进步,但是从目前来说,满足以下任意情况便会创建层:
- 3D 或透视变换(perspective transform) CSS 属性
- 使用加速视频解码的 元素
- 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
- 混合插件(如 Flash)
- 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
- 拥有加速 CSS 过滤器的元素
- 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
- 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
GPU硬件加速的更多相关文章
- [IE9] GPU硬件加速
IE9 的一个重大改进就是使用了GPU硬件加速来渲染网页. 那么GPU硬件加速到底能够带来多大的性能提升? 你可以在IE的测试案例网站(http://ie.microsoft.com/testdr ...
- GPU硬件加速原理 /转
现代浏览器大都可以利用GPU来加速页面渲染.每个人都痴迷于60桢每秒的顺滑动画.在GPU的众多特性之中,它可以存储一定数量的纹理(一个矩形的像素点集合)并且高效地操作这些纹理(比如进行特定的移动.缩放 ...
- 使用CSS3开启GPU硬件加速提升网站动画渲染性能
遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...
- GPU硬件加速相关
从android3.0开始,2D渲染开始支持硬件加速,即在view的Canvas上的绘图操作可以用GPU来加速. 硬件加速会使app消耗更多的内存. 如果配置文件中,Target API level ...
- Android 显示系统:飞思卡尔平台图形界面与GPU硬件加速
图形是Android平台中的一个大主题,包含java/jni图形框架和2d/3d图形引擎(skia.OpenGL-ES.renderscript). 本文档描述了飞思卡尔设备上的一般Android图形 ...
- CSS3 GPU硬件加速
1.代码(未添加GPU加速代码) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- javascript 手势(swipeLeft,swipeRight)滑动中使用css3动画卡顿,开启硬件加速
今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...
- 【ARM-Linux开发】【CUDA开发】【视频开发】关于Linux下利用GPU对视频进行硬件加速转码的方案
最近一直在研究Linux下利用GPU进行硬件加速转码的方案,折腾了很久,至今没有找到比较理想的硬加速转码方案.似乎网上讨论这一方案的文章也特别少,这个过程中也进行了各种尝试,遇到很多具体问题,以下便对 ...
- ffmpeg实现dxva2硬件加速
这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.这是第二篇,记录用ffmpeg实现dxva2. 第一篇翻译的Direct3D device manager,链接:http: ...
随机推荐
- 【week3】词频统计 单元测试
使用Eclipse 集成的Junit进行单元测试.单元测试的核心包括断言.注解. 测试代码如下: @BeforeClass // 针对所有测试,只执行一次,且必须为static void public ...
- 关于c中的一些新函数
localtime 和 localtime_s: localtime:localtime(const time_t * _Time) time_t t;struct tm *local;time(&a ...
- mysql学习之数据备份与恢复
该文使用mysql5.5 centos6.5 64位(本人使用rpm安装mysql,数据库的安装目录默认) 一.数据备份注意事项 读锁问题:数据库(或者某个表)一旦进行读锁操作则影响数据库的写操作所以 ...
- [剑指Offer] 47.求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). [思路]用&&的短路思想来求和 ...
- 使用oledb读取excel表
string path = "C:\\Users\\aaa\\Desktop\\aa.xls"; string conn = "Provider = Microsoft. ...
- vs code 自动补全效果不理想的问题
之前一直用webstorm,最近换换口味,改用了VS Code,发现VS Code 智能提示得到的都不是我想要的 就比如 ! + tab ,HTML结构都出不来.经过一番搜索,发现是 VS Code ...
- Atom Editor 插件 atom-less 的使用方法
一.下载安装 atom-less atom-less 项目在这里:https://github.com/schmuli/atom-less 安装方法请参考这篇博文:http://blog.csdn.n ...
- BZOJ3238:[AHOI2013]差异——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3238 https://www.luogu.org/problemnew/show/P4248 参考 ...
- BZOJ3668:[NOI2014]起床困难综合症——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3668 https://www.luogu.org/problemnew/show/P2114 21世 ...
- bzoj4773: 负环(倍增floyd)
浴谷夏令营例题...讲师讲的很清楚,没看题解代码就自己敲出来了 f[l][i][j]表示i到j走2^l条边的最短距离,显然有f[l][i][j]=min(f[l][i][j],f[l-1][i][k] ...