HTML5FishBowl

                                           解读IE10及IE10+HTML5开发新机遇

        2011年4月13日，微软在其召开的MIX11技术大会上又迫不及待地发布了IE10浏览器的首个平台预览版，并宣布面向公众开放免费下载,随后陆续发布了预览2、3...6版，IE10在硬件加速、数据处理速度、网站页面打开速度上都有了提升，在页面处理和视觉处理功能上也进行了加强，在用户最关心的用于隐私保护方面也得到了升级,比如:使用"禁止追踪"功能来,来防止通过Cookie获取用户信息。总结IE10新版本优势：

优势一：一个点击动作就可打开常用网页

        启动后，新的浏览器将默认占据整个屏幕，一个点击后就会带你到个性化主页（和iGoogle个性化主页非常类似）和键入网站地址的导航栏。同时，在屏幕上会显示你常用的网站以及自己定制的网站。

优势二：图像显示速度将超级快

        微软已经参与帮助建立起了HTML5的网页标准（其它公司包括Google、Mozilla、HP、诺基亚以及Opera等），IE10将具备微软所声称的“硬件加速”功能，这意味着将给予IE更多的计算处理能力。同时，才采用HTML5技术，将给视频以及游戏带来更快的浏览体验。

优势三：让你更容易的分享网页

        为了让搜索、分享网页以及设置这些操作更简单，微软专门设计了一个叫“Charms”的按钮组合，这种处理方式也用在所有的Metro风格APP上。其分享功能就像现在的分享扩展，让你可以更容易在不离开浏览器的情况下通过不离开浏览器的情况下通过邮件或者直接分享网页。这种功能就像现在Google的Chrome浏览器，直接点击就可完成整个分享动作

        IE10另外一个值得注意的是IE10在Win8下的不凡表现,IE10为Win8平板带来一流体验, Win8平板所使用的Metro界面给IE10提供了一个最佳平台，IE10不仅能够带给用户更顺畅的触控体验，还能让用户更快更安全的上网浏览。Metro风格的IE10提供给用户沉浸式的浏览体验，Win8平板用户只需用手指轻点轻扫就能实现刷新、前进、后退等基本操作，IE10不仅是Win8上速度最快的浏览器，各种操作切换自如，性能一流支持多点触控、HTML5、CSS3等特性(后面详述)，IE10为Win8平板触屏的使用体验提供了一个绝佳的环境。

                                                                    

Win8平板上使用的IE10浏览器

        令开发者值得兴奋的是IE10将继续支持HTML5和CSS3,据说网络开发员最常用的两款CSS3指令即Gradients和Flexible Box Layout都已经成为IE10的组件。 实际上，微软已经制作了一些演示动画来展示IE10中的窗体布局和Gradient功能。

1、IE10对HTML5的支持

        随着业界对HTML5的热议，很多用户也开始关注这个新的Web标准。说到HTML5，大多数人首先 想到的或许是HTML5视频。不过，HTML5带来的不只是新的视频Web标准，它还引入了许多元素和属性，将对未来的Web方向产生巨大的影响。

如今很多网站已经开始试着推广HTML5视频，越来越多的网民接触到HTML5，那么你的浏览器对HTML5的支持性如何呢?日前一个测试 HTML5能力的测试网站正式上线，用户只需在地址栏中输入http://html5test.com/，就可以获得所使用的浏览器的测试得分。

       在我们进入Win8和IE10对HTML5的支持细节之前，很值得回顾一下Windows8的一些概要。Windows8代表微软在策略上的一个大的转变，因为它使得Web技术成为Windows原生应用的首选。用Javascript、HTML、CSS开发的应用可以被构建为Windows原生应用了。

       Windows的图形、IO、设备核心服务访问，JavaScript都有和.NET以及C++的等效绑定。微软的消息是你可以使用web技术构建所有的Windows原生应用。下面笔者对IE10、Google chrome、Opera、Firefox浏览器进行HTML5跑分，测试结果如下：

IE10.0.9200 HTML5跑分测试                                 

IE10.0.9   HTML5跑分测试

                                                         

WP8最新IE10 HTML5的测试报告 

Google Chrome  24.0.1312.52 m浏览器

                                       

GoogleChrome HTML5跑分测试

Opera 12.12 浏览器测试

|                                 

Opera12 HTML5跑分测试 

Firefox 17.0.1浏览器

                                      

Firefox17  HTML5跑分测试 

2、IE10 对HTML5支持评测结果

        IE10里面的新特性有哪些呢？太多了，明显的部分包括UI元素和特效。IE10预览支持几乎所有最近三年引入可视化HTML5和CSS3特性。IE9微软已经注意了几个方面能力的提升如主要是硬件加速、画布等几个特性，但是IE10引入更多：

CSS转变：2D和3D高效平滑转换。3D转换和抗锯齿很明显好于许多其他的浏览器。还有转换的平滑度给人印象深刻，可能是硬件加速的原因吧

CSS动画：完全支持WebKit语法，这让我们很机动，因为这意味着Sencha Animator的动画在IE10上运行起来很容易，只需要简单的查找替换（webkit替换为ms）即可

CSS3阴影：文本和盒子都支持（还包括插入物阴影）。合并阴影效果和其他特效将完美无瑕

CSS3倾斜：完全支持新的webki/mozilla语法，允许圆形和椭圆放射倾斜

        这仅仅是一个开始。还有web workers、websockets、web fonts、Indexed DB、SVG滤镜、flexbox布局等。好像只有图片边框没有实现。

IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。(http://msdn.microsoft.com/en-us/ie/gg192966)

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

• 脚本同步——script标签的async属性，用来定义脚本是否异步执行
• File API
• History
• Parsing
• 表单验证(form validation)
• progress和range控制——其实也可以看作HTML5表单中的功能
• web workers
• web sockets
• 拖拽(drag and drop)
• 应用缓存——application cache，也就是离线存储，不过需要注意的是W3C更新了离线存储配置文件的扩展名，之前是ooxx.manifest，以后要用appcache扩展。
• spellcheck
• 频道通信(channel messaging)

其它

• Indexed Database
• Web performance API
• SVG 滤镜效果

嗯，新东西很多，看起来还是很给力的。需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

3、IE10对JavaScript处理方面性能优越

我们不妨找一台带独立显卡的 PC 体验一下鱼缸速度测试 (测试地址:http://ie.microsoft.com/testdrive/Performance/FishBowl/)

                             

         通过测试我们可以看到 IE10 对图形图像和 JavaScript 处理方面的性能优势，有了高性能的呈现，那么对于富用户体验的 HTML5 交互式网站而言，无疑是流畅体验的一种保障。

5、IE10多任务性能测试表现不错

                                 

        IE10也有一些针对触摸接口的扩展，控制元素滚动、移动、缩放。如，-ms-content-zooming CSS属性可以控制可缩放元素、-ms-scroll CSS属性可以滚动行为。这些看起来还不是标准行为，所以能看到微软起草覆盖这些新特性也是件好事。

6、当然IE10也有不足，还缺少些东西？

1）IE10不支持WebGL

制作HTML5游戏《Construct2》的开发商Scierra今天表示IE和竞争对手Chrome和Firefox在运行相同的HTML5游戏的时候明显要比别人慢一拍。

                                    

        在Scierra随后的博文中称主要是因为IE 10并不支持WebGL API，所以导致HTML5的性能方面受到了影响，在运行相同的游戏的时候Firefox是IE10运行速度的8倍，而Chrome是IE10的22倍。

        另外还有好几项HTML5技术没有出现在IE10里面，基于微软平台策略考虑，他们可能不会再出现在IE10里面了，如:3D图像，web开发者智能使用JavaScript绑定Windows Direct图形APIs并且只能将他们的应用作为Windows应用发布了。相应的媒体图像和设备APIs也永远不会出现了。这些就是微软希望你通过原生绑定来毁灭的 APIs。

2）HTMl5表单支持欠佳，对HTML5表单属性支持115向测试中，IE10仅支持57项，而对比Google Chrome则高达95项。

7、IE10 能给消费者和开发者带来什么？

       作为消费者的我们，可以通过 HTML5 获得一种轻量、明快的无插件浏览体验，视频、音频和动画均不需要使用任何插件，直接通过浏览器呈现。而 IE10 会继续利用 GPU 资源加速处理这些多媒体和 JavaScript，让浏览体验变得更加快速自然。上图展示的就是一个 cnBeta 新闻站点利用 HTML5 等现代Web 技术开发出来的新闻阅读体验，该网站在使用 Win8 UI 风格的 IE10 打开之后体验更佳，带给用户专注的沉浸式用户体验。

         这幅图展示的则是一个基于 HTML5 的网页版游戏——割绳子，它的用户体验毫不逊色于桌面版的应用程序，或者 Win8 UI 风格的、从应用商店下载的割绳子 App.

 

        上面这幅图展示的也是一个网站应用，通过浏览器访问，基于 HTML5，在这里，您可以把照片自然地铺开在桌子上，供您把玩和欣赏。该应用着重展示的是触控场景，通过它，您可以用手指轻松将照片铺开、缩放和旋转， 您可以体验到自然人机交互带来的乐趣。当然，照片应用只是一个例子，生活中其实还有很多可以用触摸作为交互手段的场景，特别是网页游戏。微软推出的 MS Pointers API 让您的触控开发起于一个全新高度，Pointer 事件封装了触摸、数字笔和鼠标的输入，有助于轻松构建不依赖于硬件设备的交互方式的体验。

        "HTML5增加了大量提升用户体验的功能标准：canvas 元素可以让开发者在一个特定区域内绘制各种复杂图形，同时可以用 JavaScript 控制你所绘的图形的动效，使得非 flash 的丰富的视觉效果成为可能，用户在移动端和 PC 端可以享受到一致的视觉体验；

        HTML5对于开发者来说，是一个新的机遇，也是一份新的挑战。从现在的趋势看，Web 2.0 时代的网站已经朝着应用程序的趋势在发展，只不过现有的技术不能很好地满足设计者对于浑然天成的网站效果的追求，也不能带给用户真正完好统一的用户体验。踏入 HTML5 开发的园地，我们不仅可以开发出高质量的、内容精美的网站，更可以编织未来，编写新的基于互联网的 HTML5 应用程序。

        针对 HTML5 的开发，如果您选择 IE10 作为一个平台，那么正式版的 IE10 已经能够为您的开发提供卓越的支撑。IE10 对 HTML5 的支持已经该进得相当好了，多点触控技术可为用户带来新的自然体验，同时支持多点触控和多种触控方式的 MS Pointers API 为您开发触控友好的网站提供了捷径，IE10 也使用了速度最快的 JavaScript 引擎，同时支持硬件加速，再有就是微软 Win8 上桌面版的IE10 同 Win8 UI 风格的 IE10 一起实现了PC 与平板浏览的体验一致。这从平台的层面，为您步入 HTML5 开发扫清了一些障碍。另外，微软也已通过一些案例的解读和文档的支持，为您扫除了一些头疼的兼容性方面的障碍，例如如何兼容现有网站，如何在用户使用旧版 浏览器时，HTML5网站自动进行优雅的降级（一样具备良好的用户体验）等等。