webwork的定义

webwork为单页面使用多线程，不影响页面的渲染，充分补全的js单线程阻塞页面渲染的缺点，项目中使用还是很受欢迎的

webwork的封装

webwork在单页面中使用会遇到打包找不到webwork.js文件的提示，此时需要安装worker-loader插件，配置config, 而webwork的封装避免了在项目线上打包需要安装worker-loader问题,单独使用一个js文件，下面会说怎么使用
vue和react使用类似，此处以vue为例

export default class WebWorker {
  constructor(worker) {
    const code = worker.toString()
    const blob = new Blob(['(' + code + ')()'])
    return new Worker(URL.createObjectURL(blob))
  }
}

组件内使用

请求到数据后正常赋值，渲染页面，在最后运行webwork另起线程

组件内使用

1，请求数据的方法

getData() {
 	let params = {}
     this.request(params).then(res => {
        this.form = Object.assign({}, res.data)
        this.logLines = getLines(this.form.log.segment1) // 根据换行符把内容切割成数组
        this.form.log = this.logLines.splice(-LOG_PAGE_SIZE, LOG_PAGE_SIZE).join('\n')
        this.cmOption.firstLineNumber = Math.max(this.logLines.length + 1, 1)
        this.$nextTick(() => {
          const Dom = this.$refs.codemirror.codemirror
          Dom.scrollIntoView({
            line: Dom.lineCount() - 1,
            ch: 0
          })
        })
        this.runWebWork(res.data)
     })
   },
 

2，new一个实例

 // 另起webwork线程
    runWebWork(data) {
      let workFunction = function() {
        this.onmessage = e => {
          let arr = e.data.split(/\r\n|[\r\n]/)
          postMessage(arr)
        }
      }
      if (work) {
		work.terminate()
		}
      console.time()
      work = new WebWorker(workFunction)
      // 发送消息
      work.postMessage(data.log.segment2)
      // 接收消息
      work.onmessage = e => {
        console.log('webwork执行完成')
        this.logLines = [...e.data, ...this.logLines]
        // Worker 线程
        work = null
        console.timeEnd()
      }
      // 监听清除work
      this.$once('hook:beforeDestroy', () =>{
      	work.terminate()
      	work = null
      })
    }

这样一个简单的webwork就ok了