IE9 现已发布，我们希望您能够为 IE 提供与其他浏览器相同的标记，并确保您的站点能够在 IE9 标准模式下良好运行。最近，我们在博客中讨论了为 IE9 准备您的站点，您可以在 Internet Explorer 9 兼容性手册中找到可能会对您的站点产生影响的更改列表，还可在 Internet Explorer 9 开发人员指南中找到更完整的更改内容列表。今天，我们将介绍一种有助于加速站点准备过程的新资源：Compat Inspector。

关于 Compat Inspector

Compat Inspector 是一种基于 JavaScript 的测试工具，可在站点运行时分析站点。Compat Inspector 报告导致在标准模式中出现问题的交互模式。这使您能够迅速识别问题，而无需熟记大量文档，无需在站点的全部代码中进行搜索。我们在 IE9 开发过程中开发了 Compat Inspector，旨在加速识别各站点中共同问题的过程。在这个过程中，IE 团队的许多成员为构成 Compat Inspector 规则的测试用例集做出了贡献。现在，我们将这种工具奉献给您。请访问 Compat Inspector Test Drive，在试用后再将其用于您自己的站点。

Compat Inspector 设计用于帮助站点迁移到 IE9 标准模式，而非在旧式模式下运行。您可能仍然需要参考上述文档来了解一些问题。最佳模式是首先使用 Compat Inspector，如果未得到任何结果，再回头查阅文档。

如何使用这种工具？

要使用 Compat Inspector，请在您希望测试的各页面的所有其他脚本之前添加以下脚本：

<script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>

注意：如果您拥有 Fiddler，可以将这个代码片段添加到您的 FiddlerScript 中，自动在您访问的所有页面上加载 Compat Inspector（如果您的页面使用了框架，这种方法将非常有帮助）。如果您还没有安装 FiddlerScript Editor 扩展，我建议您立即安装。

添加了上述脚本之后，在 IE9 中打开并开始使用您的页面。显式测试任何已知无法正确工作的交互（仅分析执行的代码）。Compat Inspector 将保留与检测到的问题相关的所有错误和警告的总计。页面右上角的汇总视图显示结果：

单击展开这个视图，了解检测到的各问题的具体信息，此处也提供了相关文档的链接：

大多数错误和警告还提供了两项用于进一步调查的操作：“Verify”（验证）和“Debug”（调试）。

“验证”工作流

部分测试用例具有内置的“验证器”，可模拟旧版行为。这允许您确认问题根本原因，之后再更改代码。

先决条件：打开了 Compat Inspector 的具体信息视图，并且显示了包含名为“Verify”的复选框的错误或警告消息。

1. 单击您希望确认的问题的“Verify”复选框

2. 刷新页面（您将看到一条通知，表示验证器已启用）

1. 重复最初触发了错误或警告的步骤
2. 如果问题仍然存在
   1. 如果仍然显示错误或警告消息，请为其他各消息重复第 1 步到第 4 步
   2. 否则，Compat Inspector 将无法完全确认此问题。如需其他帮助，请参阅 IE9 文档。

1. 如果您已经确定了问题的根本原因

a. 取消选中全部“Verify”复选框

1. 刷新页面
2. 按照下面的“Debug”工作流在代码中定位各条消息的来源
3. 按照所显示的错误/警告消息中的说明解决问题
4. 注意：同时请注意控制存在问题的代码执行的任何“if IE”检查。通常情况下，如果与其他现代浏览器使用相同的代码，则 IE9 的表现最佳。

“调试”工作流

Compat Inspector 还能通过“debug”功能帮助您隔离代码中出现问题的位置。

先决条件：打开了 Compat Inspector 的具体信息视图，并且显示了包含名为“Debug”的复选框的错误或警告消息。

1. 单击您希望调查的问题的“Debug”复选框

2. 按 F12 键打开 F12 开发人员工具

3. 切换到“Script”选项卡

4. 单击“Start debugging”

5. 重复最初触发错误或警告的步骤（这将调用脚本调试器）

6. 切换到 F12 开发人员工具右侧的“Call stack”子选项卡

7. 双击下方可见的条目，在调用堆栈中突出显示条目

8. 观察 F12 开发人员工具的左侧部分，查看触发错误或警告的代码

它是如何工作的？

Compat Inspector 利用了 IE9 中引入的功能。Compat Inspector 的核心在于使用 ECMAScript 第 5 版 getter/setter 覆盖本机 API，依靠浏览器来通过 WebIDL 正确地公开 API。随后，Compat Inspector 利用这些覆盖来跟踪页面与本机平台之间的交互。这使它能够在执行问题代码时，在运行时报告问题。

Compat Inspector 基础结构的其他部分按照需要利用多种其他新功能。部分示例包括 DOM 3 级核心 API、DOM 3 级事件 API 和 CSS3 Border Radius。Compat Inspector 还依靠 IE8 中引入的功能，比如 HTML5 本地存储、HTML5 跨文档消息传递、本机 JSON 支持 和 Selectors API 等。

我的站点可以正常工作了，接下来该做些什么？

在发布之前，从所有页面中删除 Compat Inspector 脚本。Compat Inspector 是一种测试工具，不应该用于生产之中。此后，请随时关注 IE 博客，我们可能会在将来分享新的测试用例。

—Tony Ross，项目经理，Internet Explorer

我们非常高兴能够在 Internet Explorer 10 平台预览版 1 中提供 CSS3 渐变的供应商前缀支持[caj1] ！CSS3 渐变来自 CSS3 图像值和替换内容规范的一个小节，该规范目前仍处于工作草案状态。利用 CSS 标记，浏览器即可生成渐变图像，并可在允许使用 CSS 图像的位置呈现此图像。在平台预览版 1 中，CSS3 渐变可用作背景图像。

为何使用 CSS 渐变？

Web 开发人员广泛地利用渐变来创建美观的站点。渐变往往用于打造深度感和添加色彩。在文本和菜单的背景中经常可以发现精致的渐变。

在站点和菜单背景中使用精致渐变的几个简单示例

如今，实现渐变效果的最常见的方法就是在需要渐变的位置使用光栅图像。利用 CSS 渐变，Web 创作者无需为渐变创建单独的图像。CSS 渐变支持使用 CSS 标记来描述和生成渐变图像，提供无缝的色彩过渡效果。与纯色背景相似，渐变背景也可完全在 CSS 中指定。在此基础之上，所生成的渐变图像可依赖于应用此渐变图像的容器的大小。例如，可以轻松指定跨 <div> 元素背景填充的径向渐变，即使在 <div> 的大小发送变化时也是如此。利用百分比单元，一行 CSS 标记就足以为多个不同大小的 <div> 应用渐变。使用光栅图像显示渐变时，如果需要调整大小，则渐变的保真度可能会降低。对于与背景大小属性共同使用的渐变或者在各种需要频繁执行缩放操作的设备上显示的渐变，这种情况极为常见。

div { background-image:-ms-radial-gradient(yellow 0%, fuchsia 100%); }
应用于全部 3 个 <div>

更改站点的外观十分轻松。只需在 CSS 样式表中进行全部必要更改即可。使用外部图形资源往往需要通过独立的图形编辑器更新外部资源、更改站点的配色方案，但使用 CSS 渐变时则不必如此。CSS 渐变为 Web 创作者提供了更多的灵活性，降低了更改站点外观的繁琐度。特别是由于 IE10 提供了适应能力更高的布局模式，比如 CSS3 Grid Layout、Flexible Box Layout 和Multi-column Layout，因此灵活性也更加重要。

标记所占用的带宽也更低。例如，使用 -ms- 供应商前缀的简单双色线性渐变标记仅为 38 字节。即便在使用四个供应商前缀和一个无前缀版本的情况下，标记的大小也仅为 198 字节，低于 1x100 PNG 格式下同等渐变的 215 字节。要包含在背景图像中的标记几乎可以忽略不计，而且此处假设可以使用非常小的重复图形。此外，无需加载独立图像文件，节约了下载时间，也为用户提供了更高速的体验。

如何使用 CSS 渐变

CSS 渐变是由形状和色标点描述的。渐变可以包含多个色标点，并为各色标点分别指定一个 RGBA 颜色和位置。CSS 渐变的可选风格有两种：线性渐变和径向渐变。正如其名称所表示的那样，它们描述了渐变的形状。下面给出了线性渐变和径向渐变的几个示例，随后给出了在 IE10 平台预览版 1 中的显示效果。

可以看到，对于线性渐变来说，可以选择通过关键字（top 或 bottom、left 或 right）或者角度来指定渐变线的方向，后接一系列色标点。每个色标点都需要一个颜色，还可选择指定一个位置作为与渐变线之间的距离。所生成的线性渐变包含色标点之间的平滑颜色过渡。

background-image:-ms-linear-gradient(30deg, orange, yellow 50%, turquoise);

在径向渐变中，可以选择使用与背景位置相同的语法来指定渐变椭圆形的中心位置。随后可以使用关键字或长度/百分比，指定渐变的形状（圆形或椭圆形）和大小。

background-image:-ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);

您可以添加 CSS 渐变支持，实现更快速的加载时间、更好的图形保真度，同时继续为使用不支持 CSS 渐变的浏览器的用户提供外部背景图像或纯色。只需确保 CSS 渐变所在的图层处于外部图像或纯色之后即可。通过这样的方式，能够识别渐变语法的浏览器即可使用 CSS 渐变，而不能识别此语法的浏览器将忽略 CSS 渐变并使用已经指定的背景。

{
    background:#FFFFFF;
    background-image:-ms-radial-gradient(top center, circle cover,
        orange, yellow 25px, turquoise);
}

IE10 PP1 中的已知问题

IE10 平台预览版 1 不支持预乘 alpha 颜色空间中的颜色插值。这也就是说，具有不同 alpha 值的 rgba() 颜色之间的插值的效果比应有效果差。这一点对于 alpha 值为 0 的黑色色标点来说尤为值得注意。在过渡到一个透明的黑色色标点时，颜色过渡将在转为透明之前淡化为黑色，而不是直接淡化为赏心悦目的透明效果。

在白色背景上，从橘黄色渐变为 rgba(0, 0, 0, 0) 的透明黑色：

