标签：
使用Navigation Timing API:
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 有两个属性：
以下列举了 type 属性的三种取值情况：
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中前景和背景层需要的一个后端存储）树，合成器中的层（如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）属性，并且他的后代中包含了一个合成层
（7）renderlayer有一个z坐标比自己小的兄弟节点，并且该节点是一个合成层。
那么为什么要使用合成层？
首先当然是合并一些renderlayer层，可以减少内存的使用量；其二是在合并之后，尽量减少合并带来的重绘性能和处理上的困难；其三，对于那些使用单独层能够显著提升性能的renderlayer对象可以继续使用这个好处。如webgl技术的canvas元素。下面是renderlayer，renderlayerbacking,graphiclayer的对应关系：
GPU硬件加速的那些优秀的资源总结
标签：
原文地址：http://blog.csdn.net/liangklfang/article/details/51611991
