web Worker：

web Worker是运行在后台的javascript，不会影响性能，常用于高耗费CPU的任务，必须部署到线上才可以正常使用，这里有三个方法比较重要，需要注意：

postMessage(),发送消息，指的是在创建的后台web works文件中发送消息，供主页中onmessage()事件接收，此事件的对象将包含要发送过来的值。

terminate()，用来停止web worker,使用方法：在Worker对象调用即可。

onmessage(),使用web worker后，要new 创建Worker对象，如new Worker(worker.js),onmessage是这个对象的一个方法，后面的函数中的事件对象则包含所有信息，如下：

其中data属性即可拿到发送过来的值，具体使用步骤如下：

test.js文件中的web Worker代码：

	// 1.创建一个名为test.js的worker文件，放到test.html相同目录下:var sum = 0; //声明全局变量，下面计时器中sum才能完成不断自加：setInterval(function() {sum++;postMessage(sum); //2.将sum发送给worker对象}, 1000);

html文件中javascript代码：

	<script>// 获取DOM元素，供下面操作：var spans = document.querySelector('span');var start = document.querySelector('.start');var stops = document.querySelector('.stop');var workers; //3.声明全局变量，供后面接收worker对象；若声明为局部变量，后面stop事件中workers.terminate()将不能给undefined设置此方法// 4.定义一个执行创建worker对象并接收消息的函数：function startSum() {workers = new Worker('test.js'); // 创建一个web Worker对象，括号中传入web Worker文件的路径，注意实际开发中因做兼容处理，某些浏览器不支持此属性时，因返回相关提示// 使用onmessage方法将发送的消息接收到此作用域：workers.onmessage = function(event) {var datas = event.data; // 将接收到的数据赋值给变量datasspans.innerText = datas; // 将datas设置给spans元素};};// 5.定义一个关闭web worker的函数：function stopSum() {workers.terminate();//停止workers};// 当点击stops时执行stopSum()函数停止workers：stops.onclick = function() {stopSum();};// 当点击开始时执行startSum()函数开始workers：start.onclick = function() {startSum();};</script>

特别提醒：案例必须部署到服务器上才可以正常运行，本地打开会报类似的错误：Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘file:///C:/Users/17121/Desktop/test/test.js’ cannot be accessed from origin ‘null’.

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海