未预乘的颜色空间	预乘的颜色空间

IE10 将在预乘颜色空间中支持颜色插值。这将在未来的平台预览版中提供。

此外，IE 10 和未来预览版中将提供在列表样式图像以及所生成的内容中对 CSS 渐变的支持。另外请牢记，平台预览版 1 中的重复渐变（可使用 -ms-repeating-linear-gradient 和 -ms-repeating-radial-gradient 取代 -ms-linear-gradient 和 -ms-radial-gradient 来提供重复渐变）反射了渐变，而非重复渐变。此问题同样将在 IE10 中得到修复。

基于 WebKit 的浏览器的互操作性备注

在本文撰写之时，Safari 5.0.4 尚不支持当前 W3C 工作草案中所述的 CSS 渐变语法的供应商前缀版本。Webkit 最初为另外一种 CSS 渐变语法的供应商前缀版本提供了支持，也就是 Safari 目前支持的版本。然而，WebKit 近来添加了对渐变语法标准版本的供应商前缀支持。同样基于 WebKit 呈现引擎的 Chrome 目前支持该语法的 W3C 草案版本 (Chrome 10.0.648.204)。虽然 Safari 将有望采用标准版的渐变语法，但有必要说明，如果您希望在目前使用 Safari 显示 CSS 渐变，就需要额外的渐变定义。

动手演练

请在 IE10 平台预览版 1 中试用 CSS3 渐变。我们期待您的反馈。您可以尝试我们在 IE Test Drive 站点中提供的 CSS Gradient Background Maker，以此作为入门，生成可互操作的标记。

您在寻找适用于 IE9 的渐变解决方案？请试用我们的 SVG Gradient Background Maker，生成可在 IE9 和目前大多数其他浏览器中使用的基于 SVG 的 CSS 背景图像。通过将 SVG 渐变背景图像与 CSS 渐变背景图像相结合，您就可以创建能在 IE 9 和全部其他浏览器的当前版本中工作的标记。

—Jennifer Yu，项目经理，Internet Explorer Web Graphics

[caj1]不通顺

去年，您在使用 IE9 平台预览版本、Beta 和发布候选版期间提供的结构化反馈为我们构建最可靠的 IE 版本提供了极大的帮助。您通过 Windows 错误报告和其他方法发送给我们的错误报告，帮助我们修复了用户遇到的影响重大的问题。您的实际浏览体验使我们能够采用内部测试所无法匹敌的方式识别可靠性问题。

在本文中，我们向您介绍 IE9 可靠性的工程设计流程。我们将为您介绍发送反馈的各种渠道。介绍如何分类和优先化数据以首先解决最重大的问题。最后，我们将分享我们自己的数据，展示 IE9 如何在 IE8 基础之上改进可靠性。

欢迎您在使用最终的 IE9 版本期间通过我们的遥测系统发送反馈。持续的错误报告使我们能够通过未来的累积更新继续实现对 IE9 可靠性的改进。

通过 Windows 错误报告报告崩溃

如果在 IE 中遇到崩溃，自动崩溃恢复等功能可帮助减轻这些崩溃的影响，但我们希望从源头杜绝它们的发生。我们使用了多种不同的机制来收集关于崩溃的信息。其中一种机制就是 Windows 错误报告。

对于选择启用 Windows 错误报告的用户，IE 会在崩溃发生时收集浏览器的状态信息并将该信息封装到一个错误报告中。此信息有助于开发人员调试错误根源并修复崩溃。如果在浏览期间遇到浏览器挂起，Internet Explorer 也会发送错误报告。我们将在以后的文章中介绍挂起相关的内容。

请记住，Microsoft 在提交错误报告时会保护您的隐私。IE 在将错误报告安全地传回 Microsoft 之前，会向您请求权限。

Windows 错误报告对话框

在 IE9 Beta 和 RC 版本中，我们使用了反馈发送工具和 Microsoft Connect 等其他机制来接收您对 IE 可靠性的反馈。这些机制最终可能会向我们报告重复的问题，但我们会在内部删除报告的重复问题。您的报告有助于构建庞大且具有统计意义的数据量，使我们能够确定值得解决的可靠性问题。

了解 IE 崩溃的原理

收集了丰富的崩溃样本之后，我们根据崩溃来源对数据进行分类。这有助于我们大致了解哪些区域对 IE 可靠性具有较大影响。我们会专门安排人员在每个类别中进行改进。

在 IE9 Beta 期间，以下类别可能产生可靠性问题：

IE 代码错误

IE 代码错误是大部分崩溃的根源。由于引入了大量新代码，IE 崩溃与第三方崩溃的比率在预发行版（Beta 和发布候选版）中较高。

加载项

尽管加载项是 IE 浏览体验的核心部分，但它们也是 IE 中可靠性问题的主要原因。与加载项相关的崩溃通常在打开新选项卡或启动 IE 时发生。一些加载项不兼容较新的 IE 版本，可能导致崩溃。

ActiveX 控件

如今的许多网站使用 Flash、Silverlight 和 QuickTime 等 ActiveX 控件来显示交互式内容和视频。因为 ActiveX 控件在本质上是在浏览器中运行的 Windows 应用程序，所以质量较差的控件可能导致浏览器选项卡崩溃或挂起。

图形驱动程序

IE9 向硬件加速图形的过渡高度依赖于生态系统中显卡驱动程序的质量。我们发现，在 IE9 Beta 期间从 反馈发送工具收到的崩溃报告中有 41% 是由显卡驱动程序造成的。这些崩溃发生在与加载项崩溃类似的场景中，所以它们对正常浏览具有非常重要的影响。

其他第三方软件

许多软件程序（比如防病毒工具和自定义下载管理器）可能影响 IE 的可靠性。

绘制“故障曲线”

下一步是对来自每个类别的数据进行整理，以便我们可以系统地分析崩溃。我们使用“故障曲线”确定问题的优先级，这些曲线是一些条形图，其中每一个条形图表示一种唯一的崩溃，崩溃按从最常遇到到最少遇到排序。

绘制了故障曲线之后，我们从曲线顶部最常遇到的问题开始分析每个问题。曲线尾部的问题通常会在具体的硬件和软件配置中遇到。修复它们可能也很重要，但我们首先从最常遇到的问题开始，以确保最大化我们的工作的影响。

上面的故障曲线示例展示了我们如何成功地解决自 IE9 Beta 以来 IE 代码中最常发生的 50 种崩溃。

确保可靠的体验

通过在 IE 团队中和与第三方开发人员合作完成的工作，我们通过解决所报告的大部分崩溃，不断地改进浏览体验的可靠性。本节介绍我们如何在每个类别中最终修复缺陷：

内部可靠性问题

我们记录来自 Beta 和发布候选版的 IE 代码中最常发生的崩溃错误。我们在继续监视新问题的大量数据的同时解决这些缺陷。

我们还结合各种有效的遥测来源。我们使用您的“发送反馈”报告帮助再现通过 Windows 错误报告分析的问题。崩溃的成功再现可帮助开发人员确定问题根源并帮助测试人员验证崩溃是否已修复。

上面的故障曲线图为我们对 IE 问题的修复绘制了一幅准确的进度图。总之，我们修复了自 IE9 Beta 以来报告的 IE 代码中的问题中的 85%，我们将在累积更新中继续修复该曲线尾部的问题。

IE9 中的质量和可靠性改进是巨大的。在最终的 IE9 版本上运行压力和持久测试的时间是在 IE8 上的 6 至 7 倍。

第三方错误

我们与来自全球的供应商合作解决来自 IE9 Beta 和更高版本的重要的第三方可靠性问题。我们使用 WinQual 计划与供应商分享错误报告信息。我们保证他们只能访问与自己的产品相关的错误报告。

众所周知，存在故障的加载项或图形驱动程序可能在一些重要使用场景中导致 IE 反复崩溃。IE 中有两种内置机制可帮助我们解决这些问题：

• 加载项：我们使用升级顾问禁用任何已知的不兼容加载项，以便即使以前安装了这些加载项，现在也可以成功启动 IE。当升级顾问在启动时阻止了一个加载项，IE 会向您通知该操作并为您提供检查该加载项更新的选项。
• 图形驱动程序：IE9 包含已知不兼容图形驱动程序的一个“软件回滚列表”，它根据错误报告和内部测试编译而来。如果使用这些驱动程序，IE 将使用软件呈现代替GPU 图形加速呈现。在此模式下运行可预防驱动程序导致浏览器崩溃。

目前为止，您提交的错误报告帮助第三方供应商解决了来自 IE9 Beta 的一些重要崩溃。我们更新了 IE9 RC 的软件回滚列表并简化了升级顾问体验（后续文章中将详细介绍）。

您的反馈很重要

我们根据本文中介绍的方法来解决 IE 以及来自 IE9 Beta 和 IE9 RC 的各种第三方组件的常见崩溃，这离不开您提供给我们的错误报告和其他类型的反馈。最终得到了一个高质量的 IE9 版本，它在压力和持久可靠性方面的分数很高。

可靠性工程设计是一个封闭的反馈循环。在最终版本发布之后，我们将使用来自更大用户群的反馈来继续改进可靠性。随着网络和软件生态系统的不断发展，我们会通过累积更新发布对重要问题的修复，构建越来越可靠的体验。

再次感谢您使用 IE9 平台预览版、Beta 和发布候选版并以各种形式提交反馈。您的贡献使 IE 每天都变得更加可靠。

—Herman Ng，项目经理，Internet Explorer

对 ECMAScript 5（著名语言 JavaScript 的更新标准）的支持是我们确保相同标记和相同脚本兼容不同浏览器的承诺的一部分。在过去几个月，我们专门发布了一些针对该主题的博客帖子，包括：

• ECMAScript 5：可重用的代码
• ECMAScript 5：数组补充说明
• IE9 的文档模式和 JavaScript

除了 IE9 RC，我们还发布了另一个测试演示，以探索可用于 IE9 的全部 ECMAScript 5 优势。 Texas Hold’Em 游戏（T’ECMAScript Hold’Em in Redmond 的简称）旨在简短演示如何编写一个可重用的类库，这个类库利用 ES5 的许多功能来为开发人员保留更多控制权和构建面向对象的设计模式。随着基于 Web 标准的应用程序在大小和复杂性上不断增长，这二者缺一不可。

