Internet Explorer 9 RC 性能/Web 标准增强

Wayne Ye

4.00/5 (8投票s)

2011 年 2 月 18 日

CPOL

6分钟阅读

43312

Microsoft 于 2011 年 2 月 10 日发布了 Internet Explorer 9 RC 版，我总结了其最重要的增强点，包括 JS 性能提升和更好的 Web 标准支持。

背景

Microsoft 于 2011 年 2 月 10 日发布了 Internet Explorer 9 Release Candidate (RC) 版本。RC 版本意味着除了 bug 修复外，在最终 RTM 版本之前不会有大的改动。自从 IE9 的第一个预览版发布以来，我一直在密切关注它。因此，我想从开发者的角度来写一篇关于 IE9 重大增强的文章，我打算总结 IE9 以下最重要的增强点：

性能提升

新的 Chakra JavaScript 引擎
硬件加速

增强的 Web 标准支持

HTML5（支持大量新属性和 Web Storage）
CSS3（border-radius, ::selection 伪元素等）
W3 标准 Geolocation API

Windows 7 集成

网站可自定义的任务栏跳转列表

通过实现上述新功能，Internet Explorer 9 无疑将成为IE 历史上最快、Web 标准支持最好的版本。

IE9 增强功能概览

新的 JavaScript 引擎 – Chakra

IE9 团队一定在 Chakra 的性能改进上付出了巨大的努力。我从维基百科的 Chakra 页面摘录了以下两段：

微软开发该引擎是为了应对日益激烈的浏览器竞争，IE8 在JavaScript 处理速度方面落后于竞争对手。^[3] 2009 年 11 月 18 日进行的SunSpider 测试显示，IE9 的 PDC 版本执行脚本的速度远超 IE8，但仍慢于Firefox 3.6、Chrome 4 和WebKit Nightly。^[4] 2010 年 3 月 15 日进行的同一测试显示，第一个 IE9 Platform Preview（使用当时最新版本的 Chakra）的速度快于 Firefox（使用SpiderMonkey），但仍慢于Safari（使用SquirrelFish Extreme）、Chrome（使用V8）和Opera（使用Carakan）。

2011 年 2 月 8 日的测试显示，IE9 Release Candidate（使用当前版本的 Chakra）的速度快于 Safari、Firefox（使用TraceMonkey）、Opera 和 Chrome。

你可以想象，Chakra 为了追赶市场上的竞争对手（V8、TraceMonkey 等）经历了多么“陡峭的学习曲线”。

WebKit SunSpider 0.9.1 版本测试结果，生成于 2011 年 2 月 8 日（从慢到快排序）

详细结果	平均值（毫秒）
IE8	3746
Firefox 3.6.13	753
Safari 5.0.3	310
Firefox 4.0 Beta 11	254
Chrome 10 Developer	248
Opera 11	240
Chrome 9	238
IE9 Release Candidate	209

在 WebKit SunSpider 测试中，IE9 是所有现代浏览器中最前沿的。

硬件加速

总的来说，“硬件”指的是GPU。在“全速提升”页面（All Around Fast）上，他们提到：

当今的网站和浏览器仅使用了您 PC 处理能力的约 10%。Internet Explorer 9释放了剩余的 90%。通过 Internet Explorer 9，我们利用 Windows 调用您的图形处理器，以发挥您 PC 的全部潜力。它使高清视频播放更流畅，色彩更真实，图形更清晰，网站响应更迅速。

更具体地说，在IE9 开发者指南中，他们描述道：

Internet Explorer 9 使用了 DirectX 系列的 Windows 应用程序编程接口 (API) 来实现对 Web 开发者的多项改进。通过使用 Direct2D 和 DirectWrite，我们将所有图形和文本渲染从 CPU 转移到了显卡。

那么，IE9 通过利用 GPU 的强大功能，速度提升了多少呢？请观看这个视频。

HTML5

在http://html5test.com 运行 HTML5 支持性测试，IE9 RC 获得 116 分。与其他大多数现代浏览器相比，这分数不算高（参见下表），但比 IE 8 及更早版本好太多了……

