预览IE10支持的HTML5特性

  最近团队来了一些新人,有些有一定工作经验,是以高级工程师/架构师身份进来的,但我发现他们大部分人思维偏应用和细节,抽象能力弱。所以作为团队技术培训的一部分,我整理了这篇文章,希望对他们树立正确的架构设计思维有帮助。我认为,对思维习惯和思考能力的培养,其重要性远远大于对实际技术工具的掌握。

  最近团队来了一些新人,有些有一定工作经验,是以高级工程师/架构师身份进来的,但我发现他们大部分人思维偏应用和细节,抽象能力弱。所以作为团队技术培训的一部分,我整理了这篇文章,希望对他们树立正确的架构设计思维有帮助。我认为,对思维习惯和思考能力的培养,其重要性远远大于对实际技术工具的掌握。

  几乎所有企业信息系统的实现成本都超过了实际应该花费的数量。如果你拥有数百或数千个复杂的应用程序,将陷入以应用程序为中心的困境。在“Software Wasteland”一书中,Dave McComb探讨了导致应用程序开发出现浪费的原因、如何对变更成本进行可视化,以及以数据为中心将如何帮助减少浪费。

  

  最近团队来了一些新人,有些有一定工作经验,是以高级工程师/架构师身份进来的,但我发现他们大部分人思维偏应用和细节,抽象能力弱。所以作为团队技术培训的一部分,我整理了这篇文章,希望对他们树立正确的架构设计思维有帮助。我认为,对思维习惯和思考能力的培养,其重要性远远大于对实际技术工具的掌握。

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

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

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

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

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

  IE10预览版引入了对File API的支持。File API来自于w3c的草案,表示web应用中的文件对象,并且可以编程选取它们并访问数据。File API目前正在被W3C Web应用工作组标准化。通过该API,web开发人员可以在客户端机器上以安全地方式访问本地文件,而无需扩展或者插件。

  File API支持浏览器在用户授权的情况下读取和处理文件。此外,File API在无插件的情况下支持更流畅的文件上传体验,包括上传进度的状态反馈等。

  其他文件相关的改进包括带有文件类型过滤的多文件上传。在下例中,多个GIF或者JPEG文件可以被用户选择:

  IE10预览版增加了对新HTML5 输入类型和属性的支持。这些支持帮助开发人员可以通过很少的脚本来快速、简便的提供用户提示和输入验证。在HTML5的输入类型和属性出现之前,检查手机号码没有包含字母,或者验证邮件地址正确输入,都需要开发人员编写额外的代码。HTML5客户端表单和输入验证帮会组开放人员关注其他任务而不是构建验证函数。

  required属性表示该元素必须填写值才能提交。该属性能够用于text、text area、URL、email、select、checkbox或者radio button等元素。这是一个Boolean属性。当用户的鼠标悬停在required区域时,他们会看到相应的必填提示,如果设定了title属性,那么会显示该值。

  如果用户尝试在不填写该区域的情况下提交表单,他们会收到错误信息,而且键盘焦点会置于为填写的区域中。

  min、max和step属性适用于input type=number。min和max定义了数据的最小值和最大值。step属性定义了开发人员允许的跳跃值。例如,如果min=0,step=1,那么0、1、2、3......是允许的。如果min=1.1,step=1,那么1.1、2.1、3.1......是允许的。下面的例子展示了输入区域要求0到10之间的偶数。任何此范围之外的数据或者奇数都不能提交,而且会显示错误消息。

  IE10预览版完全支持HTML5的解析算法,不断完善与其他浏览器的一致行为。这些努力包括支持SVG-in-HTML、HTML语义元素、保留未知元素的结构和改善对空格的处理。

  IE团队在HTML解析器上的目标是让所有的HTML在跨浏览器中解析行为一致。这可能是因为HTML5是第一个完整定义HTML解析规则的标准,细致到最边缘的情况和错误条件。即使HTML标记是无效的,HTML5仍然定义了如何解析它,IE 10遵循了这些原则。这种跨浏览器的一致行为使得开发人员在创建应用解析DOM元素时,不必把过多精力花费在单独处理IE的“异常”行为。下面的解析例子展示了这些改进中修补的部分情况。

  除此之外,因为早期IE的一些特性无法与HTML5解析兼容,它们已经从IE10预览版中删除。用户在使用IE10的legacy compatibility模式访问依赖这些陈旧特性的网站时不会出现问题。通过这种方式,现在正常运行的网站即使没有时间和资源来更新自己,那么网站依然可以在IE10中工作。

  如果需要区分浏览器,请使用feature detection,例如下面的代码示例:

  这种新式判断方式逐渐成为兼容性开发的主流,其优点在于不再依赖于条件注释,而是通过判断所需特性本身是否存在来做进一步的处理。

  IE10预览版支持沙箱属性,确保对包含不可信内容的iframe元素的安全限制。这些限制通过防止不可信内容执行导致潜在恶意行为的操作提高安全性。

  当sanbox属性在iframe元素中指定时,iframe元素中的内容称为被置于沙箱中。沙箱中的iframe元素,如下行为受到限制:

  进出worker线程的所有通信都通过消息管理。主worker和其他worker都可以利用postMessage发送消息,并利用onmessage事件监听响应。消息的内容作为事件的data属性发送。

  消息内容和超时值在表单中指定。当用户点击提交按钮,脚本把两个值传递给worker线程。为了防止页面在新的HTTP请求中提交表单值,事件处理器也调用了preventDefault函数。请注意你无法发送对DOM对象的引用给worker线程。Web Workers对它们能够访问的数据做了限制。只有Javascript原始数据类型,如Object或者String值允许。

  通道对象包含port1和port2两个端点。通常情况下,一个端点口作为本地端口,另一个发远程窗口或者worker线程。端口也可用于worker线程之间的通信。

  同样,你可以通过postMessage发送端口给worker线程,如下:

  端口数组在事件的port属性中发送。端口可以使用一次并关闭,也可以保存到本地重复使用。下面的例子显示了worker线程如何接收和使用端口。

  端口收到后,进一步的通信利用postMessage和onmessage事件实现。下面的代码定义了事件处理器并发送利用通道端口发送消息。

  本文只是汇总了IE10预览版对HTML5特性的支持,未来IE10正式版的具体情况我们还要拭目以待。长久以来,IE因其“我行我素”的风格受到Web开发人员的诟病,如今随着HTML5的标准化进程推进,IE团队也在努力追赶时代的脚步,特别是在Chrome和Firefox通过快速发布的方式抢占浏览器市场份额的严峻形势下,IE10的特性成为社区关注的焦点。感兴趣的读者可以从这里下载IE10平台预览版,并通过微软的Test Drvie项目中查看HTML5在IE中的演示程序。

相关阅读