HTML技术调研报告.doc-资料库

目录 1. 背景及现状............................................................................................................................... 1 2. HTML5 新特性............................................................................................................................2 2.1. worker 多线程........................................................................................................................2 2.2. 双向通信 WebSocket.............................................................................................................2 2.2.1. 当前的 Web 通信——轮询（Polling）....................................................................2 2.2.2. HTML5 WebSocket....................................................................................................... 3 2.3. 视频音频支持 ........................................................................................................................4 2.3.1. 支持格式.....................................................................................................................4 2.3.2. HTML5 视频音频应用 ................................................................................................. 4 2.4. 图像绘制 ................................................................................................................................4 2.4.1. Canvas 标签 ..................................................................................................................4 2.4.2. 图像绘制应用.............................................................................................................5 2.5. 位置服务 ................................................................................................................................5 2.6. 本地存储 ................................................................................................................................6 2.7. 离线缓存以及速度 ................................................................................................................6 图目录 1-1 HTML5 版本发布时间 ..........................................................................................................................1 2-1 轮询和 WEBSOCKET 应用程序之间的网络吞吐量..............................................................................3 2-2 HTML5 图像绘制应用 ..........................................................................................................................5 I

1. 背景及现状 HTML 标准自 1999 年 12 月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动 web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG）的组织， HTML5 草案的前身名为 Web Applications 1.0，於 2004 年被 WHATWG 提出，于 2007 年被 W3C 接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于 2008 年 1 月 22 日公布。该团队为 HTML5 建立的规则如下：  新特性应该基于 HTML、CSS、DOM 以及 JavaScript。  减少对外部插件的需求（比如 Flash）  更优秀的错误处理  更多取代脚本的标记  HTML5 应该独立于设备  开发进程应对公众透明总的来说，HTML 5 有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。由图 1-1 可以看出，在 2012 年，将会由 W3C 发布候选推荐版，这个版本的发布就代表着 HTML5 的规范编写已经完成了。而 2022 年推出的计划推荐版，则意味着至少会有两个浏览器会完美的支持 HTML5 的所有特性。2022 年听起来似乎很遥远，但通过观察现阶段 chrome, firefox , safari，IE 等浏览器对 HTML5 的支持程度，可以看出各大浏览器厂商都非常积极。应该不需要到 2022 年就会有至少两个浏览器支持 HTML5。因此现在关注和讨论 HTML5，了解 HTML5 的新特性，为以后的产品规划并非毫无意义。 1-1 HTML5 版本发布时间 1

2. HTML5 新特性 2.1. worker 多线程在过去很年多里面 HTML 的一个限制就是多线程，所有运算和展示都在主页面一个线程中，预算稍微大一点网页就卡，对整个用户体验、性能的影响很大。有了 HTML5 这个问题完全解决了。多线程支持，在与主页面分开的线程中运行处理过程，保留页面以用于主要的功能，并可以同时算多个东西，充分利用了 CPU 资源。 HTML5 的多线程是 worker 模式，大体的概念是：线程的创建由一个 worker 来决定，维护了一个线程池。Web Workers 是 HTML5 提供的一个 javascript 多线程解决方案，我们可以将一些大计算量的代码交由 web Worker 运行而不冻结用户界面。 HTML5 的多线程的特性： 1. 在线程中是不能操作 DOM 节点的（想要操作的话只能发送消息给 worker 创建者回调函数）； 2. 多线程的本质其实是真正的系统线程； 3. 能使用 setTimeout()，clearTimeout()，setInterval()，clearInterval()等函数； 4. 能进行 IO 操作（ajax）。 2.2. 双向通信 WebSocket WebSockets 是在一个(TCP)接口进行双向通信的技术，PUSH 技术类型。使用 ws 或 wss 协议。WebSocket 目前由 W3C 进行标准化，已经受到 Firefox 4、Chrome 4、Opera 10.70 以及 Safari 5 等浏览器的支持。 2.2.1. 当前的 Web 通信——轮询（Polling）通常，当浏览器访问一个网页时，会向托管该网页的 Web 服务器发送一个 HTTP 请求， Web 服务器识别这一请求，并返回响应。例如，新闻报道，门票销售等，在浏览器渲染页面时，响应可能会过期，如果你想获得最新的“实时”信息，你可以不断地手动刷新页面，但显然这不是最好的办法。目前提供的实时 Web 程序主要是围绕轮询和其它服务器端推送技术进行的，最著名的是 Comnet，它推迟了 HTTP 响应的结束，基于 Comnet 的推送通常是使用 JavaScript 结合长轮询 (Long Polling)或流连接策略实现的。使用轮询时，浏览器定期发送 HTTP 请求，并立即收到响应。这种方式比不断刷新好一些，浏览器不用一闪一闪的重新加载了，而且只传送感兴趣的那一小部分数据，占用带宽变小。使用长轮询时，浏览器向服务器发送一个请求，服务器在既定期限内保持请求处于打开状态，如果在此期间收到通知，向客户端发送一个包含消息的响应，如果在此期间没有收到消息，服务器发送一个响应终止打开的请求。长轮询相对于一般轮询的优点在于，数据一旦可用，便立即从服务器发送到客户机，因此没有延时，但是服务器有大量消息要推送的时候，长轮询与轮询相比，实际并没有什么本质的提高。使用流时，浏览器发送一个完整的请求，服务器发送一个响应，并保存打开状态，然后

不断更新使其一直保持打开（或在一段时间内保持打开），无论何时消息准备好发送时，响应就更新，但服务器不会发送一个结束的响应，因此连接就一直保持打开状态，后面发送的消息就可以继续使用这个连接。但流仍然是封装在 HTTP 中的，阻扰了防火墙和代理服务器选择缓冲区中的内容进行响应，因此消息传递的时间就延长了。许多流式 Comnet 解决方案都转向了长轮询，另外，TLS（SSL）连接可以用来屏蔽来自缓冲区的响应，但在这种情况下，每个连接消耗的服务器资源更多了。最终，所有这些方法都提供了实时数据，包含 HTTP 请求和响应头，其中包含许多额外的，不必要的头数据。为了模拟基于半双工 HTTP 上的全双工通信，目前的许多解决方案都使用了两个连接：一个下行连接，一个上行连接。维护和协调这两个连接需要大量的系统开销，并增加了复杂性。简言之，HTTP 不是为实时的，全双工通信设计的，如图 2-1 所示，它显示了轮询和 WebSocket 应用程序之间的网络吞吐量。 2-1 轮询和 WebSocket 应用程序之间的网络吞吐量 2.2.2. HTML5 WebSocket WebSocket 通过一个单一的 Socket 实现一个全双工，双向通信的信道，实现了服务端完美的 PUSH。与 Ajax 相比，Ajax 技术需要客户端发起请求，而 WebSocket 服务器和客户端可以彼此相互推送信息；XHR 受到域的限制，而 WebSocket 允许跨域通信。HTML 5 Web Socket 提供了一个真正的标准，可以使用它构建可扩展的实时 Web 应用程序。此外，由于它提供了一个浏览器自带的套接字，消除了 Comet 解决方案的许多问题，Web Socket 显著降低了系统开销和复杂性，减少不必要的网络流量和延迟。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 HTML 5 Web Socket 在实时 Web 应用扩展性方面朝前迈出了一大步，HTML 5 Web Socket 可以提供 5000：1 或 1000：1 的比例（根据 HTTP 消息头大小）减少不必要的 HTTP 头流量和 3：1 的比例减少通信延迟，这不是一个渐进式的改进，而是一次革命性的飞跃。 3