H5详解

（1）简介

HTML5 是最新的 HTML 标准，拥有新的语义、图形以及多媒体元素

【优势】

①提供的新元素和新的 API 简化了 web 应用程序的搭建；

②跨平台，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

【注意】

①H5默认的字符编码是UTF-8；

【新特性】

HTML5 的一些最有趣的新特性：

①新的语义元素，比如 <header>, <footer>, <article>, and <section>；

②新的表单控件，比如数字、日期、时间、日历和滑块；

③强大的图像支持（借由 <canvas> 和 <svg>）；

④强大的多媒体支持（借由 <video> 和 <audio>）；

⑤强大的新 API，比如用本地存储取代 cookie

【H5被删元素】

以下 HTML 4.01 元素已从 HTML5 中删除：

（2）浏览器支持

【浏览器支持】

所有现代浏览器都支持 HTML5。此外，所有浏览器，不论新旧，都会自动把未识别元素当做行内元素来处理。正因如此，可以帮助老式浏览器处理”未知的“ HTML 元素

【把 HTML5 元素定义为块级元素】

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素。

可以把 CSS display 属性设置为 block，以确保老式浏览器中正确的行为：

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

【向 HTML 添加新元素】

可以通过浏览器 trick 向 HTML 添加任何新元素：

本例向 HTML 添加了一个名为 <myHero> 的新元素，并为其定义 display 样式：

<script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>

兼容：已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE

【Internet Explorer 的问题】

上述方案可用于所有新的 HTML5 元素，但是：

注意：Internet Explorer 8 以及更早的版本，不允许对未知元素添加样式。

幸运的是，Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript", "the shiv"：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代码是一段注释，但是 IE9 的早期版本会读取它（并理解它）

【完整的 Shiv 解决方案】

引用 shiv 代码的链接必须位于 <head> 元素中，因为 Internet Explorer 需要在读取之前认识所有新元素

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html>

（2）H5语义元素：

【什么是语义元素？】

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。

【H5新的语义元素】

H5 提供了定义页面不同部分的新语义元素：

<article>定义文章，<aside>定义页面内容以外的内容，<details>定义用户能够查看或隐藏的额外细节，<figcaption>定义 <figure> 元素的标题，<figure>规定自包含内容，比如图示、图表、照片、代码清单，<footer>定义文档或节的页脚，<header>规定文档或节的页眉，<main>规定文档的主内容，

<mark>定义重要的或强调的文本，<nav>定义导航链接，<section>定义文档中的节，

<summary>定义 <details> 元素的可见标题，<time>定义日期/时间

（3）H5迁移：

从 HTML4 迁移至 HTML5，可以使用相同的技巧从 HTML4 以及 XHTML 迁移至 HTML5。

<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div id="post">	<article>
<div id="footer">	<footer>

①【修改文档类型】

从 HTML4 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

修改为 HTML5 doctype：

<!DOCTYPE html>

②【修改H5编码字符】

修改编码信息，从 HTML4：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

改为 HTML5：

<meta charset="utf-8">

③添加 shiv

所有现代浏览器都支持 HTML5 语义元素。

此外，您可以“教授”老式浏览器如何处理“未知元素”。

为 Internet Explorer 支持而添加的 shiv：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

④把 id="header" 和 id="footer" 的 <div> 元素更改为 HTML5 <header> 和 <footer>

⑤把 id="menu" 的 <div> 元素更改为 HTML5 <nav>

⑥把 id="content" 的 the <div> 元素更改为 HTML5 <section>

⑦把 class="post" 的所有 <div> 元素更改为 HTML5 <article>

【拓展】

Html5shiv，指的是Html5标签结构

【由来】

越来越多的站点开始使用 HTML5 标签。但情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，从而使用Javascript来使不支持HTML5的浏览器支持HTML标签。很多网站采用的这种方式。

【解决方案】

有下面两个：

①为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，比如优酷网就是采用的这种模式；

②使用Javascript来使不支持HTML5的浏览器支持HTML标签，很多网站采用的这种方式。

html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

（4）H5代码规范

①【必需的属性】

请始终对图像使用 alt 属性。当图像无法显示时该属性很重要

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

②【避免长代码行】

当使用 HTML 编辑器时，通过左右滚动来阅读 HTML 代码很不方便。

请尽量避免代码行超过 80 个字符

