实习第二十二天(Web worker多线程)

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行，在 HTML5 中提出了工作线程（Web Workers）的概念，即多线程概念，可以将一些大量计算的代码交给web worker运行而不冻结用户界面。

Web Workers 的三大主要特征：

1）能够长时间运行（响应）

2）理想的启动性能

3）理想的内存消耗

Web Workers 允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。

例子：

//worker.js

onmessage =function (evt){

  var d = evt.data;//通过evt.data获得发送来的数据

  postMessage( d );//将获取到的数据发送会主线程

}

HTML页面：test.html

用Chrome浏览器打开test.html后，控制台输出 "hello world" 表示程序执行成功。

通过这个例子我们可以看出使用web worker主要分为以下几部分

WEB主线程:

1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。

2.通过worker.postMessage( data ) 方法来向worker发送数据。

3.绑定worker.onmessage方法来接收worker发送过来的数据。

4.可以使用 worker.terminate() 来终止一个worker的执行。

worker新线程：

1.通过postMessage( data ) 方法来向主线程发送数据。

2.绑定onmessage方法来接收主线程发送过来的数据。