性能测试,相信其重要性是不言而喻的,以往前端的性能测试是非常不方便的,非常幸运的是现在有了一个新的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