引入

面试中可能会经常会碰到怎么解决动画卡顿的问题，然后会引导到硬件加速。那么究竟什么是硬件加速，为什么它可以提高咱们的动画效率？我们今天就来一探究竟。

首先，我们先从 CPU 和 GPU 开始了解。

CPU 和 GPU 的区别

CPU 即中央处理器，GPU 即图形处理器。

CPU是计算机的大脑，它提供了一套指令集，我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码，然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段，叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五步，这是一个指令周期。CPU会不断的执行指令周期来完成各种任务。

GPU，是Graphics ProcessingUnit的简写，是现代显卡中非常重要的一个部分，其地位与CPU在主板上的地位一致，主要负责的任务是加速图形处理速度。GPU是显卡的“大脑”，它决定了该显卡的档次和大部分性能，同时也是2D显示卡和3D显示卡的区别依据。2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力，称为“软加速”。3D显示芯片是将三维图像和特效处理功能集中在显示芯片内，也即所谓的“硬件加速”功能。

每一帧的执行步骤

一般浏览器的刷新率为60HZ，即1秒钟刷新60次。

1000ms / 60hz = 16.6 ，也就是大概每过 16.6ms 浏览器就会渲染一帧画面。

浏览器对每一帧画面的渲染工作都要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。

简单概括下，浏览器在每一帧里会依次执行以下这些动作：

JavaScript：JavaScript 实现动画效果，DOM 元素操作等。
Style（计算样式）：确定每个 DOM 元素应该应用什么 CSS 规则。
Layout（布局）：计算每个 DOM 元素在最终屏幕上显示的大小和位置。由于 web 页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫 reflow。
Paint（绘制）：在多个层上绘制 DOM 元素的的文字、颜色、图像、边框和阴影等。
Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

减少或者避免 layout，paint 可以让页面减少卡顿，动画效果更加流畅。

完整的渲染流程

更具体一些，一个完整的渲染步骤大致可总结为如下：

渲染进程将HTML内容转换为能够读懂的DOM树结构。
渲染引擎将CSS样式表转化为浏览器可以理解的 styleSheets ，计算出DOM节点的样式。
创建布局树，并计算元素的布局信息。
对布局树进行分层，并生成分层树。
为每个图层生成绘制列表，并将其提交到合成线程。
合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
合成线程发送绘制图块命令DrawQuad给浏览器进程。
浏览器进程根据DrawQuad消息生成页面，并显示到显示器上

普通图层和复合图层

上面的介绍中，提到了 composite 概念。

可以简单的这样理解，浏览器渲染的图层一般包含两大类：渲染图层（普通图层）以及复合图层

渲染图层：又称默认复合层，是页面普通的文档流。我们虽然可以通过绝对定位，相对定位，浮动定位脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。
复合图层，它会单独分配资源（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流重绘）
某些特殊的渲染层会被提升为复合成层（Compositing Layers），复合图层拥有单独的 GraphicsLayer，而其他不是复合图层的渲染层，则和其第一个拥有 GraphicsLayer 父层共用一个。

每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上，此时，我们的页面也就展现到了屏幕上。

可以 Chrome源码调试 -> More Tools -> Rendering -> Layer borders中看到，黄色的就是复合图层信息。

硬件加速

硬件加速，直观上说就是依赖 GPU 实现图形绘制加速，软硬件加速的区别主要是图形的绘制究竟是 GPU 来处理还是 CPU，如果是 GPU，就认为是硬件加速绘制，反之，则为软件绘制。

一般一个元素开启硬件加速后会变成复合图层，可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。

常用的硬件加速方法有：

最常用的方式：translate3d、translateZ
opacity 属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
will-change属性（这个知识点比较冷僻），一般配合 opacity 与 translate 使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层），作用是提前告诉浏览器要变化，这样浏览器会开始做一些优化工作（这个最好用完后就释放）
<video>、<iframe>、<canvas>、<webgl>等元素
其它，譬如以前的 flash 插件
当然，有的时候我们想强制触发硬件渲染，就可以通过上面的属性，比如

will-change: transform;
或者
transform:translate3d(0, 0, 0);

