H5 webworker 坑

Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

无法访问DOM元素！！！所以不能引入访问DOM的第三方插件。Image，Canvas无法在webworker使用。

webpack中使用 配合worker-loader https://www.npmjs.com/package...

    // weboack.config.js
    // 如果找不到文件，检查publicPath。或者采用worker-loader inline模式
    
    {
        test: /\.worker\.js$/,
        use: {
            loader: 'worker-loader'
        }
    }

// file.worker.js 
import {helper} from '../tools.js';

  self.addEventListener('message', function (msg) {
  let {action, params} = msg.data;
  if (action === 'xxx') {
      helper({...params})
          .then(res => {
              self.postMessage({action: 'xxxSuccess',                                     params: {
                  num: res
              }});
          });
  }
}, false);

    // index.js
    import Worker from './file.worker.js';
    const worker = new Worker();
    worker.postMessage({
        action: 'XXX',
        params: {}
    });
    worker.onmessage = function (msg) {
          console.log(msg.data)
        worker.terminate();
    };

vue中使用。 vue-worker，查看文档https://www.npmjs.com/package...