③【不推荐省略 <html> 和 <body> 标签】

对于可访问应用程序（屏幕阅读器）和搜索引擎，声明语言很重要

省略 <html> 或 <body> c可令 DOM 和 XML 软件崩溃；省略 <body> 会在老式浏览器（IE9）中产生错误

④【HTML 注释】

短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 <!-- 之前增加一个空格：

<!-- This is a comment -->

长注释，跨越多行，应该通过  在独立的行中书写：

<!-- 
  This is a long comment example. This is a long comment example. 
  This is a long comment example.
  This is a long comment example. This is a long comment example. 
  This is a long comment example.
-->

长注释更易观察，如果它们被缩进两个空格的话

⑤【使用小写文件名】

一 . 大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

不能以 london.jpg 访问 London.jpg

二 . 其他 web 服务器（微软，IIS）对大小写不敏感：

能够以 london.jpg 或 London.jpg 访问 London.jpg

如果从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏网站

为了避免这些问题，请始终使用小写文件名（如果可以的话）

关于文件名小写，网上有许多说法，具体查询后总结如下：

①可移植性：使用小写文件名Linux 系统是大小写敏感的，而 Windows 系统和 Mac 系统正好相反，大小写不敏感。一般来说，这不是大问题。但是，如果两个文件名只有大小写不同，其他都相同，跨平台就会出问题

②易读性：小写文件名通常比大写文件名更易读，比如accessibility.txt比ACCESSIBILITY.TXT易读

③易用性：某些系统会生成一些预置的用户目录，采用首字母大写的目录名。比如，Ubuntu 在用户主目录会默认生成Downloads、 Pictures、Documents等目录。所以，用户的文件都采用小写文件名，就很方便与上面这些目录或文件相区分。

为什么操作系统会采用这样的大写文件名？

原因也很简单，因为早期 Unix 系统上，ls命令先列出大写字母，再列出小写字母，大写的路径会排在前面。因此，如果目录名或文件名是大写的，就比较容易被用户首先看到

（5）H5图形

一 . 画布canvas，我在之前文章里做了总结

二 . SVG

H5 支持内联 SVG，SVG 指可伸缩矢量图形，定义用于网络的基于矢量的图形，在放大或改变尺寸的情况下其图形质量不会有损失

具体我在后面文章http://570109268.iteye.com/blog/2409710里做了总结

（6）HTML多媒体

Web 上的多媒体指的是音效、音乐、视频和动画

【什么是多媒体？】

多媒体来自多种不同的格式，它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在因特网上，经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。接下来介绍不同的多媒体格式，以及如何在您的网页中使用它们

【浏览器支持】

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件

【多媒体格式】

多媒体元素（比如视频和音频）存储于媒体文件中

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4

【HTML插件】

辅助应用程序也称为插件，可用于播放音频和视频（以及其他）

辅助程序是使用 <object> 标签来加载的

使用辅助程序播放视频和音频的一个优势：允许用户来控制部分或全部播放设置，大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制

一 . HTML 音频

①问题及解决方案：

在 HTML 中播放音频并不容易，需要谙熟大量技巧，以确保音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放

②使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等

可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示

【HTML 4.01 多媒体标签】

标签描述

<applet>	不赞成。定义内嵌 applet。
<embed>	HTML4 中不赞成，HTML5 中允许。定义内嵌对象。
<object>	定义内嵌对象。
<param>	定义对象的参数。

【HTML 5 多媒体标签】

标签描述

<audio>	标签定义声音，比如音乐或其他音频流。
<embed>	标签定义嵌入的内容，比如插件。

【插入音频】

1 . <embed> 元素

<embed height="100" width="100" src="http://www.w3school.com.cn/i/horse.mp3"></embed>
<p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p>

问题：

①<embed> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证；

②不同的浏览器对音频格式的支持也不同；

③如果浏览器不支持该文件格式，没有插件的话就无法播放该音频；如果用户未安装插件，无法播放音频；

④如果把该文件转换为其他格式，仍然无法在所有浏览器中播放

【注释】：使用 <!DOCTYPE html> (HTML5) 解决验证问题

2 . <object> 元素

<object height="100" width="100" data="song.mp3"></object>

问题与<embed>标签相同

3 . <audio> 元素

HTML5 元素，但在 HTML 4 中是非法的，但在所有浏览器中都有效