HTML5 标准支持性测试（从优到劣排序）

Web 浏览器	HTML5 测试分数
Google Chrome 10.0 Dev	244
Firefox 4.0 Beta 11	197
Opera 11	177
Safari	165
IE9	116
IE8	37
IE6	12

IE9 RC 现在支持很多全新的 HTML5 属性，如header、aside、nav、section、footer 和HTML5 canvas。更多详情请参考HTML5Test 或Internet Explorer 9 开发者指南。

Web Storage

Web Storage 是一种全新的 HTTP 状态存储策略，通过Session Storage 和Local Storage 实现。它们 100% 存储在客户端由具体浏览器管理。这样做显然可以节省带宽并降低安全风险。 IMHO，这是 HTML5 最伟大的改进之一！我写了一篇深入探讨 HTML5 Web Storage 的文章，链接在此：Web-Storage-In-Essence.aspx。

现在 IE9 RC 已完全支持 sessionStorage 和 localStorage 。在 JavaScript 中调用 sessionStorage 和 localStorage 非常简单，下面是示例代码：

localStorage.{key} = strValue;
var localVal = localStorage.{key}; 

sessionStorage.{key} = strValue;
var sessionVal = sessionStorage.{key};

CSS3

IE9 RC 带来了强大的 CSS3 支持，例如 font-face、namespace、border-radius、::selection 伪元素，尤其是 CSS3 选择器。IE9 RC 通过了“574 项中的 574 项 CSS3 选择器测试”，而 Chrome 10.0 Dev 通过了 558 项。

我写了一个 IE9 CSS3 支持页面，展示了 font-face、border-radius、::selection 和选择器。下面的 HTML5 源代码，请随意尝试。:)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="application-name" content="Wayne IE9 CSS3 Support Demo" />
    <title>Wayne IE9 CSS3 Support Demo</title>
    <style type="text/css">
        @font-face
        {
            font-family: "Blue Highway";
            src: url(http://www.princexml.com/fonts/larabie/bluehigh.ttf) 
			format("truetype");
        }
        body
        {
            background-color: rgba(100,50,0,5,0.5);
            font-size: 16px;
            font-family: "Blue Highway" ,Arial,Tahoma;
        }
        
        .elementWithRoundedConor
        {
            width: 150px;
            height: 100px;
            padding: 10px;
            margin: 0 auto;
            border: 3px dotted #666;
            border-radius: 10px 10px 10px 10px;
        }
        ::selection
        {
            background-color: #E1E87A;
            color: Black;
        }
        
        /*CSS3 selector*/
        img[alt*="ie9"] /*all div elements that have an 
			alt attribute value containing "ie9"*/
        {
            border: 3px solid #4169E1;
        }
    </style>
</head>
<body>
    <header role="banner"></header>
    <aside>CSS3 border-radius demo:</aside>
    <div class="elementWithRoundedConor">
        Some text....
    </div>
    <aside>CSS3 selector demo:</aside>
    <img src="http://i1-news.softpedia-static.com/images/news2/
	The-New-Internet-Explorer-9-IE9-Logo-2.png" alt="ie9test" />
    <img src="http://mozcom-cdn.mozilla.net/img/home/download-logo.png" alt="FireFox" />
    <img src="http://i1-news.softpedia-static.com/images/news2/
	The-New-Internet-Explorer-9-IE9-Logo-2.png" alt="ie9logo" />
    <footer role="copyrightInfo">
    <p> </p>
        &copy;WayneYe http://WayneYe.com 2011
    </footer>

</body>
</html>

Geolocation API

一个月前，我写了一篇关于调用 W3 标准 Geolocation API 和 Google 地图来跟踪终端用户地理位置的博客（http://wayneye.com/Blog/IPAddress-To-Geolocation/，其中描述了如何使用示例 JS 代码实现 W3 标准方式的地理位置跟踪）。当时我还在使用不支持此功能的 IE9 Beta2。现在 IE9 RC 完全支持 Geolocation API，这让我非常兴奋！请看下面的截图。

点击“仅允许一次”，您的地理位置将被浏览器收集并传递给 Google 地图。

Windows 7 集成

这确实是一个亮点功能，而且非常有趣 :)，请看下面的截图。