首先介绍功能检测

因为我们的 Texas Hold’Em 游戏使用了 ECMAScript 5，所以我们采用了功能检测来确保应用程序在支持必要功能的浏览器中运行。FeatureDetectES5Properties.js 文件专门查找对重要的 ECMAScript 5 功能 defineProperties 的支持，确保应用程序的剩余部分能够持续运行，而不会遇到运行时错误。这不是对 ES5 支持的一项完善的一致性测试，但它是对应用程序是否在现代浏览器中运行的一种速查。

if (!Object.defineProperties || !Object.defineProperty) {

$FeatureDetect.fail("This demo requires ECMAScript 5 properties API support.");

}

扩展开发人员控制范围

属性

ES5 引入的一项最重要的变更是添加了对属性特性的直接开发人员控制。这意味着在完善一个库后，无需担心用户可能意外地重写一个重要方法。

属性提供了对 ECMAScript 对象的完全控制，允许开发人员保护这些重要方法或值，还可根据所需的具体保护级别进行细粒度控制。

属性使用属性描述符应用。

new_card_desc = {

 value: {

configurable: false,

enumerable: false,

writable: true,

 value: value

    },

binval: {

configurable: false,

enumerable: false,

writable: true,

 value:binval

    }

};

此描述符可在附加到 Poker 游戏的 Card.js 库中找到。该值是一个纯文本字符串，表示标准扑克牌的花色和大小。binval 是相同信息的二进制表示，提供了一种绝对方式来对比任意两张扑克牌。

许多内部方法依赖于这些属性的存在，所以我们无法承担删除它们的风险。此外，在创建扑克牌之后，它们不应该变化。我设置了 writable:false 来预防分配新值。我设置了 configurable:false 来使它们保持固定不变。enumerable 属性在对象的 for-in 检测期间隐藏了一个属性。因为对这些属性的所有引用都是在其他方法内部进行的，所以没有理由将它们暴露给其他库。通过设置 enumerable:false，我清除了我的对象，仅将有用的属性向其他库公开。

更熟悉 ES5 加载项的开发人员可能注意到，描述符中任何属性的默认值都为 false。出于此原因，我们可以将描述符重写为：

new_card_desc = {

value: {

value:value 

    },

binval: {

value:binval

    }

};

这是一个非常简单的示例。属性的 value 特性可以是任何 JavaScript 对象，这就提供了一种方便的途径来保护整个方法。您可以在 Deck.js 文件中的 Shuffle 方法中看到这一点：

Shuffle: {

value: function () {

var i, j, tempi, tempj;

 this.dealt = 0;

 this.discardPile = [];

 for (i = 0; i < this.length; i++) {

j = Math.floor(Math.random() * (i + 1));

tempi = this[i];

tempj = this[j];

this[i] = tempj;

this[j] = tempi;

        }

    }

}

将 writable 和 configurable 属性设置为 false，现在几乎无法意外地或恶意地更改逻辑 – 没有自动的 pocket ace 可用！Deck 对象本身在本质上是一个 Card 对象数组。将所有方法设置为 enumerable:false，对 Deck 的迭代与迭代所有可用的扑克牌相同。方法仍然可访问，但不会破坏其他地方的逻辑。

Setter/Getter

Setter 和 Getter 是许多通用编程语言中的一种常见的编程模式。这种模式所提供的一种更加强大的优势是，可以简单、直接地访问以编程方式生成的数据 – 通常称为“计算值”。幸运的是，Card.js 文件中定义的 Card 对象提供了这种模式的一个完美示例：

image: {

enumerable:true,

 get:function () {

 var iSuit, iRank;

switch (this.suit) {

case "S":iSuit = "Spades"; break;

case "H":iSuit = "Hearts"; break;

case "D":iSuit = "Diamonds"; break;

case "C":iSuit = "Clubs"; break;

default:throw "No such suit:" + this.suit;

        }

if (isNaN(parseInt(this.rank, 10))) {

switch (this.rank) {

case "T":iRank = "10"; break;

case "J":iRank = "Jack"; break;

case "Q":iRank = "Queen"; break;

case "K":iRank = "King"; break;

case "A":iRank = "Ace"; break;

 default:throw "No such rank:" + this.rank;

            }

} else if (this.rank > 1) {

iRank = this.rank;

} else {

throw "No such rank:" + this.rank;

        }

return iSuit + "_" + iRank + ".png";

    }

}

每个 Card 对象都在我们的应用程序有一个对应的 .png 用于显示。无需手动迭代每个 Card 并存储每个 .png 的唯一名称 – 我们可以提供一个 getter，它由我们的 Deck 中的每个 Card 继承，并使用针对每个 Card 的现有唯一值生成此字符串。也可以将此创建为一种方法调用，但在此实例中，getter 似乎更合适 – 不需要或不应该有任何参数，没有将不必要的方法向我们的库用户公开。它对使用者而言只是一个简单的数据属性。

Object.defineProperty

Object.defineProperty 和 Object.defineProperties 方法可用于应用新的 ES5 属性。它们仅在允许用户在一个方法调用中定义的属性数量上不同。我们的 Poker 游戏中的每个属性都是用这两个方法来定义的。当然，这不是声明属性的唯一方法，开发人员可根据自己想要的方式混搭他们的属性声明。可以将此视为对这些方法的灵活性的有用演示。可以在 Card.js 文件中看到一个示例。

 var CardPrototype = {};

Object.defineProperties(CardPrototype, card_proto_desc);

Object.seal 和 Object.freeze

使用 descriptors 和直接属性声明有替代方法。Object.seal 和 Object.freeze 提供了一种简单方式来将想要的属性保护级别扩展到整个对象。在探讨它们之前，首先需要提及 ES5 所添加的最后一个属性： extensible。extensible 并不是作为对象的属性而添加的，而是直接添加到对象本身中。调用 Object.preventExtensions 可以永久地设置此标志，防止在该对象上定义任何新属性；seal 和 freeze 都是此函数的超集。Object.seal 是一个锁定对象可扩展性和所有其属性的可配置性的一步式方式。可写的属性仍然可以修改，但无法删除。要实现进一步的保护，使用 Object.freeze 最恰当不过了；它阻止对对象及其属性进行任何更改，包括分配值。这在声明常量时可能很方便，比如包含我们的 Suit 和 Rank 的数组：

/* All available card suits */

var Suits = {

"S" :3, //spade

"H" :2, //heart

"D" :1, //diamond

"C" :0  //club

};

Object.freeze(Suits);

/* All available card ranks */

var Ranks = {

    "2" : 2,

    "3" : 3,

    "4" : 4,

    "5" : 5,

    "6" : 6,

    "7" : 7,

    "8" : 8,

    "9" : 9,

"T" :10, //ten

"J" :11, //jack

"Q" :12, //queen

"K" :13, //king

"A" :14  //ace

};

Object.freeze(Ranks);

面向对象的方法

Object.create

Object.create 是表明“给我一个具有此原型的新对象”的简单方式。这在以前可通过以下语句完成：

<new_object>.prototype = <proto_object>;

return new <new_object>;

与上面的声明不同，Object.create 还提供了一种简单方式来向 <new_object> 添加新属性，创建一个新 Object 实例，它继承一个共享原型但具有唯一、基于实例的值。可在 Card.js 底部找到一个简单示例：

/* CONSTRUCTOR */

var NewCard = function (suit, rank) {

// Setup unique values for unique instance

var value, binval, new_card_desc;

value = suit.concat(rank);

binval = Suits[suit];

binval = binval << 4;

binval = binval + Ranks[rank];

new_card_desc = {

 value: {

writable: true,

value:value,

        },

binval: {

writable:true,

value:binval

        }

    };

// Return unique instance extending Card object

return Object.create(CardPrototype, new_card_desc);

};

CardPrototype 包含我们的共享方法（Comparison 等方法），而新的描述符包含每个 Card 实例的唯一值。

Object.keys

Object.keys 返回对象上每个 enumerable 属性组成的数组。我们的 Deck 构造函数中有一个简单示例：

// build deck

suits = Object.keys(Suits);

ranks = Object.keys(Ranks);

for (var s in suits) {

for (var r in ranks) {

deckArray[deckArray.length] = NewCard(suits[s], ranks[r]);

    }

}

通过迭代两个常量数组上的所有属性，会遍历每个可能的 Rank 和 Suit 组合并编译完整的 Deck。

Object.getOwnPropertyNames

在想要每个方法时（无论是否可枚举），可以使用 Object.getOwnPropertyNames。但是，请注意，它仅返回自己的属性名称。这意味着将跳过继承自一个原型的属性。这提供了一种简单方式来分离两类属性。

完成应用程序

通过这次简单演练，我们探讨了 ES5 中的许多功能以及它们对这个 CardGame 库的实现有何帮助。库本身（包含在 Card 和 Deck 文件中）与此具体应用程序所独有的部分（描述游戏板应该如何摆放的 Poker、Player 和 Game 文件）结合使用。

为了完成此应用程序，我通过 JSLint 运行它，这导致了几个错误 – if 和后面的条件从句之间的空白，一元运算符后缀的使用，以及在独立的行上而不是在包含范围顶部的一行中声明 var。

使用此示例探索 ES5

希望这个简单的扑克牌游戏很好地演示了 IE9 对 ES5 的广泛支持。您可以使用此代码编写自己的基于 ES5 的扑克牌游戏 – 或许是 ECMAScript 5 抽牌游戏？

请下载 IE9，享受编写优秀代码的乐趣。

—Jared Straub，JavaScript 团队测试部门的软件开发工程师

在 IE9 候选发布版中引入 ActiveX 筛选时，我们关注的是交付卓越的用户体验，使得筛选能够避开常规浏览，并使用户能够在必要时轻松关闭筛选。与此同时，我们希望在启用 ActiveX 筛选的情况下，用户仍能获得出色的 Web 站点查看体验。这包括最小化站点兼容性问题，以及在 ActiveX 筛选阻止了一个 Web 页面内容时进行明确说明。

