大多数人都知道有动画的地方可以使用GPU来加速页面渲染。

例如,做优化的时候,将使用lefttop属性的动画修改成使用transform属性的CSS动画。或者听到别人教你使用transform:translateZ(0)给有动画的部分额外开启GPU加速。

目前下面这些因素都会引起chrome创建层:

  1. 3D 或透视变换(perspective,transform) CSS 属性
  2. 使用加速视频解码的 <video> 元素
  3. 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素
  4. 混合插件(如 Flash)
  5. 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
  6. 拥有加速 CSS 过滤器的元素
  7. 元素有一个 z-index 比自己小的兄弟节点,且该节点是一个合成层
上面6点都非常容易理解,在日常开发中,最容易出现问题的是第7点
 
隐式合成——元素有一个 z-index 比自己小的兄弟节点,且该节点是一个合成层,则该元素会创建层。

拿实际项目举个栗子,我们按照上面的步骤开启layer borders

尚未给上图右手添加高层级的z-index时,整个页面在移动端打开后闪退。而添加了z-index之后,页面正常显示,不闪退了。
仔细看上面的gif,仅仅改变了z-index,就会改变大批数量的层(黄色边框)

为什么z-index力量这么大?

我们来看一个栗子,B在做动画,理所当然把B提到单独的合成层(给B增加属性 transform:translateZ(0))。减少重绘。 

按照上图,我们遇到一个逻辑问题,元素B应该在单独的合成层上,并且屏幕的最终图像应该在GPU上组成。但是A元素在B元素的顶部,我们没有指定提升A元素自身层级的东西。那么浏览器会做什么?

它将强制为元素A创建一个新的合成图层。

这样,A和B都被提升到单独的复合层。 因此,使用GPU加速提升动画性能时,最好给元素增加一个高一点的z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能。

找到layers,点击当前层,在右边查看占用的memory(内存)

注意:别盲目创建渲染层,一定要分析其实际性能表现。因为创建渲染层是有代价的,每创建一个新的渲染层,就意味着新的内存分配和更复杂的层的管理。并且在移动端 GPU 和 CPU 的带宽有限制,创建的渲染层过多时,合成也会消耗跟多的时间。

总结:

使用GPU提升动画性能时,尤其是用了轮播、动画loading的页面,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能。

GPU加速有坑?的更多相关文章

  1. Theano在windows下的安装及GPU加速

    安装环境:wondows 64bit Teano安装测试 1. Anaconda 安装 Anaconda是一个科学计算环境,自带的包管理器conda很强大.之所以选择它是因为它内置了python,以及 ...

  2. GPU 加速NLP任务(Theano+CUDA)

    之前学习了CNN的相关知识,提到Yoon Kim(2014)的论文,利用CNN进行文本分类,虽然该CNN网络结构简单效果可观,但论文没有给出具体训练时间,这便值得进一步探讨. Yoon Kim代码:h ...

  3. 开启gpu加速的高性能移动端相框组件!

    通过设置新的css3新属性translateX来代替传统的绝对定位改变left值的动画原理,新属性translateX会开启浏览器自带的gpu硬件加速动画性能,提高流畅度从而提高用户体验, 代码有很详 ...

  4. ubuntu 15 安装cuda,开启GPU加速

    1 首先要开启GPU加速就要安装cuda.安装cuda,首先要安装英伟达的驱动.ubuntu有自带的开源驱动,首先要禁用nouveau.这儿要注意,虚拟机不能安装ubuntu驱动.VMWare下显卡只 ...

  5. Silverlight - GPU加速

    1. 在Silverlight plug-in上设置 <param name="enableGPUAcceleration" value="true" / ...

  6. 用cudamat做矩阵运算的GPU加速

    1. cudamat简介 cudamat是一个python语言下,利用NVIDIA的cuda sdk 进行矩阵运算加速的库.对于不熟悉cuda编程的程序员来说,这是一个非常方便的GPU加速方案.很多工 ...

  7. 深度学习“引擎”之争:GPU加速还是专属神经网络芯片?

    深度学习“引擎”之争:GPU加速还是专属神经网络芯片? 深度学习(Deep Learning)在这两年风靡全球,大数据和高性能计算平台的推动作用功不可没,可谓深度学习的“燃料”和“引擎”,GPU则是引 ...

  8. Keras学习环境配置-GPU加速版(Ubuntu 16.04 + CUDA8.0 + cuDNN6.0 + Tensorflow)

    本文是个人对Keras深度学习框架配置的总结,不周之处请指出,谢谢! 1. 首先,我们需要安装Ubuntu操作系统(Windows下也行),这里使用Ubuntu16.04版本: 2. 安装好Ubunt ...

  9. supervessel-免费云镜像︱GPU加速的Caffe深度学习开发环境

    开发环境介绍 在SuperVessel云上,我们为大家免费提供当前火热的caffe深度学习开发环境.SuperVessel的Caffe有如下优点: 1) 免去了繁琐的Caffe环境的安装配置,即申请即 ...

随机推荐

  1. java从入门到卖肠粉系列

    java从入门到卖肠粉系列 注:本教程只是从JAVA基础开始,绝对不会跟公司有任何利益冲突,更不会出现一行公司项目的代码 QQ群:9547527 推荐用土豆,百度去上传太慢,百度云在线播放还要转码.. ...

  2. 《HelloGitHub月刊》第11期

    <HelloGitHub>第11期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高质量 ...

  3. angular destroy & jquery destroy

    destroy的目的是为了内存溢漏,这对性能会造成影响. angular scope在处理element 移除时,会触发destroy, 而调用逻辑和jquery使用的一样. 在ck editor 中 ...

  4. 手把手教你webpack、react和node.js环境配置(下篇)

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

  5. Effective c++ Item 28 不要返回对象内部数据(internals)的句柄(handles)

    假设你正在操作一个Rectangle类.每个矩形可以通过左上角的点和右下角的点来表示.为了保证一个Rectangle对象尽可能小,你可能决定不把定义矩形范围的点存储在Rectangle类中,而是把它放 ...

  6. jquery考试纠错笔记.

    1. 获取元素范围大小顺序依次为: $(#one).siblings("div")>$("#one~div")>$("#one +div& ...

  7. Servlet+Tomcat日志输出

    刚接触Servlet的时候,为了学习方便总是想验证自己的想法,那么输出日志是最常见的手法了,就自己亲身经历总结了如下几种方法,我用的是Web容器是Tomcat. 使用Log4J 在<Servle ...

  8. bat文件的一些小技巧

    bat文件的简介: bat文件是dos下的批处理文件.批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命令提示下键入批处理文件的名称,或者双击该批处理文 ...

  9. Solr vs. Elasticsearch谁是开源搜索引擎王者

    当前是云计算和数据快速增长的时代,今天的应用程序正以PB级和ZB级的速度生产数据,但人们依然在不停的追求更高更快的性能需求.随着数据的堆积,如何快速有效的搜索这些数据,成为对后端服务的挑战.本文,我们 ...

  10. JAVA I/O 字符输出流简要概括

    偷个懒,直接参考上篇字符输入流Reader的形式,其实Reader和Writer本来就大同小异: 字符输出流Writer 本篇将对JAVA I/O流中的字符输出流Writer做个简单的概括: 总得来说 ...