现代浏览器大都可以利用GPU来加速页面渲染。每个人都痴迷于60桢每秒的顺滑动画。在GPU的众多特性之中，它可以存储一定数量的纹理（一个矩形的像素点集合）并且高效地操作这些纹理（比如进行特定的移动、缩放和旋转操作）。这些特性在实现一个流畅的动画时特别有用。浏览器不会在动画的每一帧都绘制一次，而是生成DOM元素的快照，并作为GPU纹理（也被叫做层）存储起来。之后浏览器只需要告诉GPU去转换指定的纹理来实现DOM元素的动画效果。这就叫做GPU合成，也经常被称这种借助于显卡的优势改变渲染操作：通常被笼统的称为&硬件加速(hardware acceleration)&。
&注&：fps:帧/秒(frames&per&second)的缩写,也称为帧速率。是指1秒钟时间里刷新的图片的帧数
GPU（Graphic&Processing&Unit，图形处理器）。GPU是相对于CPU的一个概念，由于在现代的计算机中图形的处理变得越来越重要，需要一个专门的图形的核心处理器。在浏览器中用css开启硬件加速，使GPU发挥功能。CSS&animations,&transforms&以及&transitions&不会自动开启GPU加速，而是由浏览器的缓慢的软件渲染引擎来执行。那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。现在，像Chrome,&FireFox,&Safari,&IE9+和最新版本的Opera都支持硬件加速，当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。在一些不需要3D效果的时候需要一些技巧开启硬件加速，例如：为动画DOM元素添加CSS3样式-webkit-transform.:transition3d(0,0,0)或-webkit-transform.:translateZ(0);，这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
在webkit内核的浏览器中，另一个行之有效的方法是
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
原生的移动端应用总是可以很好的运用GPU，这是为什么它比网页应用(Web&apps)表现更好的原因。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。如果通过你的测试，结果确是提高了性能，你才可以使用这些方法。使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。
硬件加速的工作原理：
浏览器接收到页面文档后，会将文档中的标记语言解析为DOM树。DOM树和CSS结合后形成浏览器构建页面的渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到GPU形成渲染纹理，而图层在GPU中transform&是不会触发 repaint 的，这一点非常类似3D绘图功能，最终这些使用&transform&的图层都会由独立的合成器进程进行处理。
3D 和 2D transform 的区别就在于，浏览器在页面渲染前为3D动画创建独立的复合图层，而在运行期间为2D动画创建。动画开始时，生成新的复合图层并加载为GPU的纹理用于初始化 repaint。然后由GPU的复合器操纵整个动画的执行。最后当动画结束时，再次执行 repaint 操作删除复合图层。
使用 GPU 渲染元素，并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些：
如果某一个元素的背后是一个复杂元素，那么该元素的 repaint 操作就会耗费大量的资源，此时也可以使用上面的技巧来减少性能开销。
使用硬件加速的注意事项
使用硬件加速并不是十全十美的事情，比如：
内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。
使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
层创建标准
什么情况下能使元素获得自己的层？虽然 Chrome 的启发式方法(heuristic)随着时间在不断发展进步，但是从目前来说，满足以下任意情况便会创建层：
3D 或透视变换(perspective transform) CSS 属性
使用加速视频解码的 元素
拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
混合插件(如 Flash)
对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
拥有加速 CSS 过滤器的元素
元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
主要是最后一条,如果有一个元素，它的兄弟元素在复合层中渲染，而这个兄弟元素的z-index比较小，那么这个元素（不管是不是应用了硬件加速样式）也会被放到复合层中。
这类问题尤其是用了轮播、动画loading的页面，出现这问题很常见。另外推荐在追查性能问题的时候打开『show composited layer borders』选项，如果页面有很多黄色的框肯定是不对的。最可怕的是，浏览器有可能给复合层之后的所有相对或绝对定位的元素都创建一个复合层来渲染。使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
阅读(...) 评论()后使用快捷导航没有帐号？
其他登录方式
—— 新手入门 ——
—— 智友精华 ——
查看: 4757|回复: 8
在线时间153 小时最后登录阅读权限20UID592290注册时间积分237精华0
, 积分 237, 距离下一级还需 163 积分
主题帖子 金币409 元 智豆1 点
本帖最后由 landing 于
17:55 编辑
所有的v880介绍中都提到&内部集成独立3D加速芯片，全面支持3D硬件加速，配置强劲高通Adreno 200的GPU&,但出厂默认是关闭的,
那不就相当于没有这个GPU吗?
中兴这样设置的目的是什么?还要通过替换系统文件的方式才能打开硬件加速?
对于一般消费者来说,这个GPU就已经没用了
不要说是为了省电,如果是为了省电的话,可以加一个设置选项,硬件加速是开还是关
现在的情况是,正常途径就没有办法打开硬件加速{:soso_e115:}
在线时间38 小时最后登录阅读权限15UID487005注册时间积分55精华0
, 积分 55, 距离下一级还需 45 积分
主题帖子 金币118 元 智豆1 点
偶觉得吧关闭这个是为了省电。
在线时间153 小时最后登录阅读权限20UID592290注册时间积分237精华0
, 积分 237, 距离下一级还需 163 积分
主题帖子 金币409 元 智豆1 点
不要说是为了省电,如果是为了省电的话,可以加一个设置选项,硬件加速是开还是关
现在的情况是,正常途径就没有办法打开硬件加速
在线时间28 小时最后登录阅读权限10UID529176注册时间积分36精华0
, 积分 36, 距离下一级还需 14 积分
主题帖子 金币95 元 智豆1 点
估计中兴的驱动有缺陷 开了玩游戏 反而性能下降 索性关了省心
在线时间60 小时最后登录阅读权限20UID586776注册时间积分216精华0
, 积分 216, 距离下一级还需 184 积分
主题帖子 金币440 元 智豆1 点
这倒有点可能~~官方内核玩游戏~开3D加速~~感觉上就是没那么给力~~不过就系统稳定性来说~~官方的倒是足够稳定~~
看各人所需吧~
在线时间312 小时最后登录阅读权限30UID458971注册时间积分1001精华0
, 积分 1001, 距离下一级还需 199 积分
主题帖子 金币1406 元 智豆21 点
GPU是默认都是开的。我们打开的只是UI的硬件加速而已。
在线时间153 小时最后登录阅读权限20UID592290注册时间积分237精华0
, 积分 237, 距离下一级还需 163 积分
主题帖子 金币409 元 智豆1 点
如果打开的只是UI的硬件加速，为什么说人为打开后，玩游戏便流畅了？
在线时间312 小时最后登录阅读权限30UID458971注册时间积分1001精华0
, 积分 1001, 距离下一级还需 199 积分
主题帖子 金币1406 元 智豆21 点
那应该是加大了缓存的原因吧，还是有点作用的。
不过我不觉得打开之后有什么明显的速度提升。
在线时间26 小时最后登录阅读权限15UID1442683注册时间积分80精华0
, 积分 80, 距离下一级还需 20 积分
主题帖子 金币172 元 智豆1 点
原来暗藏玄机}