css:使用硬件加速以及注意项

最近有点想换工作了。所以在看一些基础题，发现自己的基础还是不够沉淀，所以要多复习一些东西，才能更好的学习下

之前逛博客的时候看到过一篇关于css的硬件加速的，百度了下，

硬件加速是指在计算机中通过把计算量非常大的工作分配给专门的硬件来处理以减轻中央处理器的工作量之技术。尤其是在图像处理中这个技术经常被使用。

简单来说，就像是我们看电影的时候，如果电脑卡的话，单单使用cpu的话，是很卡的，而这个时候，如果使用下gpu就可以分担下cpu的工作量，这个时候就不会那么卡了。这就是硬件加速，而google chrome的话也是提供了硬件加速的，这个时候，我们就要用代码去触发他

简单来说，当我们使用transform或者是animate的时候。我们就会触发被动：使用gpu来渲染，这个时候问题来了！我根本就不用去使用到animate，transform等效果，这个时候，我们可以玩个小手段：

即使我们没有动画3D空间中的元素，我们也可以启用3D渲染。至少，该transform: translateZ(0);声明触发了现代桌面和移动浏览器中的GPU加速。这似乎是触发GPU加速的最有效方式（包括所有供应商前缀）：

其次，作者在博客中也跟我们描述到了可能遇到的问题：

.cube {
   -webkit-backface-visibility：hidden;
   -moz-backface-visibility：hidden;
   -ms-backface-visibility：hidden;
   背面 - 可见性：隐藏;

   -webkit-perspective：1000;
   -moz-perspective：1000;
   -ms-perspective：1000;
   观点：1000;
   / *其他变换属性在这里* /
}

但是我想说一声，就是要考虑自己的程序是否真的是需要用到gpu来渲染，接下来说些题外话：

首先，（个人）想说的是这个观点之前在webkit的时候似乎看到过这一点，但是之前没重视，因为现在的手机，pc等都不会太差，而且使用gpu还有个问题就是性能是以燃烧生命做为代价的，就像是蒙多放技能一样，是用生命值的

第一：什么是webkit的符复合层：（下面的话为了更贴合下本文主题，请不要较真，不然会有太多的扩展）

先上个小图：

内容不是关键，关键的是中间的这些线，一些朋友，或则只会用chrome看看dom，打打断点的小朋友，可能不太清楚啥是rending，啥是Show composited layer borders，当然，我不解释的（自己百度吧），毕竟解释起来太费时间了，这个也是属于浏览器的范围，直接跳过，当我们使用的硬件加速的时候，我们会把需要渲染的元素放到特定的『Composited Layer』，也就是下类似下图中的黄色区域，比如：layui官网

这个有动效果的logo，有动画效果的title。不就是一个3d么。不就是一个硬件加速么？而下面的那些则没有太多的变化，下面那些没有全部加入到硬件加速里，哈哈，再扯个题外话，注意右下角那个小图标，他也是黄色的，为什么？（自己百度，友情提示，百度下为什么fixe是最耗性能的）

接着，我们可以发现，用了3d的，也就是页面中黄色的，就是用gpu的，而以上两个列举的，都没有太大的问题，都算是很好的了，因为他们（可能）知道一点：使用zindex来干扰复合层，还有下面这些条件，都会将其放在层里面：

• 3D 或透视变换(perspective transform) CSS 属性
• 使用加速视频解码的 元素
• 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
• 混合插件(如 Flash)
• 对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
• 拥有加速 CSS 过滤器的元素
• 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

例子的话就是澳门赌场的网站了，还有一些小说网站，大家可能都有一种感觉：明明网站就只有一个视频，还有左右两侧的那些澳门赌场广告，还有上下的澳门赌场广告，最多也就一百张的几个k小图片，为啥会这么卡呢？其实就是这个原因了。所以我们在写代码的时候。一定要注意好自己的层次，也要注意好了别乱上那些网站，不然到时候可能电脑就提前报销了

备注：上面废话了那么多，无非就是希望大家注意两点：

1.硬件加速不要随便乱用！

2.注意上面说到的触发条件（不要老是看澳门赌场）

 

参考资料：Increase Your Site’s Performance with Hardware-Accelerated CSS

                  百度百科

                   layui官网

                  《WebKit技术内幕》