web开发技巧-Worker

Worker

• 基本概念

基本概念

Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker ，只须调用 Worker(URL) 构造函数，函数参数 URL 为指定的脚本。

Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者同源（注意：Blink暂时不支持嵌套 Worker）。

1.程序：指可以被CPU执行代码，程序储存在磁盘上
2.进程：将程序调用内存中并且分配指定空间，在内存中的程序称为进程
3.线程：进程内部是有多个线程

chrome浏览器
一个chrome浏览器进程内部至少有6个线程负责向浏览器发送请求数据获取
资源  -- 请求线程
一个线程负责绘制所有资源并且执行js程序 --UI主线程

注意事项：
worker线程执行代码中不能包含任何DOM/BOM元素
操作网页中DOM/BOM只能交给UI主线程
其他线程不能操作DOM/BOM 担心造成渲染混乱

html代码

 <button>111</button>
  <script>
    let w = new Worker('./index.js');
    w.onmessage = function (event) {
      console.log('接收worker数据：' + event.data);
    }
    w.postMessage('123');
  </script>
  <button>222</button>

index.js 代码

var start = new Date().getTime()
do {
  var end = new Date().getTime()
} while (end - start < 2000);
console.log('执行结束');

// 给UI主线程发送数据
postMessage('456');

// 接收UI主线程的数据
onmessage = function(event) {
  console.log('接收UI线程数据：' + event.data);
}