<audio controls="controls">
  <source src="http://www.w3school.com.cn/song.mp3" type="audio/mp3" />
  <source src="http://www.w3school.com.cn/song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的

为了使音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件。如果失败，会显示错误消息

问题：

①<audio> 标签在 HTML 4 中是无效的，页面无法通过 HTML 4 验证；

②必须把音频文件转换为不同的格式；

③<audio> 元素在老式浏览器中不起作用

【注释】：使用 <!DOCTYPE html> (HTML5) 解决验证问题

4 . 添加音频的最简单方法

使用雅虎媒体播放器是一个不同的途径，只需简单地让雅虎来完成歌曲播放的工作就好了

它能播放 mp3 以及一系列其他格式，通过一行简单的代码，就可以把它添加到网页中，轻松地将 HTML 页面转变为专业的播放列表

【雅虎媒体播放器】

<a href="http://www.w3school.com.cn/song.mp3">Play Sound</a>
<!--使用雅虎播放器是免费的，如需使用它，需要把这段JS插入网页底部-->
<!--然后只需简单地把 MP3 文件链接到HTML中，JS会自动地为每首歌创建播放按钮-->
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

雅虎媒体播放器为用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当点击该按钮时，会弹出完整的播放器。

注意：这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出

5 . 使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

<a href="http://www.w3school.com.cn/song.mp3">Play the sound</a>

二 . HTML视频

在 HTML 中播放视频的方法有很多种，但并不容易。需要谙熟大量技巧，以确保视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。

1. <embed> 标签

<embed width="320" height="240" src="http://www.w3school.com.cn/i/bookmark.swf" />

2. <object> 标签

<object data="http://www.w3school.com.cn/movie.swf" height="200" width="200"/>

【问题】

①如果浏览器不支持 Flash，将无法播放视频；

②iPad 和 iPhone 不能显示 Flash 视频；

③如果将视频转换为其他格式，那么它仍然不能在所有浏览器中播放

3 .<video> 标签

HTML 5 中的新标签，作用是在 HTML 页面中嵌入视频元素

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频：

<video width="320" height="240" controls="controls">
  <source src="http://www.w3school.com.cn/movie.mp4" type="video/mp4" />
  <source src="http://www.w3school.com.cn/movie.ogg" type="video/ogg" />
  <source src="http://www.w3school.com.cn/movie.webm" type="video/webm" />
Your browser does not support the video tag.（浏览器不支持）
</video>

【问题】

①必须把视频转换为很多不同的格式；

②<video> 元素在老式浏览器中无效；

③<video> 元素无法通过 HTML 4 和 XHTML 验证

4.HTML 添加视频最好方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

【问题】

①必须把视频转换为很多不同的格式

②<video> 元素无法通过 HTML 4 和 XHTML 验证；

③<embed> 元素无法通过 HTML 4 和 XHTML 验证

注释：使用 <!DOCTYPE html> (HTML5) 解决验证问题

5 . 优酷解决方案

在 HTML 中显示视频的最简单的方法是使用优酷等视频网站

如果希望在网页播放视频，可以把视频上传到优酷视频网站，然后在网页中插入 HTML 代码即可播放视频：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

6 . 使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player（Windows媒体播放器）来播放这个 AVI 文件：

<a href="http://www.w3school.com.cn/movie.swf">Play a video file</a>

（7）H5的API

①地理位置

HTML5 Geolocation（地理位置）API 用于获得用户的地理位置

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的

【兼容】

IE9、Firefox、Chrome、Safari 以及 Opera 支持地理定位

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确

使用 getCurrentPosition() 方法来获得用户的位置，下例是一个简单的地理定位实例，可返回用户位置的经度和纬度

②拖放

拖放（Drag 和 Drop）是很常见的特性，它指的是您抓取某物并拖入不同的位置

拖放是 HTML5 标准的组成部分：任何元素都是可拖放的

具体我在前面文章http://570109268.iteye.com/admin/blogs/2408954里做过总结

（8）H5本地存储

具体我在后面文章http://570109268.iteye.com/admin/blogs/2409845里做了总结

HTML5本地存储：优于 cookies

【什么是 HTML 本地存储？】

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

【HTML 本地存储对象】

HTML 本地存储提供了两个在客户端存储数据的对象：

① window.localStorage - 存储没有截止日期的数据

② window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失）

