来自：http://segmentfault.com/a/1190000004010453

页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式javascript代码方式来检测DOM事件发生和结束的时间，再到使用第三方工具如WebPagetest、Pingdom等通过在不同的浏览器环境和地域进行测试来寻求优化建议等等，这些方式不仅麻烦，而且测量的指标比较单一。如果有一些可以帮我们直接获取页面性能信息的API出现，并且成为标准被被浏览器厂商支持，那性能监控会不会又是另一幅蓝图？

好在W3C Web性能工作小组与各浏览器厂商都已认识到性能对于web开发的重要性，为了解决当前性能测试的困难，W3C推出了一套性能API标准，各种浏览器对这 套标准的支持如今也逐渐成熟起来。这套API的目的是简化开发者对网站性能进行精确分析与控制的过程，方便开发者采取手段提高web性能。

整套标准包含了10余种API，各自针对性能检测的某个方面。在下图中可以看到它们当前在规范流程中的进展：

下面是API及描述其功能的列表：

浏览器支持

下表列举了当前主流浏览器对性能API的支持，其中标注星号的内容并非来自于Web性能工作小组。

其中有两个可以帮助我们检测真实用户环境下的页面加载Timing和页面资源加载Timing:Navigation Timing和Resource Timing。这两个API非常有用，可以帮助我们获取页面的Domready时间、onload时间、白屏时间等，以及单个页面资源在从发送请求到获取到rsponse各阶段的性能参数。

使用这两个API时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。

Navigation Timing

Navigation Timing API能够帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的整体页面加载时间。用法如下：

var timinhObj = performance.timing;

performance.timing返回的是一个PerformanceTiming对象，如下图：

如果要获得 page load time(页面加载时间)，可以用PerformanceTiming对象中loadEventStart的值减去navigationStart的值：

plt = page.loadEventStart - page.navigationStart;

需要注意的是，PerformanceTiming对象中各属性值的单位均为毫秒数。

PerformanceTiming对象包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时，它包含的页面性能属性如下表：

一般来说，我们需要获取到的页面性能参数包括：DNS查询耗时、TCP链接耗时、request请求耗时、解析dom树耗时、白屏时间、domready时间、onload时间等，而这些参数是通过上面的performance.timing各个属性的差值组成的，计算方法如下：

DNS查询耗时 ：domainLookupEnd - domainLookupStart  TCP链接耗时 ：connectEnd - connectStart  request请求耗时 ：responseEnd - responseStart  解析dom树耗时 ： domComplete - domInteractive  白屏时间 ：responseStart - navigationStart  domready时间 ：domContentLoadedEventEnd - navigationStart  onload时间 ：loadEventEnd - navigationStart

Navigation Timing的目的是用于分析页面整体性能指标。如果要获取个别资源（例如JS、图片）的性能指标，就需要使用Resource Timing API。

Resource Timing

浏览器获取网页时，会对网页中每一个静态资源（脚本文件、样式表、图片文件等等）发出一个HTTP请求。Resource Timing可以获取到单个静态资源从开始发出请求到获取响应之间各个阶段的Timing。用法如下:

var resourcesObj = performance.getEntries();

Resource Timing返回的是一个对象数组，数组的每一个项都是一个对象，这个对象中包含了当前静态资源的加载Timing，如下图：

我们可以根据数组的长度获取到页面中静态资源的数量，然后通过数组的每一项分析单个静态资源的请求状态。

performance中还有一些性能API尚未成为W3C标准（如第一张图中的工作进度），有的处于编辑草案阶段，有 的处于工作草案阶段，当这些API逐渐成为推荐标准以后，一定会对我们进行前端性能监控带来很大的便利，我们也可以通过这些API很方便地直接从页面中获 取到我们希望得到的性能信息。

相关资源

performance API

window.performance 详解

使用简洁的 Navigation Timing API 测试网页加载速度（不完全译文）