使用window.performance进行浏览器性能测试

  性能测试，相信其重要性是不言而喻的，以往前端的性能测试是非常不方便的，非常幸运的是现在有了一个新的api:window.performance，并且现在很多浏览器都支持了这个借口，这极大的降低了前端性能测试的难度。

一、理解浏览器的加载顺序

        从上图就可以知道浏览器加载顺序是如何的了，然后window.perference.timing就是提供了很多属性读取浏览器加载顺序上各个点的时刻(非时间，用专业的物理概念)，利用各个时刻的差值就可以得到我们想要的各加载段的时间。

        不过，在chrome下，这里有一个坑，按照W3C的标准，navigationStart应该是整个过程的开始，也就是时间点应该最早。但是chrome下很多时候不是这样，会有domainLookupStart时间早于navigationStart的情况，初步认为应该是chrome的各种优化机制和预渲染功能打乱了上图的顺序。IE9相对守规矩一点。

        window.perference.timing下的公开属性有：navigationStar、unloadEventStart、unloadEventEnd、redirectStart、redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、connectEnd、secureConnectionStart、secureConnectionStart、responseStart、responseEnd、domLoading、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart、loadEventEnd。与浏览器的加载顺序对于的点请对照上图。

二、浏览器的支持情况

        IE：IE9以上支持，接口为window.msPerformance；
        Chrome:chrome6以上支持，chrome6-9为window.webkitPerformance，chrome10中是window.performance；
        Firfox：firfox7.0以上支持，接口为：window.msPerformance；
        Safari:支持，接口为window.performance；
        移动端：支持，接口为window.webkitPerformance。

三、timing.js

       timing.js是github上一个对window.perfermence很好封装的一个开源js文件。
       github地址：https://github.com/addyosmani/timing.js