在使用本地存储时，请检测 localStorage 和 sessionStorage 的浏览器支持：

if (typeof(Storage) !== "undefined") {
    // 针对 localStorage/sessionStorage 的代码
    alert("支持H5本地缓存")
} else {
    // 抱歉！不支持 Web Storage ..
    alert("不支持H5本地缓存")
}

（9）H5应用程序缓存

使用应用程序缓存，通过创建 cache manifest（缓存清单）文件，可轻松创建 web 应用的离线版本

①【什么是应用程序缓存？】

HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。

通俗理解就是离线缓存，可在无网络状态下访问

②【优势】

应用程序缓存为应用带来三个优势：

1.离线浏览 - 用户可在应用离线时使用它们；

2.速度 - 已缓存资源加载得更快；

3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

③【兼容】

IE10及其他主流浏览器均支持

④【Cache Manifest （缓存清单）基础】

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）

manifest 文件的建议文件扩展名是：".appcache"

【注意：】manifest 文件需要设置正确的MIME-type，即text/cache-manifest，必须在web服务器上进行配置

⑤【Manifest（清单）文件】

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

由三部分组成：

1 . CACHE MANIFEST（缓存清单） - 在此标题下列出的文件将在首次下载后进行缓存

2 . NETWORK （网络）- 在此标题下列出的文件需要与服务器的连接，且不会被缓存

3 . FALLBACK （回退）- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

下面分开讲解：

1 . CACHE MANIFEST（缓存清单）

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件

当 manifest 文件被加载后，浏览器会从网站的根目录下载这三个文件；然后，无论用户何时与因特网断开连接，这些资源依然可用

2 . NETWORK（网络）

下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

可以使用星号来指示所有其他其他资源/文件都需要因特网连接：

NETWORK:
*

3 . FALLBACK（回退）

规定如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件：

FALLBACK:
/html/ /offline.html

注释：第一个 URI 是资源，第二个是替补

⑥ 【更新缓存】

一旦应用被缓存，它就会保持缓存直到发生下列情况：

1 . 用户清空浏览器缓存；

2 . manifest 文件被修改（参阅下面的提示）；

3 . 由程序来更新应用缓存

更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）

⑦【完整的 Cache Manifest 文件】

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

【提示：】

1 . 以 "#" 开头的是注释行，但也可满足其他用途

2 . 应用的缓存只会在其 manifest 文件改变时被更新

3 . 如果编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存

4 . 更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法

（10）Web Workers

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

【什么是 Web Worker？】

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

【兼容】

IE10及其他主流浏览器均兼容

【检测 Web Worker 支持】

在创建 web worker 之前，请检测用户浏览器是否支持它：

<script>
    window.onload = function demo(){
        if (typeof(Worker) !== "undefined") {
            alert("支持Web worker")
        } else {
            alert("不支持Web Worker！")
        }
    }
</script>

【创建 Web Worker 文件】

现在，先在一个外部 JavaScript 文件中创建web worker

在此处，我们创建了计数脚本，该脚本存储于 "demo_workers.js" 文件中：

var i = 0;
function timedCount() {
    i = i + 1;
    postMessage(i);
    //console.log(documnet);因为是外部JS，所以无法获取文档相关属性
    setTimeout("timedCount()",500);
}
timedCount();

以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务

【创建 Web Worker 对象】

现在已经有了 web worker 文件，需要从 HTML 页面调用它

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 "demo_workers.js" 中的代码：

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

然后我们就可以从 web worker 发生和接收消息了

向 web worker 添加一个 "onmessage" 事件监听器：

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

当 web worker 传送消息时，会执行事件监听器中的代码；来自 web worker 的数据会存储于 event.data 中

【终止 Web Worker】

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

【复用 Web Worker】

如果把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

【总结】

Web Worker 和 DOM，由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

window 对象，document 对象，parent 对象

（11）H5的SSE

HTML Server-Sent（服务器）事件

【检测 Server-Sent 事件支持】

以下编写了一段额外的代码来检测服务器发送事件的浏览器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服务器发送事件！
    // 一些代码.....
} else {
    // 抱歉！不支持服务器发送事件！
}

【EventSource 对象】

我们可以使用 onmessage 事件来获取消息，不过还可以使用其他事件：

事件描述

onopen 当通往服务器的连接被打开

onmessage 当接收到消息

onerror 当发生错误

猜你喜欢