使用硬件加速的注意事项

使用硬件加速并不是十全十美的事情，比如：

内存。如果GPU加载了大量的纹理，那么很容易就会发生内容问题，这一点在移动端浏览器上尤为明显，所以，一定要牢记不要让页面的每个元素都使用硬件加速。
使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制。即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊。
所以不要大量使用复合图层，否则由于资源消耗过度，页面可能会变的更加卡顿。

同时，在使用硬件加速时，尽可能的使用z-index设置大点，防止浏览器默认给后续的元素创建复合层渲染。

具体的原理是这样的：

webkit CSS3中，如果一个元素添加了硬件加速，并且z-index层级比较低，那么在这个元素的后面其它元素（层级比这个元素高的，或者相同的，并且releative或absolute属性相同的），会默认变为复合层渲染，如果处理不当会极大的影响性能。

简单点理解，其实可以认为是一个隐式合成的概念：如果a是一个复合图层，而且b在a上面，那么b也会被隐式转为一个复合图层，这点需要特别注意。

GPU硬件加速的原理相关推荐

GPU硬件加速的那些优秀的资源总结－续
renderlayerbacking如下: 注:renderlayerbacking负责管理renderlayer所需要的所有的后端存储,因为后端存储可能需要多个存储空间,在webkit中,存储空间使 ...
【读书笔记】【WebKit技术内幕（三）】GPU硬件加速渲染、canvas与WebGL、 JavaScript与JavaScript 引擎、JavaScriptCore与V8
文章目录前言 Something great 第8章硬件加速机制硬件加速基础 -- *** Chromium的硬件加速机制 -- *** 其他硬件加速模块第9章 JavaScript引擎 Ja ...
Android 如何使用GPU硬件加速
转自:http://blog.csdn.net/myarrow/article/details/7164638 1.名词解释 GPU:Graphic Processing Unit (图形处理器) O ...
[IE9] GPU硬件加速到底是实用创新还是噱头
IE9 的一个重大改进就是使用了GPU硬件加速来渲染网页. 那么GPU硬件加速到底能够带来多大的性能提升? 你可以在IE的测试案例网站(http://ie.microsoft.com/testdriv ...
[css] 说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？
[css] 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速? GPU: 图形处理器,用于处理图形有关的任务,用于渲染页面在css中使用 transform: translateZ(0),可 ...
matlab win10 gpu加速,win10的Edge浏览器设置GPU硬件加速，大幅度提升浏览器性能
不知道大家对于GPU硬件加速是否有了解,这是现在的浏览器必备的功能,开启后能大幅度提升浏览器的性能,给我们更加顺滑的浏览体验.GPU硬件加速能够利用GPU的图形性能,加速渲染网页中的图像信息. 如果我 ...
css怎么使用gpu加速,用CSS3开启GPU硬件加速来提升网站的动画渲染性能
CSS3为咱们开发动画效果大大提升了效率,但有些动画效果,如果涉及的DOM元素比较多,会发现有"卡卡"的感觉,为动画DOM元素添加CSS3样式 -webkit-transform: ...
安卓禁用硬件加速_开/关大不同 Android4.0 GPU硬件加速实测
你也许会觉得Android4.0的升级之处不够多,无法让你有足够动力升级,但很多东西是隐藏在其中等待发掘的.倘若你此前对于Android系统的流畅度(好吧,尤其是应用程序的流畅度)不满,一定不要错过这 ...
[Linux RK Debian 10] chrome浏览器开启GPU硬件加速｜CSDN创作打卡
platform:RK OS:Linux Kernel: 4.4.143 filesystem:debian10 文章目录简易查看GPU硬件加速开启GPU硬件加速 (1) 启动桌面的浏览器加速配置 ...
matlab win10 gpu加速,win10怎么开启gpu加速有用吗 GPU硬件加速设置方法介绍
win10怎么开启gpu加速有用吗 GPU硬件加速设置方法介绍作为Windows 10的一项重要功能,微软在分享了GPU硬件加速细节后,现在还为大家送上了开启它的技巧,对于中低端设备来说,提升效果还 ...

GPU硬件加速的原理

引入