开发者需要关注的IE 9 Beta四大新特性：全面拥抱Web标准

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

        长期以来，为了改善站点的用户体验，我们一直都是在页面顶端加上一个 (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列出的接口不全，直接用调试器把这个接口和方法全部列出来了，更加直观

深入分析IE9的图片性能测试实例

 微软发布了IE9的技术预览版，也放出了不少测试的实例，整体来看给大家带来一支镇定剂。不过舜子这里对其中一个演示案例很感兴趣。

 

我们先来看看这个实例：点击打开

 

最让我好奇的是chrome在这个实例中几乎是所有浏览器中最慢的，令人大跌眼镜。

 

深入分析了这个实例的实现，里面包含其实两部分功能会影响性能，动画的JS算法和图片的渲染。

测试单纯的动画的算法，把所有图片都block掉。测试得出的结果是，chrome处理256张图片，平均44FPS。而其他浏览器IE7(应为没装IE9,暂时用IE7测试一下)，firefox3.6，opera 10.50平均20~22 左右。这说明chrome在纯算法上都是非常有优势的。

 

这里动画的JS算法并不是最主要的问题了，最大的问题看来是来自对图片的渲染上。仔细看了每一张图片，每张图片都是以一个540×540包括alpha透明的浏览器logo。 看来chrome在渲染大尺寸PNG的时候吃了很大的亏。期待下一个版本的chrome能修复对PNG处理的问题，毕竟这个也是主流的图片格式。

 

 

（微软故意挑战chrome的PNG图片）

这里舜子还没有针对IE9进行完整的测试。不过在同事的电脑上测试这个实例时，无疑IE9在渲染上是目前所有浏览器中最快的。而且还有D2D对图片渲染图片在放大和缩小都有抗锯齿表现。

 

我把这个测试实例down了下来，有兴趣的朋友可以自己测试一下

 点击下载此文件