null transform hack 强制使用硬件加速
2016-01-27 13:47
495 查看
-webkit-transform: translateZ(0);
-webkit-transform: translate3d(0,0,0);
作用:
1、切换到硬件合成模式,通常所有事情都CPU完成,硬件影像合成模式会将指定元素传给GPU 处理
2、创建一个新的图层,带有自己的backing surface(a graphics context into which layers are drawn),通常来说并不是所有新建的图层都有自己的backing surface,大部分情况它们会共享一个。
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用
chrome环境下决定是否应该带有自己的backing surface条件:
The layer has 3D or perspective transform CSS properties.
The layer is used by <video> element using accelerated video decoding.
The layer is used by a <canvas> element with a 3D context or accelerated 2D context.
The layer is used for a composited plugin, e.g. Flash or Silverlight.
The layer uses a CSS animation for its opacity or uses an animated webkit transform.
The layer uses accelerated CSS filters.
The layer has a descendant that is a compositing layer.
The layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer).
但在移动设备上,无限制的使用这个Hack会变得一团糟,因为它们的视频存储器(Video Random Access Memory)非常有限,所以很容易耗尽而导致渲染效果很不好。backing surface实质上是一种需要上传至GPU ,由它影像合成的结构。影像合成的过程中每一个独立的结构都需要上传到GPU然后按顺序被绘制出来。
同时使用:
When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.
-webkit-transform: translate3d(0,0,0);
作用:
1、切换到硬件合成模式,通常所有事情都CPU完成,硬件影像合成模式会将指定元素传给GPU 处理
2、创建一个新的图层,带有自己的backing surface(a graphics context into which layers are drawn),通常来说并不是所有新建的图层都有自己的backing surface,大部分情况它们会共享一个。
CSS中以下属性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)来触发GPU渲染,请合理使用
chrome环境下决定是否应该带有自己的backing surface条件:
The layer has 3D or perspective transform CSS properties.
The layer is used by <video> element using accelerated video decoding.
The layer is used by a <canvas> element with a 3D context or accelerated 2D context.
The layer is used for a composited plugin, e.g. Flash or Silverlight.
The layer uses a CSS animation for its opacity or uses an animated webkit transform.
The layer uses accelerated CSS filters.
The layer has a descendant that is a compositing layer.
The layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer).
但在移动设备上,无限制的使用这个Hack会变得一团糟,因为它们的视频存储器(Video Random Access Memory)非常有限,所以很容易耗尽而导致渲染效果很不好。backing surface实质上是一种需要上传至GPU ,由它影像合成的结构。影像合成的过程中每一个独立的结构都需要上传到GPU然后按顺序被绘制出来。
同时使用:
backface-visibility: hidden; perspective:1000;
When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.
相关文章推荐
- MySQL高效分页解决方案集
- 集训队专题(1)1002 统计难题
- GDKOI2015D2T1
- TextureView+MediaPlayer播放本地视频
- Spring的XML配置的bean调用注解方式的bean
- win下直播环境的搭建
- Lua 笔记
- iOS网络编程实践--蓝牙对等网络通信实例讲解
- linux之device_init()
- The user specified as a definer ('montor'@'%') does not exist
- 20条Linux命令面试问答
- 自定义复选框 checkbox 样式
- Unity关于用LoadLevelAdditiveAsync导致新场景的Navmesh数据不正确Loading条的实践
- 高效动画
- Exchange 2007(二)原域控降级新域控更改IP和计算机名
- java 死记硬背真不行
- (转)String和StringBuilder、StringBuffer的区别?
- 项目功能大全,让你的项目一天搞定
- LayoutInflater源码深度分析笔记
- AlertDialog创建过程详解