-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然后按顺序被绘制出来。
 

同时使用:

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.

null transform hack 强制使用硬件加速的更多相关文章

  1. Chromium硬件加速渲染的UI合成过程分析

    在Chromium中.Render端和WebGL端绘制出来的UI终于是通过Browser端显示在屏幕上的.换句话说.就是Browser端负责合成Render端和WebGL端的UI.这涉及到不同Open ...

  2. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  3. Android 4.0的图形硬件加速及绘制技巧

    转:http://zuiniuwang.blog.51cto.com/3709988/721798 从Android 3.0开始,Android 2D的绘制流程就设计为能够更好地支持硬件加速.使用GP ...

  4. Android--hardwareAccelerated 硬件加速详解 android:largeHeap="true"

    做项目时,引导页面的ViewPager报了OOM异常,图片并不大,在清单文件Application节点中添加了两行代码就解决了这个问题 android:hardwareAccelerated=&quo ...

  5. 【GStreamer开发】GStreamer播放教程08——视频解码的硬件加速

    目标 视频的硬件解码近来发展非常快速,尤其是在低功耗的设备上.本教程会讲述一些硬件加速的背景知识并解释一下GStreamer是怎么做的. 悄悄告诉你,如果设置正确地话,我们什么也不用做,GStream ...

  6. 使用CSS3开启GPU硬件加速提升网站动画渲染性能

    遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...

  7. ffmpeg实现dxva2硬件加速

    这几天在做dxva2硬件加速,找不到什么资料,翻译了一下微软的两篇相关文档.这是第二篇,记录用ffmpeg实现dxva2. 第一篇翻译的Direct3D device manager,链接:http: ...

  8. 用CSS开启硬件加速来提高网站性能

    国外一篇文章,有点意思,转载过来,准备尝试下~ 中文地址:http://www.cnblogs.com/rubylouvre/p/3471490.html 原文地址:http://blog.teamt ...

  9. GPU硬件加速相关

    从android3.0开始,2D渲染开始支持硬件加速,即在view的Canvas上的绘图操作可以用GPU来加速. 硬件加速会使app消耗更多的内存. 如果配置文件中,Target API level  ...

随机推荐

  1. mybatis运行时错误Illegal argument exception argument type mismatch

    使用注解时遇到该错误 使用XML应该也会有相应的错误 解决办法:查看是不是Dao接口的参数列表没有加@Param注解  参数过多时需要该注解指明参数

  2. Bmob云IM实现头像更换并存入Bmob云数据库中(1.拍照替换,2.相册选择)

    看图效果如下: 1.个人资料界面 2.点击头像弹出对话框 3.点击拍照 4.切割图片,选择合适的部分 5.点击保存,头像替换完毕,下面看从相册中选择图片. 6.点击相册 7.任选一张图片 8.切割图片 ...

  3. hdu4704 Sum 2013 Multi-University Training Contest 10 数论题

    Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Subm ...

  4. POJ1083 Moving Tables(模拟)

    The famous ACM (Advanced Computer Maker) Company has rented a floor of a building whose shape is in ...

  5. linux的基本java环境搭建

    1.安装rz,sz以便于上传和下载文件 yum install -y lrzsz 2.安装java环境 -- jdk1.8 官网下载jdk1.8:http://www.oracle.com/techn ...

  6. python下selenium测试报告整合

    使用过一段时间的Robot Framework测试框架,测试之前需要先搭环境,需要安装的东西很多,这一点个人有些排斥. 每一个测试内容对应一个Test_Case,Robot有自己语法格式,如判断.循环 ...

  7. 用html+css+js做打地鼠小游戏

    html 代码 first.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. PPT排版细节,写给大家看的设计书,完美总结

    原创作者:陈玓玏 相信每一位小宝贝在工作中都会被老板用PPT虐无数遍,虐到自己怀疑人生.奈何在网上随手一搜,出现的各类招聘要求都躲不开"熟练掌握PPT制作",尤其是各类科技公司.咨 ...

  9. elasticsearch单例模式连接

    import java.net.InetAddress;import org.elasticsearch.client.transport.TransportClient;import org.ela ...

  10. C#委托

    关于什么是委托,委托如何使用,我在这里就不说了. 需要说的: 委托是函数指针链 委托的 BeginInvoke 委托如果出现异常,会如何 如果不知道函数指针,可以继续往下看,我来告诉大家,为何需要委托 ...