预览IE10支持的HTML5特性

从IE8开始，微软就逐步在浏览器中增加对HTML5的部分支持，如今IE10已经推出了几个预览版，Web开发人员关心的是在IE10中，哪些HTML5特性获得了支持，由此会影响到技术选型和职业发展等重要问题。在本文中，我们根据微软发布的相关特性梳理一下IE10对HTML5的支持情况。

\

目前，IE10预览版支持的HTML5特性可以概括为以下几点：

\

• 异步脚本执行（Asynchronus Script Execution）\
• 拖放（Drag and Drop）\
• File API\
• 表单验证（Forms Validation）\
• HTML5解析（HTML5 Parsing）\
• 沙箱（Sandbox）\
• Web Workers\
• 通道消息（Channel Messaging）\

下面我们来详细了解一下各个HTML5特性的支持情况。

\

异步脚本执行

\

随着Web 2.0技术的发展，浏览器端脚本承载了越来越多的计算任务，这对于传统上单线程运行的浏览器来说，遭遇了性能的瓶颈。用户在碰到类似的网页时，经常会看到类似“脚本运行缓慢，是否继续运行”的提示框。为此，HTML5考虑到了Web开发人员的需求，提供了一些解决方案。其中我认为最重要的两个分别是async属性和Web Workers（稍后提到）。

\

script元素的async属性允许相关的脚本与页面的其他部分异步加载和执行。也就是说，脚本可以在后台加载和运行，而不影响页面的解析工作。对于包含密集处理脚本的页面来说，async属性能够显著提高页面加载的性能。

\

async属性是W3C HTML5标准的一部分，设计的应用场景是：不依赖于某个脚本，但是该脚本仍然需要尽快执行。在微软的文章中举了这样一个需要async属性的例子：

\

\

Lilah的个人博客使用了大量基于脚本的小组件。这些组件用于增强访问者的体验，但是她的页面在不加载这些组件的情况下也能正常运行（支持禁用脚本的浏览器用户）。目前，她在HTML文件的顶部加载所有小组件，但是读者抱怨说页面加载时间太长，因为脚本执行的缘故。她尝试把脚本移到页面的底部来提高速度，但是由于小组件内容太多，这种修改过程太繁琐。她真正想做的是让这些组件尽可能快的加载，但是不要阻碍页面上的其他内容。经过快速搜索后，她发现HTML5的async属性符合自己的需求。通过把所有基于脚本的小组件放在一个外部文件中，她可以在基于脚本的功能增强和性能之间取得更好的平衡：
\\u0026lt;head\u0026gt;
\    \u0026lt;title\u0026gt;Lilah's Blog\u0026lt;/title\u0026gt;
\    \u0026lt;script async src="widgets.js"\u0026gt;\u0026lt;/script\u0026gt;
\\u0026lt;/head\u0026gt;

\

\

IE10的预览版支持script元素的async和defer属性。defer属性在早期的IE中就被引入，那么这两个属性在用法上有什么区别吗？微软给出了四种可能的组合（无论是async还是defer属性，都必须在src属性存在的情况下才起作用），请读者仔细地体会async和defer之间的细微差别：

\

\

\u0026lt;script src="widgets.js"\u0026gt;\u0026lt;/script\u0026gt;	脚本立即执行，页面等待脚本完成之后再继续解析。这种方式会显著降低页面加载性能。
\u0026lt;script async src="widgets.js"\u0026gt;\u0026lt;/script\u0026gt;	\ 脚本下载与页面解析异步进行。脚本在下载完成后执行。 \
\u0026lt;script defer src="widgets.js"\u0026gt;\u0026lt;/script\u0026gt;	页面完成解析后脚本再执行。
\u0026lt;script async defer src="widgets.js"\u0026gt;\u0026lt;/script\u0026gt;	async优先，忽略defer属性。这种方式可以帮助开发人员在支持async属性的浏览器中使用async，在不支持async的浏览器中退化为支持defer。

\

HTML5拖放(Drag and Drop)

\

拖放功能在桌面客户端软件中应用十分普遍。HTML5标准对拖放做了规定，IE和之前的版本支持dataTransfer对象和拖放图片、超链接、文本的事件。IE10预览版对所有元素增加了draggable属性，并且支持把一个或多个文件从桌面拖放到网页上。draggable属性支持你将任意HTML元素设为页面可拖放的。它提供了如下状态：

\

\

draggable = 'true'	该元素可拖放。
draggable = 'false'	该元素不可拖放。
draggable = 'auto'	该元素遵循默认的浏览器行为（文本、超链接和图片可拖放，其他元素不能）。

\

例如，下列代码支持用户拖放元素。

\

\

\u0026lt;button id=\"mybutton\" draggable=\"true\"\u0026gt;Drag me\u0026lt;/button\u0026gt;
\\u0026lt;img src="photo.png" draggable=\"true\" /\u0026gt;
\\u0026lt;div id=\"mydiv\" draggable=\"true\"\u0026gt;Moveable text\u0026lt;/div\u0026gt;

\

\

当用户拖动一个可拖放的元素时，IE10预览版随着拖动的光标移动显示一个元素的虚影。draggable属性是不可继承的，因此元素的子元素不会自动变成可拖放的。

\

除此之外，dataTransfer对象的files属性支持你把文件从桌面的文件夹中拖放到网页上。这种方式能够减少一些应用，如邮件客户端，把附件拖放进邮件内容中，或者在图库页面中添加照片。这种从桌面端到Web端的无缝交互无疑是Web开发的一大亮点。

\

下面的事件监听器和dropHandler函数展示了如何创建一个网页区域让用户拖放文件上去。其中的“dropspot”可以是div、image，或者其他元素。dragover和drop事件调用了doNothing() 函数避免默认的事件处理和冒泡，否则可能会导致不可预知的结果。

\

\

// this function runs when the page loads to set up the drop area
\function init()
\{
\ // Set the drop-event handlers
\ var dropArea = document.getElementById(\"dropspot\");
\ dropArea.addEventListener(\"drop\