在这篇文章中，我们介绍了 IE9 最终发布版中对于 ActiveX 筛选的一些补充，同时分享了鼓励 Web 站点开发人员遵循的一些最佳实践。若能根据这些最佳实践更新 Web 站点，将有助于让使用 ActiveX 筛选的浏览体验提升至最佳程度。

msActiveXFilteringEnabled API

在检测到用户未安装 ActiveX 控件时，许多 Web 站点都会显示替用内容。通常情况下，站点会显示一条消息，通知用户需要安装或升级 ActiveX 控件，之后才能查看内容：

YouTube 显示一条升级消息作为替用内容

在 ActiveX 筛选阻止 Web 站点上的一个控件运行时，站点将向用户显示相同的消息，即使控件已经安装也是如此。站点无法确定控件究竟是未安装，还是被 ActiveX 筛选所阻止。用户将继续重新安装或升级控件，但由于控件仍然被阻止，因此用户最终会看到相同的消息。

在 IE9 最终发布版中，我们添加了 msActiveXFilteringEnabled API，它能确定是否为当前站点启用了 ActiveX 筛选。如果用户决定为一个站点关闭筛选，或者 ActiveX 筛选在全局范围内关闭，则 API 将返回 false。后文中有关最佳实践的部分将给出如何利用这种 API 的具体建议。

页内筛选器图标

在 ActiveX 筛选阻止了 ActiveX 控件时，某些 Web 站点不会显示替换内容。现在，IE 不再是在占位符区域内显示一个损坏的对象图标，而是显示与过去在地址栏内使用的相同的筛选图标：

在 ActiveX 筛选关闭时，ActiveX 控件显示正常

在 ActiveX 筛选阻止了 ActiveX 控件时，IE 将在该控件的占位符内显示一个筛选器图标

IE 将在被跟踪保护阻止的内容的占位符中显示相同的图标。显示此图标使用户能够清楚地了解到 IE 已经从页面中筛选掉了此内容。它为用户提供了一种视觉线索，表示单击地址栏上的这个图标即可为该 Web 站点关闭筛选，并查看此内容。如果没有这项更改，用户就可能会认为 Web 页面中包含损坏的链接，可能不会为该页面配置筛选选项。

面向 Web 站点开发人员的最佳实践

下面给出了一些最佳实践，我们鼓励 Web 站点开发人员遵循这些最佳实践，以确保其站点能够与 ActiveX 筛选配合良好：

利用本机对象而非 ActiveX

在产品测试过程中，我们发现了不一定依靠 Microsoft.XMLHTTP ActiveX 控件执行 AJAX 操作的 Web 站点的几个示例。由于 ActiveX 筛选通过脚本阻止了该控件的实例化，因此在启用 ActiveX 筛选的情况下，站点无法正常显示，即便站点似乎并未包含任何 ActiveX 内容时也是如此。

这些站点使用以下编码模式来使用 XMLHttpRequest 对象的 ActiveX 版本，因此在启用 ActiveX 筛选时会出错：

// BAD PATTERN:Don't do this!

var xhr = window.ActiveXObject

? new ActiveXObject("Microsoft.XMLHTTP")

: new XMLHttpRequest();

自 IE7 以来，Internet Explorer 支持本机 XMLHttpRequest 对象。即使在启用了 ActiveX 筛选的情况下，本机对象仍然能够正常工作。如果未使用本机对象，Web 站点的脚本应尽可能使用本机对象。下面的示例代码展示了如何以可靠的方式创建 XMLHttpRequest 对象：

// Best Practice:Use Native XHR, if available

if (window.XMLHttpRequest) {

// If IE7+, Gecko, WebKit:Use native object

var xmlHttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

// ...if not, try the ActiveX control 

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else {

// No XMLHTTPRequest mechanism is available.

}

使用这个代码示例，站点只有在万不得已的情况下才需要实例化 ActiveX 控件。站点可以尽可能地利用本机对象，确保其功能不会受到 ActiveX 筛选的不必要影响。

许多出现过这种行为的 Web 站点都曾使用旧版本的 JQuery，使用上述不良模式来实例化 XMLHttpRequest 对象。最新版本的 JQuery 1.5.1 已经解决了这个问题，因此我们鼓励 Web 站点开发人员更新到最新版本。

正确显示替用内容

在上文中，我们提到了在 ActiveX 筛选阻止控件时显示类型不当的替用内容可能会给用户造成的迷惑。Web 站点应该使用全新的 API 来确定站点上是否启用了 ActiveX 筛选，以便与未安装 ActiveX 控件或版本过期的情况区分开来。

如果站点确实启用了 ActiveX 筛选，我们为开发人员提供的第一条建议就是不要显示替用内容。这将允许在占位符区域内显示筛选器图标，并能提供前文所述的用户优势。

如果站点仍然希望显示一些替用内容，则可以显示一条自定义消息，告知用户必须关闭筛选才能查看内容。以下示例代码展示了如何利用新的 API 来检查 ActiveX 筛选，并在控件被阻止的情况下显示一条自定义消息：

<object type="application/x-shockwave-flash" data="test.swf">

<script type="text/javascript">

// Best Practice:First detect if ActiveX Filtering is enabled

if (typeof window.external.msActiveXFilteringEnabled != "undefined"

&& window.external.msActiveXFilteringEnabled() == true) {

document.write("ActiveX Filtering has hidden this content.");

        }

else {

// Either the browser isn’t IE, or ActiveX Filtering is not enabled in IE

document.write("Please install the Flash plug-in to view this content.");

        }

</script>

</object>

Web 站点可以利用某些替代方法在页面上显示原始内容。例如，ActiveX 筛选 Test Drive 演示在为站点启用 ActiveX 筛选时显示 HTML5 视频格式的视频。

我们要求开发人员在检测到启用了 ActiveX 筛选时不要将用户转到另外一个 Web 页面。即使新 Web 页面不包含任何 ActiveX 控件，IE 包含的逻辑也会使得其地址栏中显示筛选器图标，而且用户在关闭筛选后还需要导航回上一个页面。如果新 Web 页面位于不同的域中，用户最终可能会为错误的域关闭 ActiveX 筛选。

使用 ActiveX 筛选测试您的 Web 站点

我们所观察到的与 ActiveX 筛选相关的一些站点兼容性问题可通过测试轻松识别和解决。下面的站点给出了一个示例，在启用了 ActiveX 筛选的情况下，该站点的布局会受到影响：

筛选器图标正确地出现在被阻止的 ActiveX 控件的占位符中。结果表明，该站点声明的一个控件的默认尺寸与其实际尺寸不一致。由于 IE 使用默认尺寸来显示页面上的占位符对象，因此尺寸不正确的占位符将导致页面其他部分出现布局问题：

控件的默认尺寸与实际尺寸不一致。Web 页面其余部分的布局取决于实际尺寸。

开发人员应该测试其 Web 站点与 ActiveX 筛选的兼容性，以便识别类似于本文所述的问题。这能确保 ActiveX 筛选仅阻止一个 Web 页面上的 ActiveX 内容，保证用户能够继续正确地查看该页面的其他内容。

合理使用 ActiveX 筛选

自 IE9 候选发布版中发布了 ActiveX 筛选之后，我们接收到的反馈意见帮助我们对此功能进行了合理的补充，使之对最终用户和开发人员更为有用。例如，为 ActiveX 控件的占位符对象添加一个筛选器图标，这有助于向用户表明 ActiveX 筛选已经阻止了该页面上的内容，用户可以通过地址栏中的相同图标关闭筛选。

我们鼓励 Web 站点开发人员遵循本文中分享的最佳实践，保证 Web 站点能够合理利用 ActiveX 筛选。开发人员应该尽可能地为 ActiveX 控件提供对象的本机实现，并将站点更新到 JQuery 1.5.1，这个版本使用了正确的方法实例化本机 XMLHttpRequest 对象。利用新 API 检测一个站点上是否启用了 ActiveX 筛选，并显示更有针对性的替用内容。最后，应该全面测试 Web 站点与ActiveX 筛选的兼容性，识别细微的布局问题。与此同时，我们欢迎开发人员在本文的评论中分享自己的最佳实践。

—Herman Ng，项目经理，Internet Explorer

首个 IE10 平台预览版包括许多新的 CSS3 功能，所有这些功能都在不断演变的 Web 标准中得以实
现在本文中，我们将了解三种 CSS 功能——CSS3 网格布局、弹性框布局及多栏布局。CSS 网格布局和弹性框布局均有助于开发人员为复杂的 Web 应用程序和网站创建布局。多栏布局旨在帮助开发人员创建高级的文本布局，以提高 Web 的可阅读性。这三项新的 CSS 功能可使对 Web 设计人员而言长期存在且一直增长的问题变得更加简单，即，更有效地在众多设备和分辨率下使用屏幕实际使用面积。

CSS3 网格布局

让我们从CSS 网格布局（简称“网格”）开始，Microsoft 最近将该方案提交给 CSS 工作组。网格的核心思想在于用 CSS 将网页分割为一组定义的行和列，然后使用 CSS 根据这些行和列定位元素，并确定元素大小。由于行和列的尺寸可定义为固定的、灵活的或根据内容调整的，因此不管屏幕大小如何，都可以很容易地构建完全填充整个屏幕的布局。

例如，下图显示了一个典型的游戏板，该游戏板已被分割为两列三行，包含多个元素。一些元素需要保持不变，而另一些需要随着浏览器窗口的不同尺寸而扩大或缩小。

有了网格，您就可以从以下标记开始完成此设计。

<div id="grid">
    <div id="title">Game Title</div>
    <div id="score">Score</div>
    <div id="stats">Stats</div>
    <div id="board">Board</div>
    <div id="controls">Controls</div>
</div>

将具有 ID “grid” 的 div 设定为显示：网格的网格容器，并且将各行和列定义为弹性（即，根据可用空间扩大或缩小）或自动调整，可根据放置在行内的最大元素调整行或列的宽度或高度。

#grid {
    display:-ms-grid;
    -ms-grid-columns:auto 1fr;
    -ms-grid-rows:auto 1fr auto;
}