<meta name="application-name" content="Wayne's Geek Life - 
	Infinite passion on programming" /> 
<meta name="msapplication-tooltip" content="See what Wayne is blogging and sharing:)" /> 
<meta name="msapplication-starturl" content="http://WayneYe.com/" /> 
<meta name="msapplication-navbutton-color" content="#5f6dbd" /> 
<meta name="msapplication-window" content="width=960;height=600"/> 
<meta name="msapplication-task" content="name=Home;action-uri=http://WayneYe.com;
	icon-uri=http://WayneYe.com/favicon.ico" /> 
<meta name="msapplication-task" content="name=Album;action-uri=http://WayneYe.com/Album;
	icon-uri=http://WayneYe.com/favicon.ico" /> 
<meta name="msapplication-task" content="name=Video;action-uri=http://WayneYe.com/Video;
	icon-uri=http://WayneYe.com/favicon.ico" /> 
<meta name="msapplication-task" 
	content="name=History;action-uri=http://WayneYe.com/History;
	icon-uri=http://WayneYe.com/favicon.ico" /> 
<meta name="msapplication-task" content="name=Visit Record;
  action-uri=http://WayneYe.com/VisitRecord;icon-uri=http://WayneYe.com/favicon.ico" /> 
<meta name="msapplication-task" content="name=About Wayne;
  action-uri=http://WayneYe.com/About;icon-uri=http://WayneYe.com/favicon.ico" />

实现起来很简单，添加类似以下的 meta 属性，IE9 就会在您的 Windows 上注册跳转列表。

微软官方指南如何创建基本固定网站。

结论

IE9 RC 在 JavaScript 执行性能和 Web 标准（HTML5、CSS3、Geolocation API）支持方面都取得了巨大进步，甚至还实现了与 Windows 7 任务栏跳转列表的无缝集成。然而，仍然有一些遗憾。我个人希望 IE 9 能实现以下 HTML5 功能：

HTML5 表单输入元素（例如 <input type="email/range/url/time/color 等）目前在 IE9 中完全不支持。
Web Workers，它支持长时间运行的脚本，不会被响应点击或其他用户交互的脚本中断。
服务器发送事件 (SSE) 是 HTML5 的一部分，它允许服务器在建立初始客户端连接后，向客户端主动推送数据。

参考文献

Internet Explorer 9 中的新 JavaScript 引擎
http://blogs.msdn.com/b/ie/archive/2010/03/18/the-new-javascript-engine-in-internet-explorer-9.aspx
Internet Explorer 9 开发者指南
http://msdn.microsoft.com/en-US/ie/ff468705.aspx
HTML5 规范
http://dev.w3.org/html5/spec/Overview.html
W3 Geolocation API 规范
http://dev.geo.api/spec-source.html
HTML5 Doctor
http://html5doctor.com/

附录

我想借此机会分享两个关于开发跨浏览器 Web 应用程序（与 Internet Explorer 相关）的个人技巧。

定义“X-UA-Compatible”meta 属性，告诉 Internet Explorer 应该使用哪种“浏览模式”。示例如下：

<meta http-equiv="X-UA-Compatible" content="IE=edge;FF=3;OtherUA=4" /> 
<!--IE will try to use the highest mode available.-->
<meta http-equiv="X-UA-Compatible" content="IE=7;FF=3;OtherUA=4" /> 
<!--IE 7 browse mode.-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7;FF=3;OtherUA=4" /> 
<!--EmulateIE7 browse mode.-->

更多详情请参考 MSDN 文章：compatible 属性 和定义文档兼容性。

使用条件注释来区分特定的 IE 版本
```

```
“lte”表示“小于或等于”，我经常使用。您还可以使用“[if !IE]”、“[if IE 7]”等。有关完整用法，请参见 MSDN 文章：关于条件注释。

编码愉快！:)

最初发布于：http://wayneye.com/Blog/Significant-Enhancement-In-InternetExplorer9/。