-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. ArrayList ConcurrentModificationException

    1.ConcurrentModificationException ConcurrentModificationException 出现在使用 ForEach遍历,迭代器遍历的同时,进行删除,增加出现 ...

  2. Java线程池详解

    一.线程池初探 所谓线程池,就是将多个线程放在一个池子里面(所谓池化技术),然后需要线程的时候不是创建一个线程,而是从线程池里面获取一个可用的线程,然后执行我们的任务.线程池的关键在于它为我们管理了多 ...

  3. Android Studio安装应用时报错 installation failed with message Failed to finalize session......

    解决方法: 在AndroidManifest.xml中的provider中的authorities后加几个数字即可. 2017.09.01: 我发现有的项目AndroidManifest.xml中没有 ...

  4. How many Knight Placing? UVA - 11091

    How many Knight Placing? Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld & %l ...

  5. centos7基础学习第一天

    Linux是一个操作系统: 智能手机,Android和ios.Windows: 网站.游戏.QQ.微信等都是运行在Linux系统之上的应用:客户端.服务器端交互的: Linux的起源: Linux之前 ...

  6. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  7. zookeeper curator使用caches实现各种监听

    1.篇首语 curator是zookeeper的一个高级api开发包.封装了zookeeper众多的recipes,并且实现了一些新的recipes原语,最重要的是基于zookeeper提供的各种机制 ...

  8. jquery事件使用方法总结

    jquery提供了许多的事件处理函数,学习前端一段时间了,下面对其总结一下,梳理一下知识点. 一.鼠标事件 1. click():鼠标单击事件 $div = $("div") $d ...

  9. 彻底了解构建 JSON 字符串的三种方式

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7701856.html 前言:JSON 是轻量级的数据交换格式,很常用,尤其是在使用 Ajax ...

  10. 【转】缓存淘汰算法系列之1——LRU类

    原文地址:http://www.360doc.com/content/13/0805/15/13247663_304901967.shtml 参考地址(一系列关于缓存的,后面几篇也都在这里有):htt ...