定义网格后，您可以将各个元素放置到特定网格单元中。如以下标记所示，您不仅可以指定将元素放在 CSS 的具体某行或某列中，还可以指定元素应横跨多少行和/或列，指定元素在单元格或单元格范围内是水平对齐还是垂直对齐。可将元素指定为固定尺寸，或指定元素填充其所在单元格的可用宽度或高度。在上述示例中，“board”元素随着屏幕增长，而其他元素（比如“title”元素）则保持固定尺寸。（请注意，由于在使用 IE10 时，这仍是一项新规范，因此以下所有的网格属性都带有前缀 “-ms-”。）

#title { -ms-grid-column:1; -ms-grid-row:1 }
#score { -ms-grid-column:1; -ms-grid-row:3 }
#stats { -ms-grid-column:1; -ms-grid-row:2; -ms-grid-row-align:start }
#board { -ms-grid-column:2; -ms-grid-row:1; -ms-grid-row-span:2 }
#controls { -ms-grid-column:2; -ms-grid-row:2; -ms-grid-column-align:center;

将网格和 CSS3 媒体查询组合，您可以为不同的分辨率、纵横比和屏幕方向确定完全不同的布局。例如，您可以为不同的屏幕尺寸定义不同数量的行或列（例如，为垂直的“竖向”布局定义较多行，为水平的“横向”布局定义较多列），或指定行和列具有不同尺寸。您可以使用 IE10 平台预览版，将窗口的宽度由宽调整为窄，从而利用 Griddle 测试驱动亲身尝试。

此外，由于元素在网格中的位置与他们的指定顺序无关，即，元素位置单纯地由 CSS 指定，而不是由它们在 HTML 标记中的顺序指定；因此很容易根据不同的屏幕尺寸赋予元素不同的排列，或者在某些布局中甚至可以忽略一些元素。例如，您可能希望在针对手机或平板电脑设计的小分辨率上不显示特定工具栏或侧栏，而在针对宽屏、高分辨率的台式机屏幕设计的布局上则希望显示大量内容元素。最重要的是，所有这些不同效果都可以完全仅使用 CSS 实现；由于内容的视觉显示完全与 HTML 隔离，因此无需为移动和桌面设备准备不同的 HTML 文件。

CSS3 弹性框布局

网格适用于自适应布局，但并非唯一可用的选项。在 IE10 平台预览版中，开发人员也可使用弹性框布局（简称“弹性框”），以可流动、与来源无关的方式布置元素。弹性框和网格有许多共同之处：元素均放在父容器内，根据父容器的大小调整元素大小和位置。弹性框和网格之间的重大差异在于，弹性框沿一条轴线（垂直或水平）布置其内容，而网格同时沿行和列布置内容。另外，弹性框的默认行为是沿容器一侧“堆叠”元素，而网格的默认行为则是将元素放在第 1 行第 1 列的“顶部”。

利用弹性框实现的许多行为也可用网格实现，反之亦然；但弹性框最适合于创建各个组件和集合（例如，工具栏、图像集），而网格则旨在创建全页布局，适用于各个元素重叠的组件。

弹性框的基本使用是显而易见。以下示例在开始时将三个按钮（基础媒体工具栏的各个组件）布置在容器 div 中。默认情况下，这些按钮的布局显示为：内联块，这就意味着它们具有固有尺寸，不会随着容器尺寸的改变而改变。这就会导致布局不适应可用空间的空白空间未得到利用。

<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div >

前进

播放

后退

以上标记的结果

有了弹性框布局（即，显示:框），您就可以指定让按钮容器布置其子元素，使得每个子元素平等地分享容器中的可用空间。现在，按钮完全填充容器；且不管容器尺寸如何改变，按钮都会完全填充容器。这种方法对弹性网格单元非常适用——如果外部容器是为填充弹性网格单元而调整尺寸的 div，那么不仅总体布局会随着屏幕大小的改变而改变，而且各个工具栏也会随之改变。

#playControl { display:-ms-box; }
button { -ms-box-flex: 1; }

播放

前进

后退

以上标记的结果

弹性框的另一项有用功能在于能够充当任意数量的项目的容器，尤其是在使用框线属性的时候更是如此。具体地讲，显示：框的容器元素（比如 一个div）集合将自动堆叠该容器中的元素使其朝向容器的一侧（对大部分西方语言而言，堆叠在容器左侧）。如果将框线的属性设定为 multiple，那么在垂直空间容许的情况下，弹性框容器会将内容元素配置在多行内容中。这就意味着弹性容器元素可自动排列其内容，最大程度地利用空间，而设计人员无需了解容器中有多少项目且不必清楚地放置每个项目。

在以下示例中，当容器足够宽时，将相同的五个项目布置在一列中；但是当容器太窄时，将第二列项目创建在第一列项目的下方。当动态数据查询返回未知数目的项目且您希望简单、直接地显示这些项目时，可使用这种方法。

<div id="collectionContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div >
#collectionContainer { -ms-box-lines:multiple; }

CSS3 多栏布局

最后，您可以使用 CSS 多栏布局，将内容布置到网页上的多个列中。印刷行业的报纸和杂志使用这种方法，将内容归类到多个平行列中，这样就更容易逐行阅读和追踪文本。

有了多栏布局，用几行 CSS 就可以将内容归类。例如，将行 “column-count:3” 放置在封闭 div 上，就可快速将下图中的内容归类为 3 列。

<div id="beagleContent">
    <img src="3Beagles.jpg" style="float:right">
    Lorem ipsum...
</div >

#beagleContent { column-count: 3; }

多栏布局提供众多选择，可指定内容的布局方式，包括可以设定固定列数、最小列宽、列之间的间隙大小、列规则，这些都是列之间的装饰性边框。多栏布局还可以指定应该分列的位置，且可以自动平衡列之间的内容，这样所有列都具有相同长度。另外，请注意由于多栏是 W3C 候选建议，因此使用这些属性时无需 -ms- 标签。您可以使用 IE10 平台预览版和其他浏览器尝试 CSS3 多栏布局示例。

您的反馈

我们很高兴在 IE10 平台预览版中包含 CSS 网格、弹性框和多栏，这样开发人员就可以学习、试验并提供反馈。我们将继续与 Web 社区和W3C CSS 工作组就 CSS 网格和其他规范进行合作，并提交随附的测试用例。我们共同使 CSS3 自适应布局成为互操作 Web 平台的另一个可靠部分。

—Chris Jones，项目经理

Internet Explorer 9 标准文档模式可在不同浏览器中启用相同标记和相同脚本。您应该使用 Internet Explorer 9 标准文档模式，以充分利用在ECMAScript，第五版标准（ES5）和IE9的增强DOM编程的新功能。然而,为了保持旧版IE的功能,

，在IE9 的 Quirks 模式、IE7 标准模式以及 IE8 标准模式下所支持的 JavaScript 功能和 IE9 标准模式有所不同。在你的时间日程安排下使用新的ES5新功能，你可以使用这些兼容模式和F12键下的开发工具来迁移你的网站，而网站继续在 IE9 下运行。

在两篇博客文章（Testing sites with Browser Mode vs. Doc Mode 和 IE’s Compatibility Features for Site Developers）中，Marc Silbey 解释了如何利用 Internet Explorer 9 的文档模式。他还讨论了如何利用浏览器模式和文档模式对 IE9 和之前的 IE 版本进行网站测试。在本文中，我们将讨论开发人员需要知道关于IE 9的文档模式中哪些影响 JavaScript 代码。

。

文档模式和 JavaScript 支持

如上一篇文章所述，您（开发人员）使用 DOCTYPE 和 X-UA-COMPUTER Meta 标签或 HTTP Header 来控制 IE 在显示网站时所使用的文档模式。Chakra（IE9 的新 JavaScript 引擎）采用文档模式，确定要支持哪些 JavaScript 功能。下表概括了四种 IE9 文档模式下 Chakra JavaScript 的支持情况。要有关如何设置文档模式的信息，请参见我们的文章 IE’s Compatibility Features for Site Developers 和 Determining Document Mode diagram for IE9。

文档模式	描述
IE9 标准	如果网页使用符合标准的 DOCTYPE 且未指定X-UA-COMPUTER元标签，则默认为 IE9 标准文档模式。在此模式下，IE 支持 ECMAScript, 第五版功能 (ES5) 和 增强的 DOM 可编程性，并消除了 IE8 JavaScript 实施和 ECMAScript（第三版规范）之间的一些主要差异。
IE8 标准	IE8 标准文档模式支持 IE8 中的 JavaScript附加项，从而可实施随后起草的部分 ES5 标准，比如本机 JSON 支持和对 DOM 对象的访问支持。这种模式也支持在 IE8 中进行的更改，修复由开发人员提出的一些重要问题。
IE7 标准	IE7 标准模式支持 IE7 中可用的 JavaScript 功能，包括 IE7 和 IE8 中的 IE7 标准模式支持的微软扩展名。
Quirks	Quirks 模式支持 IE6 的 JavaScript 功能以及 IE7 和 IE8 的 Quirks 模式。

您的 JavaScript 在不同的文档模式中的行为不同。此处的三个代码示例说明,由于我们遵循ES5标准,所提供的不同结果取决于文档模式。要获得其他有关 IE9 的兼容性指南和 JavaScript 功能更改，请参见 Compatibility Cookbook on MSDN、Enhanced Scripting in IE9: ECMAScript 5 Support and More、ES3 Standards Support document 以及 Microsoft JScript extensions to the ES3 standard。

Arguments.caller

IE9 标准文档模式并不支持 Arguments.caller，见ES5 10.6部分。因此，IE9 的 Quirks、Internet Explorer 7 标准和 Internet Explorer 8 标准文档模式将以下代码标注为 “1”。Internet Explorer 9 标准模式发布脚本错误“无法获得属性‘长度’值：对象缺失或未定义。”

function alertCallerLength() {
    alert(arguments.caller.length); // IE9 standards doc mode issues script error
}
function callingFunction() {
    alertCallerLength();
}
callingFunction(1)

间接 Eval

ES5 标准要求间接 eval（通过使用名称而不是使用其他 “eval” 调用 eval()）在全局范围内解析，而不是在本地范围内解析。为使 IE9 和之前的 IE、Quirks、IE7 和 IE8 文档模式版本相兼容，将间接 eval 保持在本地范围，IE9 标准模式根据全局范围来解译这些 eval。

