IE9允许前端开发获取到页面性能数据 | 影の域

影の域

关注web前端,追逐html5脚步,体会code人生

IE9允许前端开发获取到页面性能数据

| 3,272 点击

长期以来,为了改善站点的用户体验,我们一直都是在页面顶端加上一个 (new Date()).getTime() 来获取用户打开页面的时间,使用httpwatch来分析页面打开的解释时间。httpwatch虽然强大,但是还是无法让我们深入到用户的环境去了解用户打开页面前的一些情况,例如:DNS解释时间,请求和响应时间,以及更加深入的页面渲染时间等重要信息。这些信息对用户环境分析是至关重要的。

如今,这个情况即将改变,微软的IE9将给前端开发们提供有力的性能分析接口让我们能够深入分析页面的性能,这就是强大的msPerformance接口。这个接口其实是基于HTML5草案Web Timing的定义来开发的(有意思的是这个接口是google提供的,chrome目前还没支持,IE9先行了)。

我们来看看通过Web Timing我们可以获取到什么数据

 

window.msPerformance.navigation

{

requestCount : 76

type : 0

startTime : 1277821481923

redirectedCount : 5

uniqueDomains : 31

}

 

 

window.msPerformance.timingMeasures

{

request : 22

domContentLoaded : 342

response : 10

firstPaint : 29

domInteractive : 342

msStyleContentLoaded : 342

fetch : 459

domComplete : 342

load : 89

connect : 3

}

 

 

window.msPerformance.timing

{

domLoading : 1277821481950

responseEnd : 1277821481960

navigationStart : 1277821481923

fetchStart : 1277821481923

msStyleContentLoaded : 1277821482293

firstPaint : 1277821481952

fullyLoaded : 0

requestStart : 1277821481927

loadEnd : 1277821482383

unloadStart : 1277821481923

}

 

通过这些数据我们可以更加深入得分析页面的性能和用户的网络环境,提供更加好的差异化服务。

到这里下载IE9预览版

 

发现IE9pre3的console列出的接口不全,直接用调试器把这个接口和方法全部列出来了,更加直观