HTML5WebWorkers.doc

HTML5 Web Workers
一般情况下，当在HTML页面中执行脚本时，页面的状态是不可响应的，知道脚本已经完成。
Web worker是运行在后天的JavaScript，独立于其他脚本，不影响页面的性能，开放者可以继续做任何要做的事情：点击，选取内容等等，而此时web worker在后台运行。
浏览器支持:
除了IE其他浏览器都支持
Web Workers和DOM
由于web Workers位于外部文件中，他们无法访问下列JavaScript对象：
1、  window对象
2、  document对象
3、  parent 对象

要使用web worker先检测用户的浏览器是否支持它：
if(typeof(Worker)!==”undefined”){
 //浏览器支持
}else{
 //浏览器不支持
}

创建Web Workers对象
下面代码检测是否存在worker，如果不存在会创建一个：
if(typeof(w)=="undefined")
  {
  w=new Worker("demo_workers.js");
  }
w.onmessage=function(event)
{
document.getElementById("result").innerHTML=event.data;
};
前面说了，Web worker运行在一个独立于其他脚本，所以这里需要一个单独的js文件，js文件事例如下：
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();
主要代码就是postMessage()方法。它会向HTML页面传回一段消息。
注释：web worker通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。
当js向页面传回消息之后，worker的onmessage事件监听器就可以收到这个消息，这个消息就存在于event.data中，上面的例子就是直接将获得内容展示到了页面上。

停止Web worker
当创建Web worker对象之后，它会继续监听消息，直到其被终止才结束，并释放浏览器/计算机资源，那就请使用terminate()方法。
w.terminate();

eg:
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<script>
var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

Server-Sent事件-单向消息传递：
该事件的作用是网页自动获取来自服务器的更新。
以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。
接收Server-sent事件通知：
EventSource对象用于接收服务器发送的事件通知：
Var source = new EventSource(“demo_sse.php”); //创建一个新的EventSource对象，并规定发送更新的页面的URL(demo_sse.php)
Source.onmessage=function(event){
 Document.getElementById(“result”).innerHTML =event.data;
}
//收到更新后，发生onmessage事件，然后把接收的数据放到result元素中

HTML5 表单：
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
新的输入类型：（IE完全不支持）
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
但是不支持不代表不能正常显示，还是可以在主流浏览器上显示为常规的文本域的
Input 类型-email
在提交表单时会自动验证email域的值：
E-mail: <input type="email" name="user_email" />
其他类型于此用法类似。
这里要特别说一下number类型
它添加属性值max,min,step,value字段类型来对数字进行限定
Max,min很好理解，数字文本域中最大最小值，step规定合法的数字间隔（如果step=3,则合法的数是-3,0,3,6等），value规定默认值

Input 类型 - Date Pickers（数据检出器）
HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

HTML5表单属性：
新的form属性：
Autocomplete //form 或input域应该拥有自动完成的功能。
注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
Novalidate
新的input属性：
Autocomplete//同上
Autofocus //规定页面加载时，域自动获得焦点
注释：autofocus 属性适用于所有 <input> 标签的类型。
Form //规定输入域所属的一个或多个表单
注释：form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id：
Form override(formaction,formenctype,formmethod,formnovalite,formtarget)//允许中邪form元素的某些属性设置

Height和width  // height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释：height 和 width 属性只适用于 image 类型的 <input> 标签

List //规定输入域的datalist（是输入域的选项列表）
注释：list属性适用于一下类型的<input>标签：text,search,url,telephone,email,date pickers,number,range以及color.
Eg:
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="" />
<option label="Google" value="" />
<option label="Microsoft" value="" />
</datalist>

Min,max,step
注释：min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。
下面的例子显示一个数字域，该域接受介于 0 到 10 之间的值，且步进为 3（即合法的值为 0、3、6 和 9）：

Multiple//规定输入域中可选择多个值
注释：multiple属性适用于email和file类型的<input>标签

novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释：novalidate 属性适用于 <form> 以及以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color.

Pattern
注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

Placeholder //提供一种提示（hint），描述输入域所期待的值
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

Retuired //必须在提交之前写入输入域（不能为空）
注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usr_name" required="required" />