var x = "Global Scope";
var myeval = eval;
function f() {
    var x = "Local Scope";
    alert(myeval("x"));
}
f(); // IE9 doc mode alerts "Global Scope"; other doc modes alert "Local Scope"

字符串对象

在 IE8 和 IE9 中，可为字符串对象增加索引属性。您可以利用 IE8 为所有索引创建这些属性，而不管字符串对象的长度如何。在 IE9 中，您可以创建索引属性，但只是针对大于字符串长度的属性。IE9 也为您提供对字符串本身的索引访问。在以下示例中，我们创建了一个 String 对象，并尝试着定义该对象的阵列索引值。 IE8 和 IE9 兼容文档模式支持我们创建和字符串对象具有相同变量名的数组对象；而 IE9 标准模式则不可以。因此，在 IE9 标准模式下，函数返回 “H-e-l-l-o- -W-o-r-l-d”。在其他文档模式下，函数返回 “-1----5----9-”。

function JoinDemo(){
    var a = new String("Hello World");
    a[1]="1";
    a[5]="5";
    a[9]="9";
    alert(Array.prototype.join.call(a, "-"));
}
JoinDemo();
// IE9 standards doc mode alerts "H-e-l-l-o- -W-o-r-l-d"
// IE8, IE7, Quirks doc modes alert "-1----5----9-"

在不同文档模式中测试 JavaScript

随着您将网站迁移到 IE9 标准文档模式，您会发现一些脚本的行为与其在 Internet Explorer 8 中不同。Internet Explorer 9 中的 F12 开发工具支持您在四种文档模式中测试脚本。通过 IE 的 F12 开发工具更改文档模式将刷新页面，并根据指定的文档模式指示 Chakra JavaScript 引擎重新解析脚本。将代码迁移到 IE9 标准模式时，您可以使用这些文档模式对脚本进行调试。

其他信息

我们一直努力确保 IE9 的兼容文档模式支持我们在 IE8 中为这些模式确定的相同功能。然而，由于 Chakra 引擎不同于 IE8 中设定的引擎，因此必然存在一些差异。Internet Explorer 9 兼容性手册解释了一些主要的差异。简单地说，下列内容受到影响：

• IE8 和 IE9的枚举顺序不同。
• Internet Explorer 9 直接处理具有大量指数的数组元素。
• IE8 和 IE9的数学精确程度有所不同。

如果您遇到其他兼容性问题，我们乐意倾听。请通过 Connect 将反馈发送给我们。

我们也愿意为您提供一些创建的博客文章和 IE 测试驱动演示，解释或展示 Chakra 引入的新功能以及与 IE8 的一些差异。

• Enhanced Scripting in IE9: ECMAScript 5 Support and More 介绍了 Chakra 和 IE9 中当前可用的新 ES 5 功能。
• Exploring IE9's Enhanced DOM Capabilities 解释了增强的 IE9 DOM 可编程性支持，使得 DOM 对象更加类似于本地 JavaScript 对象。增强的 DOM 功能演示展示了这些概念。
• ECMAScript 5 Part 1: Reusable Code 讨论了 ES5 引入的新 JavaScript 对象模型，以及开发人员如何使用新的 Object 反射功能来开发可控、可重复使用的组件。ECMAScript5 Breakout 和 Texas Hold’em 演示也展示了一些概念。
• ECMAScript 5 Part 2: Array Extras 讨论了现已在 Chakra 内实施的一些常见的循环和数组方法。 ECMAScript5 Tile Game 和 ECMAScript5 Arrays 演示了这项功能。

总之，IE9 在不同文档模式下支持不同的 ECMAScript 标准和扩展名。新的 IE9 文档模式支持您根据日程安排来使用新的 ES5功能。我们希望您在调试代码和迁移到 IE9 文档模式所支持的 ES5 和 HTML5 功能时，会认为 F12 是有用的开发工具。

—Gaurav Seth 和 Paul Chapman，项目经理，JavaScript

HTML5 Canvas 和 SVG 是 IE9 中引入的两项令人激动的图形功能。上周在拉斯维加斯举办的 MIX11 大会对这两个功能进行了介绍（请参阅深入剖析 HTML5 <canvas> 和现代化您的网站：SVG 遇到 HTML5）。

这些技术可用于解决现代网络上众多的图形场景。由于 Canvas 带来了众多激动人心的功能，人们往往会忽略 SVG，而在许多情况下 SVG 可能是更好的选择。这里我提供一些关于在何时选择 Canvas、SVG 或二者的组合的想法。

Canvas 和 SVG 总体概述

以下是对 Canvas 和 SVG 的一个总体概述，为关于何时使用一种特定的矢量图形技术的讨论提供了框架。

Canvas 和 SVG 的对比
Canvas	SVG
基于像素（Canvas 在本质上是一个具有绘图 API 的图像元素）	基于对象模型（SVG 元素与 HTML 元素类似）
单个 HTML 元素，在行为上类似于 <img>	多个图形元素，是文档对象模型 (DOM) 的一部分
视觉呈现通过脚本以编程方式创建和修改	视觉呈现使用标记创建并通过 CSS 或通过脚本以编程方式修改
事件模型/用户交互是粗粒度的 – 仅在画布元素上，交互必须根据鼠标坐标手动编程	事件模型/用户交互基于对象，是在原语图形元素上的 – 线条、矩形、路径
API 不支持可访问性，除了画布，还必须使用基于标记的技术	SVG 标记和对象模型直接支持可访问性

SVG 作为一种在内存模型中持久保存的保留模式图形模型而著称。类似于 HTML，SVG 构建一个包含元素、特性和样式的对象模型。当 <svg> 元素出现在 HTML5 文档中时，它的行为类似于一个内联块，是 HTML 文档树的一部分。

Canvas 是一个位图，包含一个即时模式图形应用程序编程接口 (API) 来在它之上进行绘制。Canvas 是一种“即发即弃”模型，直接向它的位图呈现它的图形，然后对所绘制的形状没有任何认知，只会得到最终的位图。

可以这么认为，Canvas 类似于 Windows GDI API，其中您以编程方式向窗口绘制图形，而 SVG 类似于包含元素、样式、事件和基于 DOM 的可编程性的 HTML 标记。Canvas 是过程性的，而 SVG 是声明性的。

场景

以下几节介绍两种技术的技术优势和不足，包括确定一种技术何时适用于给定任务的一种常用方法。从下图中可以看出，每个场景落在从 Canvas 到 SVG 之间的一个范围中，两种技术中间有一个明确的交叉点。

矢量图领域

高保真度复杂矢量文档

高保真度复杂矢量文档已是并将继续是 SVG 的最佳点。它非常详细，适用于查看和打印，可以是独立的，也可以嵌入到网页中。SVG 的声明性特征提供了从数据库到形状的工具、客户端或服务器端生成。

Internet Explorer Test Drive 上提供了一个真实图形演示：

第一幅图显示了图，而第二幅图显示了放大到 1000% 的图

当考虑到观察大型示意图的适用性，但需要下钻到详细信息或出于工程用途打印整个文档时，可缩放的矢量图形中的“可缩放”特征会变得非常清晰。出于这些原因，我们将高保真度复杂矢量文档放在范围的 SVG 端。

混合交叉

用于查看和打印的高保真度文档

SVG 作为一种图像格式

SVG 的另一个常见用途是用于网页内的静态图像。使用目前的高 DPI 显示器，开发人员必须考虑图形的质量。下面的图像表示通过 CSS 设置了样式的可能的 <li> 项目符号图像。下面的图像在外观和文件大小上几乎完全相同。

左侧是 SVG 图形，右侧是它的 PNG 呈现

如果开发人员希望大规模重用该图像，或者如果最终用户使用了高 DPI 屏幕，光栅图像将变得失真，或者需要更大的文件才能保持保真度。

左侧是放大的 SVG 图形，右侧是放大的 4K PNG

因此，SVG 是网页上最简单图像的一种好替换格式。Canvas 没有适用的替换格式可用。

静态 图像

混合交叉

用于查看和打印的高保真度文档

在范围的另一端，Canvas 具有很高的呈现速度，不需要保留所绘制的内容。当首次引入 Canvas 时，开发了许多有趣的实验。我将这些实验划分为 3 种不同的场景。

像素操作

因为 Canvas 专门用于绘制和操作基于像素的绘图面，所以一些 Canvas 实验和展示包括复杂的算法，以实现令人印象深刻的图形效果，比如光线跟踪或滤镜。

下面的示例由 Adam Burmister 编写。该实验通过跟踪光线在一个图像平面上创建了一幅图像，模拟它遇到虚拟物体的效果。

作者本身提供了以下警告：“这会消耗大量 CPU 资源。您的浏览器可能看起来会停止响应。”因此，尽管 Canvas API 能够生成这样的图片，但这可能并不是一个好想法。正如网站作者 Adam Burmister 所总结的，“光线跟踪[是]有史以来最糟糕的 JavaScript 应用。”

其他场景范围的像素操作也可以这么说。下面的函数将一个画布中的绿色像素替换为另一个具有相同大小的画布中的像素。这样的函数可用于创建视频的“绿屏”效果。

function GreenScreenAtoB(a, b) {

var aImageData = a.getImageData(0, 0, a.canvas.width, a.canvas.height);

var bImageData = b.getImageData(0, 0, b.canvas.width, b.canvas.height);

var aPixels = aImageData.data;

var bPixels = bImageData.data;

if (aPixels.length != bPixels.length) {

window.alert("Canvases do not have the same number of pixels");

return bImageData;

    }

var pixelCount = bPixels.length;

for (var pixelIndex = 0; pixelIndex < pixelcount; pixelIndex += 4) {

// grab the RGBA components of each pixel in b

var r = bPixels[pixelIndex + 0];

var g = bPixels[pixelIndex + 1];

var b = bPixels[pixelIndex + 2];

var a = bPixels[pixelIndex + 3];

// if the b pixel is green, replace it with a pixel from a

if (r == 0 && g == 255 && b == 0 && a == 255) {

bPixels[pixelIndex + 0] = aPixels[pixelIndex + 0];

bPixels[pixelIndex + 1] = aPixels[pixelIndex + 1];

bPixels[pixelIndex + 2] = aPixels[pixelIndex + 2];

bPixels[pixelIndex + 3] = aPixels[pixelIndex + 3];

        }

    }

return bImageData;

}

