关于硬件加速哪些优秀的资源总结

div{ background-color: #ccc; width:400px; height:400px; position: absolute; left:100px; top:100px; transition:width 5s linear; overflow: hidden; } .hv{ width:100px; }

div{ background-color: #ccc; width:400px; height:400px; opacity: 0.8; transition:opacity 5s linear; /*有opacity的变化也会产生一个独立的层，这里的transition可以是all也可以是opacity*/ } .hv{ opacity: 0; }

.container{ background-color: #ccc; height:100px; width:100px; transform:scale(0.5); transition:transform 5s linear; /* 这里的scale动画也会产生一个单独的图层，因此不会产生重绘回流等*/ } .hv{ transform:scale(1); }

.running { animation: run-around 4s infinite; } @keyframes run-around { 0%{ transform: translate(0, 0); } 25% { transform: translate(200px, 0); } 50% { transform: translate(200px, 200px); } 75% { transform: translate(0, 200px); } }

div { min-height: 380px; margin-bottom: 20px; background-image: url('./woman.jpg'); background-size: cover; background-repeat: no-repeat; filter: blur(60px) saturate(120%) brightness(140%); -webkit-tap-highlight-color: rgba(0,0,0,0);/*这个仅仅使用filter是不会产生一个独立的层的，除非结合translate3d等*/ }

<!doctype html> <html> <head> <title></title> <style type="text/css"> video,div,canvas{ -webkit-transform:rotateY(30deg) rotateX(-45deg); } </style> </head> <body> <video src='vidwo.mp4'></video> <div> <canvas id='a2d'></canvas> <canvas id='a3d'></canvas> </div> <script type="text/javascript"> var size=300; var a2dCtx=document.getElementById('a2d').getContext('2d'); a2dCtx.canvas.width=size; a2dCtx.canvas.height=size; a2dCtx.fillStyle='rgba(0,192,192,80)'; a2dCtx.fillRect(0,0,200,200); var a3dCtx=document.getElementById('a3d').getContext('experimental-wbgl'); a3dCtx.canvas.width=size; a3dCtx.canvas.height=size; a3dCtx.clearColor(0.0,192.0/255.0,80.0/255.0); a3dCtx.clear(a3dCtx.COLOR_BUFFER_BIT); </script> </body> </html>

<!doctype html> <html> <head> <style> div { animation-duration: 5s; animation-name: slide; animation-iteration-count: infinite; animation-direction: alternate; width: 200px; height: 200px; margin: 100px; background-color: gray; } @keyframes slide { from { transform: rotate(0deg); } to { transform: rotate(120deg); } } </style> </head> <body> <div>I am a strange root.</div> </body> </html>

navigationStart：

当load/unload动作被触发时，也可能是提示关闭当前文档时（即回车键在url地址栏中按下，页面被再次刷新，submit按钮被点击）。如果当前窗口中没有前一个文档，

那么navigationStart的值就是fetchStart。

redirectStart：

它可能是页面重定向时的开始时间（如果存在重定向的话）或者是0。

unloadEventStart：

如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。否则的话（前一个文档非同源或者没有前一个文档）

，为0。

unloadEventEnd：

表示同源的前一个文档卸载完成的时刻。如果前一个文档不存在或者非同源，则为0。

redirectEnd：

如果存在重定向的话，redirectEnd表示最后一次重定向后服务器端response的数据被接收完毕的时间。否则的话就是0。

fetchStart：

fetchStart是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存。

domainLookupStart：

这个属性是指当浏览器开始检查当前域名的DNS之前的那一时刻。如果因为任何原因没有去检查DNS（即浏览器使用了缓存，持久连接，或者本地资源），

那么它的值等同于fetchStart。

domainLookupEnd：

指浏览器完成DNS检查时的时间。如果DNS没有被检查，那么它的值等同于fetchStart。

connectStart：

当浏览器开始于服务器连接时的时间。如果资源取自缓存（或者服务器由于其他任何原因没有建立连接，例如持久连接），那么它的值等同于domainLookupEnd。

connectEnd：

当浏览器端完成与服务器端建立连接的时刻。如果没有建立连接它的值等同于domainLookupEnd。

secureConnectionStart：

可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。

responseStart：

指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻。

responseEnd：

指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻。

domLoading：

指document对象创建完成的时刻。

domInteractive：

指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。

domContentLoadedEventStart：

当DOMContentLoaded事件触发之前，浏览器完成所有script（包括设置了defer属性但未设置async属性的script）的下载和解析之后的时刻。

domContentLoadedEventEnd：

当DOMContentLoaded事件完成之后的时刻。它也是javascript类库中DOMready事件触发的时刻。

domComplete：

如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是

domComplete。

loadEventStart：

该属性返回的是load事件刚刚发生的时刻，如果load事件还没有发生，则返回0。

loadEventEnd：

该属性返回load事件完成之后的时刻。如果load事件未发生，则返回0。

检测用户通过哪种方式来到此页面：

我们有几种方式来打开一个页面，例如，在地址栏输入url，刷新当前页面，通过history的前进后退。这时候 performance.navigation 就派上用场了。这个 API 有

两个属性：

redirectCount：页面请求被重定向的次数
type：页面被载入的方式。

以下列举了 type 属性的三种取值情况：

0：用户通过点击链接或者在浏览器地址栏输入URL的方式进入页面。
1：页面重载。
2：通过浏览器history的前进或后退进入页面。

7.webkit渲染方式？

在构建完了dom树之后，webkit所要做的事情就是构建渲染的内部表达并使用图形库将这些模型绘制出来。网页的渲染方式有两种，第一种是软件渲染，
第二种是硬件加速渲染。每一个层对应于网页中的一个或者一些可视元素，这些元素绘制内容到这个层中。如果绘图操作使用CPU来完成就叫做软件绘图，
如果绘图操作使用gpu来完成，那么就叫做gpu硬件加速绘图。理想情况下每一个层都有一个绘制的存储区域，这个存储区域用于保存绘图的结果。
最后需要把这些层的内容合并到同一个图像之中，叫做合成（compositing）。使用了合成技术的渲染称之为合成化渲染。
在renderobject树和renderlayer树之后，webkit的内部操作将内部模型转化为可视结果分为两个阶段：每层的内容进行绘图工作以及之后将这些绘图的结果合并为一个图像。

如果对于软件渲染，那么需要使用CPU来绘制每一层的内容，但是他是没有合成阶段的，因为在软件渲染中，渲染的结果就是一个位图，绘制每一层的时候都使用这个位图，
区别在于绘制的位置可能不一样，当然每一层都是按照从后到前的顺序。当然你也可以为每一层分配一个位图，但是一个位图已经可以解决所有的问题了。

下面是网页的三种渲染方式：

软件渲染中网页使用的一个位图，实际上是一块CPU使用内存。第二种和第三种方式都是使用了合成化的渲染技术，也就是使用gpu硬件加速来合成这些网页，合成的技术

都是使用gpu来做的，所以叫做硬件加速。但是，对于每一个层这两种方式有不同的选择。如第二种方式，某些层使用gpu而某些层使用CPU，对于CPU绘制的层，该层

的结果首先当然保存在CPU内存中，之后被传输到gpu的内存中，这主要是为了后面的合成工作。第三种方式使用gpu来绘制所有的合成层。第二种和第三种方式都属于

硬件加速渲染方式。

那么上面三种绘图的区别：

首先，对于常见的2d绘图操作，使用gpu来绘图不一定比CPU绘图在性能上有优势，因为CPU的使用缓存机制有效减少了重复绘制的开销而且不需要gpu并行性。其次，

gpu的内存资源相对于CPU的内存资源来说比较紧张，而且网页的分层似的gpu的内存使用相对比较多。

软件渲染：浏览器最早的渲染机制，比较节省内存特别是宝贵的gpu内存，但是软件渲染只能处理2d方面的操作。简单的网页没有复杂绘图或者多媒体方面的需求，

软件渲染就适合处理这种类型的网页。但是如果遇到html5新技术那么软件渲染就无能为力，一是因为能力不足，如css3d，webGL;二是因为性能不好，如canvas2d和视频。

因此软件渲染被用的越来越少，特别是移动领域。软件渲染和硬件加速渲染另外一个很不同的地方在于对更新区域的处理，当网页有一个更小型区域的请求如动画时，软件

渲染只要计算极小的区域，而硬件渲染可能需要重绘其中的一层或者多层，然后再合成这些层，硬件渲染的代价可能大得多。

硬件加速的合成：每一个层的绘制和所有层的合成均使用gpu硬件来完成，这对需要使用3d绘图的操作来说特别合适。在这种方式下，在renderlayer树之后，

webkit和chromium还需要建立更多的内部表示，例如graphiclayer（renderlayer中前景和背景层需要的一个后端存储,因为只有 GraphicsLayer 是作为纹理(texture)上

传给 GPU 的）树，合成器中的层（如chromium的cclayer等），目的是支持硬件加速，这显然会消耗更多的内存资源。但是，一方面，硬件加速能够支持现在所有的回

html5定义的2d或者3d绘图标准；另外一方面，关于更新区域的讨论，如果需要更新某个层的一个区域，因为软件渲染没有为每一层提供后端存储，因而它需要将和这个区域

有重叠部分的所有的层次相关区域依次向后向前重新绘制一遍，而硬件加速渲染只是需要重新绘制更新发生的层次，因而在某些情况下，软件渲染的代价更大，当然，

这取决于网页的结构和渲染策略。

软件绘图的合成化渲染方式结合了前面两中方式的优点，这是因为很多网页可能既包含了基本的html5元素也包含html5新功能，使用CPU绘图方式来绘制某些层，

使用gpu绘图方式来绘制其他一些层。原因是前面所说的性能和内存综合考虑。

8.webkit软件渲染技术

很多情况下，也就是没有哪些硬件加速内容的时候（css3变形，变换，webgl，视频），webkit可以使用软件渲染来完成页面的绘制工作。软件渲染需要关注两个方面，

分别是renderlayer树和renderlayer树包含的renderobject树：

webkit如何遍历renderlayer树来绘制每一个层？

对于每一个renderobject对象，需要三个阶段绘制自己。第一阶段：绘制该层中的所有块的背景和边框第二阶段：绘制浮动内容第三阶段：前景也就是内容部分，

轮廓等部分。注意：内联元素的背景，边框，前景都是在第三阶段被绘制的，这是不同之处。注意：在最开始的时候，也就是webkit第一次绘制网页的时候，webkit绘制的

区域等同于可视区域的大小，而在这之后，webkit只是首先计算需要更新的区域，然后绘制同这些区域有交集的renderobject节点。这也就是说，如果更新区域跟某个

renderlayer节点有交集，webkit会继续查找renderlayer树中包含derenderobject子树中的特定的一个或者一些节点而不是绘制整个renderlayer对应的rendeobject子树。

webkit软件渲染结果的存储方式，在不同的平台上可能不一样，但是基本上都是CPU内存的一块区域，多数情况下是一个位图。至于这个位图如何处理，如何和之前绘

制的结果进行合并，如何显示出来，都和webkit的不同移植有关。

9.webkit硬件加速

对于gpu绘图而言，通常不像软件渲染那样知识计算其中更新的区域，一旦有更新请求，如果没有分层，引擎可能需要重绘所有的区域。因为计算更新部分对gpu来说可

能耗费更多的时间，当网页分层之后部分区域的更新可能只在网页的一层或者几层，而不需要把整个网页进行重绘。通过重新绘制网页的一层或者几层，将他们和其他

之前绘制完的层合并起来，既能使用gpu的能力，又能够减少重绘的开销。理想情况下，每一个renderlayer都有一个后端存储（renderlayerbacking对象），但是实

际上都是不一样的，主要原因在于实际中的硬件能力和资源有限，为了节省gpu内存资源，硬件加速机制在renderlayer树建立之后需要做三件事情来完成网页的渲染：

第一：webkit决定将哪些renderlayer对象组合在一起，形成一个有后端存储的新层，整个新层不久后用于之后的合成，这里称为合成层（compositing layer）。每一

个新层都有一个或者多个后端存储，这里的后端存储可能是gpu内存。对于一个renderlayer对象，如果它没有后端存储的新层，那么就使用其父亲所使用的合成层。

第二：将每个合成层包含的这些renderlayer内容绘制在合成层的后端存储中，这里的绘制可能是软件绘制也可能是硬件绘制

第三：由合成器将多个合成层合成起来，形成网页最终可视化结果，实际上就是一张图片。合成器是一个能够将多个合成层按照这些层的先后顺序，合成层的3d变形等

设置二合成一个图像结果的设施。如果一个renderlayer对象具有以下特征之一那么就是合成层：

（1）renderlayer具有css3d属性活着css透视效果

（2）renderlayer包含的renderobject节点表示的是使用硬件加速的视频解码技术的html5的video元素

（3）renderlayer包含的renderobject节点表示的是使用硬件加速的canvas2d元素或者webgl技术

（4）renderlayer使用了css透明效果的动画或者css变换的动画

（5）renderlayer使用了硬件加速的css filters技术

（6）renderlayer使用了剪裁（clip）或者反射（reflection）属性，并且他的后代中包含了一个合成层

(6.1）Layer has a descendant that is a compositing layer 。Composited descendant may need composited parent，为了在composited tree中正确的传播

transform,perserve-3d或者clipping information。如下面的例子：

body {
  text-align: center;
  padding: 30px;
}
.camera{
  -webkit-perspective:100;
  perspective:1000;
  background-color:#ccc;
  width:100px;
  height: 100px;
}
.space{
  -webkit-transform-style:preserve-3d;
  border:1px solid black;
  width:100%;
  height:80%;
}
/*box肯定会在一个独立的图层中进行渲染，space也会，camera也会，即使给我们*/
.box{
     animation:x-spin 5s infinite;
    -webkit-animation:x-spin 5s infinite; /* Safari 和 Chrome */
}
@keyframes x-spin{
	0% {
	    -webkit-transform: rotateX(0deg);
	}
	50% {
	    -webkit-transform: rotateX(180deg);
	}
	100% {
	    -webkit-transform: rotateX(360deg);
	}
}

DOM结构如下：

  <div class="camera">
    <div class='space'>
    	 <div class='box'>children</div>
    </div>
</div>

注意：此时camera,space,box都会生成独立的图层。而且因为camera使用了perspective产生了层叠上下文，所以其z-index级别相当于auto/0的级别。你可以运行一下

这个例子来体会一下。同时我要告诉你，如果使用了translateZ来产生复合图层，那么父元素不会放在一个独立的复合图层中。

（6.2）will-change:transform和will-change:opacity也会产生一个复合图层，如果设置为auto无效

（7）renderlayer有一个z坐标(其实就是堆叠上下文)比自己小的兄弟节点，并且该节点是一个合成层。（(in other words the layer overlaps a composited layer and

should be rendered on top of it)）

主要原因在于：浏览器不知道当前具有较大的z-index的兄弟节点是否和合成层具有重叠的部分，必须创建一个合成层用于维持次序。

我们来分析一下第7中情况，如下图：

这时候假如所有的元素都在一个renderLayerBacking对象中进行绘制。但是我们通过一定的方式为蓝色框创建一个合成层（可能产生堆叠上下文进而在z轴上具有较大的值），

于是成为下面这种情况

这时候我们的绿色部分已经在蓝色部分下面的，这显然不是我们需要的（不能因为给元素创建了一个合成层进而影响到元素在Z轴上的顺序），因此chrome会自动为应该

处于上层的元素创建一个合成层：

这就是我们说的第7中情况，这种情况是因为我们的图层和一个合成层存在重叠，因此也会被创建为一个合成层。我们再来看一个例子：

通过这个例子我们可以看到：首先我们的滚动条被绘制到一个单独的合成层中，因此他具有独立的后端存储，在变化的时候不需要进行重绘和回流操作；然后，我们看看

DOM结构

 <h1>Poster Circle</h1>
    <p>This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</p>
    <p>The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform
      that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing
      element around too.</p>
    <p>Note that you can still select the numbers on the ring; everything remains clickable.</p>
    <div id="stage">
      <div id="rotate">
        <div id="ring-1" class="ring"></div>
        <div id="ring-2" class="ring"></div>
        <div id="ring-3" class="ring"></div>
      </div>
    </div>

我们的ring-1,ring-2,ring-3都是在一个独立的合成层（上面的6.1说明了rotate,stage都会产生一个独立的图层，而且其堆叠上下文是auto/0级别），但是p元素没有在一个独立的

合成层当中。但是，问题来了，当我们给我们的p元素添加一个z-index:1;position:relative我们很明显的看到chrome会为我们的p元素也创建一个独立的合成层，但是如果

我把p元素的z-index设置为0，那么创建的图层又会消失。这就是我们上面说的第七种情况，也就是一个元素具有z-index比自己小（auto/0级别），同时还是合成层的元素,

那么chrome也会为当前元素创建合成层。最后，

我们再来看一下我们上面标红的情况，也就是z坐标的比较（建议先读这篇文章来了解堆叠上下文的概念）：

堆叠上下文：堆叠上下文会flatten元素的subtree,就是在这个子树之外的任何元素都不会再子树之间绘制。也就是说：DOM树中，我们可以把堆叠上下文作为一个原子

概念层(atomic conceptual layer)用于绘制。因此，堆叠上下文是一个用于定义绘制顺序的绝好概念（建议仔细阅读深入理解CSS中的层叠上下文和层叠顺序）

【堆叠上下文的绘制次序】：背景和边框，其次是负数z-index的节点，然后是正常文档流中的元素，接着是z-index为0和绝对定位的子元素，最后是正的z-index的元素。

这就是出现相互覆盖的原因。

【何时选择复合层】

（1）当renderLayer子树被缓存和重组过后能够提升性能的情况下是可以的。

(2) opacity，transform,filters,reflections：当drawing的时候非常容易被用于合成层,因为此时只是需要GPU处理，而不用重绘和回流

（3）scrolling,fixed-position:当合成一个subtree内容的时候如果可以极大的减少重绘的数量的时候可以

（4）content that is rendered separately:在GPU中合成能够减少反复读取像素，例如WebGl,硬件解码video

【图层挤压】

GraphicLayer非常消耗内存和资源，如果一个层和具有独立后端存储的层存在重叠的部分，那么这个层也会被创建一个独立的后端存储。我们把一些如具有3D转换的层叫做

‘直接的’合成层，为了防止当很多在顶部（注意是顶部）的同时具有独立后端存储的层的存在而导致的‘层爆炸’问题，Blink就会把那些和‘直接’合成层重叠的层挤压到一个唯一的

后端存储中，这就解决了层级爆炸问题。GPU Accelerated Compositing in Chrome，如果动画运行的时候创建了很多的层，这时候应该是动画所在的层级比较低，所以

可以把动

画的层级提升就可以了

【选择合成层的好处】

首先当然是合并一些renderlayer层，可以减少内存的使用量；其二是在合并之后，尽量减少合并带来的重绘性能和处理上的困难；其三，对于那些使用单独层能够显著提

升性能的renderlayer对象可以继续使用这个好处。如webgl技术的canvas元素。下面是renderlayer，renderlayerbacking,graphiclayer的对应关系：

请继续阅读 GPU硬件加速的那些优秀的资源总结－续