web worker

1. 概况
   描述：为js创造多线程环境。在主线程运行的同时，worker线程在后台运行，两者互不干扰。等到worker线程完成计算任务，再把结果返回给主线程。好处是耗时比较久的任务，由worker线程来完成，主线程在渲染交互页面时就会很流畅
2. 注意点
   a) 同源限制
   描述：由worker线程运行的js文件，必须与主线程所在文件同源
   b) DOM限制
   描述：worker线程无法访问网页的DOM对象、document、window和parent等。可以使用navigator和location对象
   c) 通信联系
   描述：worker线程和主线程之间不能直接通信，必须通过消息完成
   d) 脚本限制
   描述：worker线程不能执行window上面的alert()、confirm()等，可以使用XMLHttpRequest对象发送ajax请求
   e) 文件限制
   描述：worker线程无法读取本地文件，即不能打开本机的文件系统(file://)，所加载的脚本，必须来自网络
3. 简单使用
   描述：由于worker线程存在同源和文件限制，只能访问网络文件，所以演示时本地需要搭建一个node服务器来托管自己的js文件
   a) 文件
   
   b) Server.js
   在server.js中搭建一个node的服务器，分别托管index.html和worker.js文件

   const http = require('http')
   const fs = require('fs')
   const path = require('path')
   
   let server = http.createServer((req, res) =>{
     // console.log(req.url)
     if (req.url === '/index.html') {
       readFileFn('/index.html')
     } else if(req.url === '/worker.js') {
       readFileFn('/worker.js')
     }
     // 读取文件并返回
     function readFileFn(url) {
       fs.readFile(path.join(__dirname, url), (err, data) => {
         if(err) {
           throw err
         } else {
           res.end(data)
         }
       })
     }
   })
   server.listen(3000, '', function() {
     console.log('服务启动成功')
   })
   

   启动命令，需安装node

   node .\server.js
   // 访问页面 http://localhost:3000/index.html
   

   c) Index.js
   描述：主线程文件

   // 创建worker线程
   let worker = new Worker('http://localhost:3000/worker.js')
   // 监听worker线程发送过来的数据
   worker.onmessage = function(e) {
     console.log('主线程收：', e.data)
   }
   // 主线程向worker线程发送数据
   worker.postMessage({
     text: '主线程呼叫worker1，收到请回答', 
     arr: [11]
   })
   worker.postMessage('主线程呼叫worker2，收到请回答')
   

   d) Worker.js
   描述：self代表子线程自身，即子线程的全局对象。可使用this代替，或者省略不写

   // worker线程接收主线程发送的数据
   self.onmessage = function(e) {
     console.log('worker线程收：', e.data)
     self.postMessage('woker线程收到，over')
   }
   

4. 主线程API
   a) worker.onmessage
   描述：子线程发送数据时触发，用于接收子线程发送的数据
   b) worker.onerror
   描述：子线程发送错误时触发
   c) worker.onmessageerror
   描述：子线程发送的数据无法序列号为字符串时触发
   d) worker.postMessage()
   描述：向子线程发送数据，可以为字符串、对象、bold、ArrayBuffer和file等，传递的数据为深拷贝
   e) worker.terminate()
   描述：关闭子线程。子线程一旦创建成功就会始终运行，不会被动关闭，比较耗费资源，因此一旦使用完毕，就需要关闭
   
5. Worker线程API
   a) self.name
   描述：子线程的名称。只读，由构造函数指定
   b) self.onmessage
   描述：主线程发送数据时触发，用于接收主线程发送的数据
   c) self.onmessageerror
   描述：主线程发送的数据无法序列号为字符串时触发
   d) self.postMessage
   描述：向主线程发送数据，可以为字符串、对象、bold、ArrayBuffer和file等，传递的数据为深拷贝
   e) self.close()
   描述：关闭当前线程。
   f) self.importScripts()
   描述：加载JS脚本
   
   参考文章：阮一峰的web worker