使用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

你可能感兴趣的:(java,web)