html5和webkit调研报告.docx

1、html5和webkit调研报告HTML5和 Wekbit调研报告（2011年4月）武汉必联网络技术有限公司一、HTML5介绍HTML5草案的前身名为Web Applications 1.0，是在2004年由WHATWG提出，再于2007年获W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作，仍须多年的努力。目前Firefox、Google Chrome、Opera及Safari（版本 4 以上）已支持HTML5。HTML 5提供了一些新的元素和属性。其中有些是技术上类似和标签，但有一定含义，例如和。这种标签将有利于

2、搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如和标记。一些过时的HTML 4标记将取消，其中包括纯粹用作显示效果的标记，如和，因为它们已经被CSS取代。1.1、HTML5 新增元素如图1.2、浏览器对html5支持情况操作系统浏览器支持度WindowsInternet Explorer 6不支持如果安装了Google Chrome Frame，支持HTML5Internet Explorer7不支持同上Internet Explorer8不支持同上Internet Explorer9支持(mp4,webm*)*如果安装了VP8解码器Fire

3、fox 3.5不支持Firefox 3.5, 3.6支持（ogg）Firefox 4支持（webm,ogg）Chrome 3不支持Chrome 3, 4, 5支持（webm,ogg）Chrome 6支持（mp4,webm,ogg）Opera 10.5不支持Opera 10.5支持（ogg）Opera 10.6支持（webm,ogg）Opera 11支持（webm,ogg）Safari 3.1, 4, 5支持（mp4）MacSafari 3.1不支持Safari 3.1, 4, 5支持（mp4）Firefox 3.5不支持Firefox 3.5, 3.6支持（ogg）Firefox 4支持（we

4、bm,ogg）Chrome 3不支持Chrome 3, 4, 5支持（mp4,ogg）Chrome 6支持（mp4,webm,ogg）Linux同上Mac同上MaciOS(iPhone,iOS 3,4)Safari支持（mp4）早期版本（iOS 1,2）不支持HTML5视频(iPad, iOS 3.2) Safari支持（mp4）AndroidAndroid 2.1, 2.2支持（mp4）Android 2.3支持（mp4）注释：ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

5、。1.3、浏览器市场排行美国互联网流量监测机构Net Applications今天发布了2011年2月份最新浏览器市场占有率及排行统计数据，统计结果显示，2011年2月，微软IE浏览器全球市场份额有所增长，由1月的56%上升到56.77%，相信这一增长与IE9 RC版的发布不无关系，而伴随着3月份IE9正式版的发布，相信IE浏览器全球市场份额将会进一步的提高。Net Applications统计数据还显示，今年2月份谷歌Chrome浏览器全球市场份额再次上升，由1月份的10.7%增至10.93%，虽然说增幅不大，但长期以来Chrome可谓稳扎稳打，市场份额的持续增长是其他浏览器都没有的。也许是

6、厌倦了没完没了的Beta版，有一部分用户在一月份选择放弃了Firefox浏览器，2月份市场占有率为21.74%，相较1月份的22.75%下降1.01%。不知道即将来临的Firefox 4.0 RC版能否帮Firefox挽回一些市场份额呢？苹果Safari相应市场份额由1月的6.30%增至6.36%，而Opera浏览器则由1月的2.28%下降到2.15%。二、HTML5技术分析除了原先的DOM接口，HTML5增加了更多API2.1、使用 HTML5 canvas 进行 Web 绘图Web之前有三种绘图的方式，Adobe Flash，SVG和VML。此次HTML5元素新添加的Canvas实际上是一

7、个像素画布（bitmap canvas），和SVG不同，画在Canvas上的元素无法进行缩放，同时也不是DOM的一部分。 WHATWG的HTML5选择Canvas作为标准原因有二：1、由于不用存储画出的每一个元素，所以性能更好。2、和其他语言的二维绘图API类似，更容易实现。Canvas在HTML页面中是一个“”标签，显示为一个矩形区域。矩形区域的左上角为坐标原点(0,0)，向右为X轴，向下为Y轴。2.1.1、基本绘图 API单独的一个 canvas 标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用 JavaScript 脚本，才能够完成各种图形，线条，以及复杂的图形变换

8、操作，与基于 SVG 来实现同样绘图效果来比较，canvas 绘图是一种像素级别的位图绘图技术，而 SVG 则是一种矢量绘图技术。正鉴于这种本质机理的不同，如何更快速高效的进行 canvas 渲染成为各主流 JavaScript 执行引擎性能比拼的重要指标之一。目前，Chrome 的 V8, Firefox 的 SpiderMonkey 以及 Safari 的 Nitro 等引擎都已经能够很好的满足二维绘图所需的必要性能指标，虽然在运行一些基于 canvas 的游戏时 CPU 占用率还是相对较高，但我们有理由相信随着 NVIDIA 和 AMD 等一系列硬件厂商的参与，硬件加速技术将大大提升 W