这是一个有趣的实验，但是与上面的光线跟踪示例一样，目前的机器性能会拖后腿。我列举这些示例有一个主要原因：这种像素操作使用 SVG 无法实现。它是两种技术之间的区别性因素。一种技术处理像素，而另一种处理模型。

无论是从简单的矢量图形创建真实的图像还是为视频创建绿屏效果，在大多数情况下，这些图形场景都不适合在如今的网络上进行快速部署。但是，某些场景具有足够的响应能力（比如应用滤镜来删除照片中的红眼）。这些像素操作场景在范围中与画布场景一样位于最左端。

混合交叉

用于查看和打印的高保真度文档

静态图像

高性能（滤镜、光线跟踪器）

Hybrid and Crossover

最有趣的用例不会指明明确获胜者。这些用例可分为两种主要场景：图表/图形/映射和二维游戏。

图表和图形需要矢量图，Canvas 或 SVG 都可以使用。但是，由于 SVG 固有的功能，它常常是更好的选择。

SVG 图表/图形/映射场景

网络上一个流行的图表和图形子集包括：

• 交互式组织图和流程图
• 交互式地图 – 路径查找
• 建筑楼层平面图
• 工程示意图
• 航线或活动场所座位布局
• 一般数据或财务图表（柱状图、条形图、折线图、散点图、环形图等）

对于所有这些，SVG 是首选技术的原因在于：

• 它们可以通过将 XML 转换为 SVG，从现有数据轻松生成
• 静态版本可从工具（包括 Inkscape、Adobe Illustrator、Microsoft Visio 和各种 CAD 程序）导出
• 它们需要准确的用户交互
• 第三方内容提供商可使用 CSS 样式为 Web 作者进行自定义
• 它们需要可访问性

为了更准确地演示，我们看一下在美国地图上选择一个州的场景。

网页上此图显示不出来，请插入该图

上面显示的阿拉斯加州详细地图是公共领域，可在 Wikimedia Commons 上看到。

在 SVG 中，阿拉斯加州使用一个 <path> 元素表示，该元素的“d”特性中包含大约 162,500 字符的地理数据。

<path id="AK" fill="#cdc3cc" d="M 777.5514,1536.1543 C 776.4904,1535.0933 776.7795,1530.0041 777.9416,1529.2859 C 781.3258,1527.1943 787.2657,1532.4522 784.8317,1535.3849 …" />

对于 Canvas，此形状可使用一系列 JavaScript 调用创建：

function drawAlaska() {

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.moveTo(777.5514, 1536.1543);

ctx.bezierCurveTo(776.4904, 1535.0933, 776.7795, 1530.0041, 777.9416, 1529.2859);

ctx.bezierCurveTo(781.3258, 1527.1943, 787.2657, 1532.4522, 784.8317,1535.3849);

    //

// 2,875 more path-drawing directives

    //

ctx.bezierCurveTo(1689.8261, 12.13753, 1689.1395, 12.17333, 1685.8848, 10.52683);

ctx.closePath();

ctx.fillStyle = "#cdc3cc";

ctx.fill();

}

实际上，它需要 2,878 条路径绘制指令（moveTo、lineTo 和 bezierCurveTo）来绘制复杂的阿拉斯加州地图。当然，可以实现此地图的低分辨率版本。怀俄明州和科罗拉多州所需的代码要少得多。 :-)

SVG 基于地图的应用程序通常包含一种涉及到悬停效果、选择、项目之间的缩进和缩放的交互式体验。在使用 SVG 时，比如用于处理鼠标事件，这些操作仅需要轻量型的 HTML 概念：

<path id="AK" fill="#cdc3cc" onmousedown="window.alert('Alaska');" d="M 777.5514,1536.1543 …" />

或者使用 CSS 创建一个悬停突出显示效果：

path#AK:hover { fill:yellow; }

此交互式地图类型的一个示例可以在 Test Drive 演示 Atlas zur Europawahl 2004 in Deutschland 中看到，2004 年德国的欧洲选举结果的可视化。

在 Canvas 中，创建这些效果需要使用事件对象的鼠标坐标对您自己的点击检测进行编码。可以使用任何形状。尽管有 isPointOnPath() API，但它仅适用于创建的最后一条路径。

代码能够并确实以图形库的形式存在，以在图形上启用具体的点击检测，能够正常地使用像素数据来检测点击和悬停。它们也可供 SVG 使用，如果在设计中利用了 SVG 功能，将具有更高的性能。

混合交叉

用于查看和打印的高保真度文档

静态图像

交互式图表和图形

高性能（滤镜、光线跟踪器）

Canvas 图表/图形场景

Canvas 为图表和图形场景提供了自己的空间。要设置此场景的上下文，我们需要了解 SVG 和 Canvas 的性能特征。

有时，一些外部影响因素要求选择一种（几乎）与功能独立的技术。对于 SVG 和 Canvas，有两个主要的区别。

开发人员知识、技能集和现有的资产将在技术选择中扮演着重要角色。如果在创建游戏期间，开发人员拥有深厚的低级图形 API 知识和有限的 Web 技术知识，那么可能的技术选择是 Canvas（稍后将详细介绍）。对于游戏移植，一些工具支持从第三方实现迁移到 Canvas。

如果性能至关重要，常常要求精确到毫秒级，那么有必要对比两种技术的性能特征。这并不意味着 Canvas（通常被视为具有很高的性能）是显而易见的选择。但是，对于具有必须在像素级别绘制的大量数据的应用程序，Canvas 显然是更好的选择。

下面的天气地图不需要较大的表面区域，屏幕上的对象数量非常多。使用 Canvas，无需更新 DOM 即可快速绘制这些对象。

尽管上图完全可以在 SVG 中创建，使用圆圈或椭圆元素表示点，但将数千个元素加载到 DOM 中可能要花费很多时间。无论您是看到大量像素还是图像，这都是表明 Canvas 是要使用的技术的好线索——无论这是天文学、生物细胞运动还是音频调制显示。这里对数据可视化速度的限制是 CPU 速度、Canvas 实现速度和 JavaScript 实现速度。

实时高容量数据表示

交互式图表和图形

用于查看和打印的高保真度文档

高性能（滤镜、光线跟踪器）

混合交叉

静态图像

二维游戏

休闲游戏是我们要探索的最复杂的场景。一些初始观察结果如下：

• 游戏库利用了较低级的图形 API
• 开发人员的游戏行业技能集针对这些较低级的 API 进行了调优
• 许多游戏在很大程度上是基于图像或子画面的
• Adobe 等供应商正在开始支持导出 Canvas
• 休闲游戏通常不需要复杂的点击测试
• 休闲游戏通常没有大量的“对象”

在游戏库中（例如，流行的力学引擎），图形模型是独立的，并且图形成为了一种实现细节。图形几何特征，比如边界、速度、大小和位置都提供给引擎，随后引擎使用速度、碰撞和位置进行响应。图形仅用于在屏幕上获取计算的场景。

图形与游戏逻辑独立的概念在两个游戏中得到了展示，这两个游戏由同一个人开发，旨在分别强调 SVG 和 <canvas>：SVG-oids 和 canvas-pinball。

尽管游戏和演示逻辑是不同的，但二者都利用了相同的力学引擎，该引擎跟踪位置、碰撞、速度和游戏组件的其他力学方面。最后，一个人可以使用 SVG 绘制（或移动）游戏元素，其他人可以使用 Canvas 重新绘制它们。

如今为 HTML5 构建的大部分 2D 休闲游戏都使用了 Canvas，所以我们将此场景放在交叉点上靠近 Canvas 的一端。

2D 休闲游戏

交互式图表和图形

实时高容量数据表示

高性能（滤镜、光线跟踪器）

用于查看和打印的高保真度文档

混合交叉

静态图像

混合场景

休闲游戏属于混合场景，因为它能够利用两种技术的优势。对于轻松的点击检测和用户交互，SVG 几何结构的一个最不透明的层可用于定位元素，而底层 Canvas 可非常快地定位相关图像并提供实时动画。

休闲游戏领域外部越来越多的人发现使用混合场景很有吸引力。当一个场景同时包含生动的动态图形和动画的需要 (Canvas) 以及丰富的用户交互的需要 (SVG) 时，这两种技术都应该使用。一个代表场景就是 The Beauty of the Web 网站上展示的来自我们的一家合作伙伴的 Brain Power 网站。这个 Brain Power 网站（以及 The Beauty of the Web 上的其他特色网站）已发现了此恰当的平衡。

对于 Brain Power 的用户交互和显示部分，该网站利用了更高级的 SVG 几何结构：

<polygon id="SensoryCortex" points="253,80,266,93,…" style="fill:rgba(0,0,0,0)" />

对于实时动画和特殊效果，可以使用 Canvas：

<canvas id="cnvDisplay" width="1920" height="1099" style="position:absolute;" />

结束语

对最新的现代浏览器中可用的现有矢量图技术的分析表明，可以通过一种交互式方式使用标准 Web 技术创建新的场景。

包含丰富图形的 Web

实时高容量数据表示

交互式图表和图形

混合交叉

用于查看和打印的高保真度文档

静态图像

高性能（滤镜、光线跟踪器）

2D 休闲游戏

Web 的持续演化将不断继续，在其核心位置包含更加丰富的图形。我们提供了一种关于将这些技术应用到特定场景的观点。最后，Canvas 和 SVG 都是包含丰富图形的 HTML5 Web 的重要组件。

我们期待听到您如何将这些新 HTML5 技术应用到您的网站。包含 URL 并请通过包含 HTML5 doctype、<!DOCTYPE html> 和使用功能检测（而不是浏览器检测）来了解支持 SVG 还是 Canvas；确保您的页面适用于 IE9。

—Patrick Dengler，高级项目经理，Internet Explorer

ieblog

IE10 Platform Preview 2（与近日公开的 Windows 8 演示版中所见到的 HTML5 引擎相同）现已可供下载。借助此更新，IE10 可继续为站点就绪的 HTML5 技术提供支持，并改善性能：

本视频展示了第二个 IE10 平台预览版的一些 HTML5 技术

借助第二个平台预览版，开发人员可开始利用几种站点就绪的 HTML5 技术，来构建美观的、交互式的、性能强大的、安全性高的 Web 应用程序。您可在此阅读 IE10 开发人员指南中的完整列表：

• 美观的、交互式的 Web 应用程序可更轻松地为 CSS3 定位浮动元素、HTML5 拖放、File Reader API 和Media Query Listeners 等许多新技术提供支持，并为 HTML5 表单提供初始支持。
• HTML5 应用程序的性能得到了全面提高，此外，通过 Channel Messaging、异步脚本支持及其他 Web worker 新技术，高效利用电池寿命，从而提供更好的性能。
• 利用相同标记，为用于 iframe 隔离的 HTML5 Sandbox接受支持，从而改进了 Web 应用程序的安全性。

IE10 延续了 IE9 的传统，让 Web 应用程序能够在无插件的浏览器内发挥更多功能。它同时也延续了卸载工作模式安排至 PC 中最合适的部分，比如图形卸载安排至 GPU，JavaScript 后台编译卸载安排至不同处理器核心。

美观的交互式 Web 应用程序

美观的交互式 Web 应用程序可更方便地利用 HTML5 技术支持的 IE10。例如，IE10 可支持 CSS3 定位浮动元素，从而让文本悬浮于页面图像周围，并为 CSS3 网格、多列和 flexbox 构建首个平台支持预览版。

单击此处尝试定位浮动元素，并查看文本是如何布局于悬浮元素周围，从而获得更自然的阅读体验。

美观始于可靠、一致的解析行为。本 IE10 平台预览版改进了 W3C HTML5 规范的解析，能够反映出开发人员现有望在所有兼容的浏览器中获得相同的行为，即使对于不完全或无效标记也是如此。HTML5 是 HTML 定义无效标记行为的首个版本。HTML5 的分析行为不是依赖于随浏览器不同而不同的“修复”规则，而是以明确的方式指定，从而使开发人员可以完全信任它。IE10 现在可支持 File Reader API 和 HTML5 表单验证，以及为更复杂的选择场景（比如图形编辑器、游戏和通常使用多个图形层的其他应用程序）的高级单击测试提供支持。

本试用显示出当今的浏览器在运行同样的网页时，即便是需要同样标准支持的网页，所呈现的效果也不同。不同浏览器的 HTML5 引擎的质量和正确性大相径庭。为实现互操作性和相同标记的目标，在标准主体开发下的测试套件仍在持续发展，并对 Web 开发人员社区十分重要。本试用同时显示了不同硬件加速实实现的性能差异。

本图显示了 IE10 平台预览版、Firefox 5 和 Chrome 13 中的效果。单击此处试用 Stuff Works 演示版，并查看硬件加速的 HTML5 画布如何与 CSS3 渐变一同运行。

Web 应用程序性能

您可在 Fireflies 试用中了解不同浏览器的其他性能差异。让 HTML5 视频、音频、画布和 CSS3 渐变一同工作十分重要，因为开发人员将在实际 Web 应用程序中结合这些技术。

IE10 是首个支持多项 W3C 工作组生产的全新性能 API 的浏览器，为setImmediate、requestAnimationFrame 和 PageVisibility 的试用显示了 API 是如何让开发人员提高 Web 运行速度和响应能力的，甚至帮助网站在移动设备上更好的利用电池寿命。

Web worker能为 Web 制定一系列新编程场景。利用这些场景，Web 应用程序可通过卸载后台运行的复杂的 JavaScript 提高响应能力。 例如，普通游戏可能为 Web worker内的“计算机玩家”运行逻辑，而用户则选用他们的逻辑。本测试驱动（链接）显示了卸载从页面到Web worker工作的性能优势。（注意：FF5 不支持 Channel Messaging，这种技术的附加功能，测试驱动器可以使用更多功能。

）

Web 应用程序安全

此 IE10 平台预览版现在支持 HTML5 沙盒和 iframe 隔离，这是 Web 应用程序安全的一个重要组成部分：

单击此处试用 HTML5 沙盒演示版，请注意，Firefox 5 不支持此功能。

我们已向 W3C 工作组通告了关于 Web Worker（链接）一个方面的设计的具体隐私问题（链接），以及对解决此问题的一项建议。

展望未来

开发人员将能够使用 IE10 改进的 HTML5 支持开发更加美观的网站和应用程序（除了这些或这些）。随着不同的浏览器支持开发人员使用相同的标记来实现具有良好性能的相同结果，我们可以全面实现 HTML5 应用程序的承诺。最后，我们向 IE 测试中心发布了 270 多项新测试，并将它们提交给了标准机构。

使用平台预览版，开发人员和技术爱好者可试验新技术并提供反馈，无需对哪些技术是网站就绪的和哪些是实验性的存在疑虑。此方法使技术社区能够在任何用户处于风险之中前解决安全问题（比如上面的隐私问题或这个问题），最大程度减少因重新编写面向用户的网站而浪费的精力。此文章 HTML5, Site-Ready and Experimental 提供了关于此主题的更多信息。例如，对 FileAPI 的初始支持始于 HTML5 实验室；基于这里的反馈，我们已将它添加到了 IE 平台预览版。

因为此方法能够产品化 Web 技术，所以 Microsoft 将在它发布之后 10 年内为 IE10 提供支持，履行与 Windows 本身相同的产品生命周期承诺。此博客文章（链接）描述了一些场景和客户，这对于它们至关重要。

我们会继续建议开发人员使用功能检测来适应众多不支持特定功能的浏览器（比如移动设备上的浏览器）：

// check if this browser supports channel messaging

if (window.MessageChannel) {

/* Use channel messaging in this browser */

}

您可以在此处的 IE 10 开发人员指南中找到供开发人员使用的新功能的完整列表。我们期待继续服务于社区，并聆听您的反馈。

Dean Hachamovitch

备注：欢迎开发人员试用第 2 个 IE10 平台预览版本中改进的 innerHTML 支持。

2011 年 6 月 24 日上午 10:43

Velocity 2011：现代化 Internet Explorer 的性能影响

为了实现 HTML5 应用程序的承诺，浏览器必须要有极好的性能。现代化 Internet Explorer 9 已经改变了网站的可能状态，并明显改善了当今用户使用的 HTML4 的性能。为了演示在近日举办的 Velocity 2011 会议上 IE9 实际性能的成果，我们发表了有关现代化 Internet Explorer 使其作为一项交互式 HTML4 Web 应用程序的演讲。

查看完整的 Velocity 2011 演示文稿：现代化 Internet Explorer

本实际场景是体验当今众多网站的可能性的好方法，这些网站在过去二十年利用 HTML4 基于标准的标记开发而成，并且浏览器利用完全硬件加速，因而无需使用 HTML5 重写网站。

本站点使用当今网站中相同的 HTML、CSS 以及 JavaScript 编码模式，在浏览器之间一致地工作。与此同时，本站点也显示了我们在现代化 Internet Explorer 中所采用的系统方法的性能优势。

当您与 Internet Explorer 9 中的演示文稿进行交互时，您将发现实时体验与其说是像 Web 应用程序，不如说更像本机的 Windows 应用程序。幻灯片切换平稳而流畅。您可在演示文稿章节间迅速滚动（按住键盘上的方向键）。对于您指令的响应将很少低于 100%。

Velocity 会议由 O’Reilly Media 媒体主办，并由 Steve Souders 和 Jesse Robbins 主持，云集了整个行业的 2000 多名开发人员，以了解社区专家的最佳实践，并在如何让 Web 作为一项产业更快速的整合方面开展协作。

这是自 Internet Explorer 9 今年三月发布以来的首次 Velocity 会议，也是我们第一次与 Velocity 社区分享现代化 Internet Explorer 的性能成果。在去年的 Velocity 会议上，我们刚刚发布了第三个 IE9 平台预览版。之后我们又发布了 7 个版本，我们在一年时间所取得的性能改进让人叹为观止！

性能分析

借助 Windows Performance Toolkit，我们可以度量 Web 应用程序的运行时性能，了解它们如何使用底层硬件，并比较不同浏览器之间的性能。以下 CPU 图表显示了我们的 Velocity 2011 演示文稿要求的在 IE8 和 IE9 中绘制演示文稿并制作一帧动画的所用时间。这些结果是从问世三年之久的 戴尔Precision工作站 （3.0 GHz 英特尔奔腾双核，4GB 物理内存，NVIDIA 的GeForce 8600 GT的，100GB 7200 RPM 驱动器，Windows 7）中得出的。体验将基于 PC 配置而略有不同，但该整体模式能够代表 Internet Explorer 9 的客户体验。

如您所见，IE8 需要 1.251 秒来制作演示文稿的一帧动画。该进程（以蓝色表示）始于基于 JavaScript 计时器唤醒 IE8，并处理未完成的事件。IE8的 JavaScript 解释器（以黄色表示）随后将计算每个幻灯片的下一位置，并利用这些位置信息更新 DOM。接下来，IE8 布局引擎（以绿色表示）将利用 IE8 基于 CPU 的图形系统于最终在屏幕上绘制幻灯片（以粉色表示）前在屏幕上移动幻灯片。

利用 IE9时，该结果的耗时令人震惊，仅用了 9 毫秒（即 0.009 秒，比 IE8 快了 139 倍）。您将发现 CPU 上将产生同样的运行时模式，而无论其多么接近本机速度。由于系统的内存压力更小，待处理的事件更少，因此 IE9 能够更迅速地处理未完成的事件（以蓝色表示）。全新的 Chakra JavaScript 引擎已在本机集成至 IE9，将执行本机编码以计算幻灯片的新位置，并更新 DOM（以黄色表示）。全新的 IE9 布局引擎将交互式地移动幻灯片（以绿色表示）。最后，GPU 将在屏幕（以粉色表示）上绘制内容。

感谢 Velocity Web 性能社区为我们提供了又一场愉快的会议。我们非常感激你们为改善 Web 性能所做的一切努力。社区将继续发展壮大，并与我们一起不断改变 Web，实现其潜在价值。

—Jason Weber, Internet Explorer 性能主管