9、eb 应用的性能。在开始绘图之前，我们需要首先创建一个指定大小的 canvas，并为其指定一个 id，方便在 JavaScript 脚本中获取该 DOM 实例对象。声明一个 canvas 节点的方式如下所示。 Fallback content, in case the browser does not support Canvas. 2.1.2、简单图形绘制基于 canvas 的绘图并不是直接在 canvas 标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的 渲染上下文（Rendering Context），所有的绘图命令和属性都定义在渲染上下文当中。在通过 canvas id 获

10、取相应的 DOM 对象之后首先要做的事情就是获取渲染上下文对象。 渲染上下文与 canvas 一一对应，无论对同一 canvas 对象调用几次 getContext() 方法，都将返回同一个上下文对象。目前，所有支持 canvas 标签的浏览器都支持 2D 渲染上下文，可以使用如下的代码来获取该对象。var context = document.getElementById(canvas).getContext(2d); 除此之外，在不久的将来，开发人员还会能够得到基于 OpenGL 的 3D 渲染上下文以在 canvas 中进行 3D 绘图。与 SVG 不同，canvas 原生支持的基本图形

11、只有矩形一种，至于其他的圆形，多边形等图形则都由路径来负责绘制实现。2.1.3、绘制路径在开始动手绘制路径之前，首先需要明确的是：矩形绘制 API 是一种即时性的 API，他会在相应的绘图函数执行完毕之后，将图形即时的渲染在画面上。然而路径绘制 API 并非如此，完整的路径绘制过程大致可以分为如下两个阶段： 1、定义路径轮廓：在每个 canvas 实例对象中都拥有一个 path 对象，创建自定义图形的过程就是不断对 path 对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用 beginPath() 方法来重置 path 对象至初始状态，进而通过一系列对 moveTo/lineTo 等

12、画线方法的调用，绘制期望的路径，其中 moveTo(x, y) 方法设置绘图起始坐标，而 lineTo(x,y) 等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用 closePath() 方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。 2、绘制路径定义完路径的轮廓，此时 canvas 画面中没有显示任何路径，开发人员还可以对路径进行修改。一旦确定完成，则需要继续调用 stroke()/fill() 函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由 strokeStyle 和 fillStyle 属性决定。2.

13、1.4、二维变形Canvas 绘图中另一个重要的概念是绘画状态（Drawing State），绘画状态反映了渲染上下文当前的瞬时状态，开发人员可以通过对绘画状态的保存 / 恢复操作而快速的回到之前使用的各种属性和变形操作。绘画状态主要由以下三个部分构成： 当前的变形矩阵（transformation matrix） 当前的裁剪区域（clipping region） 当前上下文中的属性，比如 strokeStyle, fillType, globalAlpha, font 等等。需要指出的是，当前路径对象以及当前的位图都不包含在绘画状态之中，路径是持续性的对象，如前文所讲，只有通过 beginP

14、ath() 操作才会进行重置，而位图则是 canvas 的属性，并非属于渲染上下文的。开发人员可以使用 save 和 restore 两种方法来保存和恢复 canvas 状态，每调用 save 方法，都会将当前状态压入堆栈中，而相应的 restore 方法则会从堆栈中弹出一个状态，并将当前画面恢复至该状态。绘画状态在 canvas 图形变形操作中应用极为广泛，也非常重要，因为调用一个 restore 方法远比手动恢复先前状态要简单许多，因而，一个较好的习惯是在做变形操作之前先保存 canvas 状态。二维绘图的常用变形操作在 canvas 中都可到了很好的支持，包括平移（Translate），

15、旋转（Rotate），伸缩（Scale）等等。由于所有的变形操作都基于变形矩阵，因而开发人员始终需要记住一点的就是，一旦没有使用 save/restore 操作保持住原来的绘图状态，那么后续的绘图操作，都会在当前所应用的变形状态下完成。2.1.5、像素级绘图像素级别的绘图操作是 canvas 绘图区别于 SVG，VML 等绘图技术的最为明显特征之一，渲染上下文提供了 createImageData, getImageData, 和 putImageData 三种方法来进行针对像素的操作，所基于的对象都是 imageData 对象。imageData 对象包含 width、height 和 data