HTML5(四)——Web Workers(2)

worker子进程收到消息之后，可以继续向主进程发送消息，使用 postMessage()。代码如上。

主进程也通过onmessage监听函数接收消息。

myWorker.onmessage = function(res){

console.log(“主线程收到消息：”,res.data)

}

2.3 Worker线程

Worker线程内部，添加 this.onmessage 监听函数，其中 this 是子线程的全局对象，也可以替换成 self，self 代表子线程本身。等同于：

self.onmessage 《=》 this.onmessage

除了使用 self.onmessage 指定监听函数，也可以使用 this.addEventListener() 监听事件对象。上述 worker.js 代码可改为：

//写法一

this.addEventListener(“message”,function(res){

console.log(“res”,res.data)

})

//写法二

addEventListener(“message”,function(res){

this.console.log(“1”,res.data)

})

2.4 错误处理

主线程可以监听Worker是否发生错误，如果发生错误，Worker 会触发主线程的 error 事件。

// 写法一

myWorker.onerror = function(e){

console.log(‘e’,e)

}

//写法二

myWorker.addEventListener(“error”,function(e){

console.log(“e”,e)

})

worker 子线程也可以监听 error 事件。

2.5 关闭 Worker

Worker 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

//主线程关闭

myWorker.terminate()

//子线程关闭

self.close() //方法一

this.close() //方法二

三、同一个网页的Web Worker

==================

通常情况下，Worker 载入的是一个单独的 javascript 文件，但是也可以载入与主线程在同一个网页的代码。网页中添加 Worker 脚本，必须注意指定script标签的type属性是一个浏览器不认识的值，否则就会失去意义。如：

然后，需要读取这段代码，先将嵌入网页的脚本代码转成二进制对象，然后为这个二进制对象生成url，再让worker加载url,这样就实现了主进程和worker在同一个网页内。代码如下：

四、Worker 属性和方法总结

================

Worker构造函数方法：

• Worker.postMessage() - 发送消息。

• Worker.onmessage() - 监听子线程发送过来的数据。

• Worker.onmessageerror() - 发送数据无法序列化时触发事件。

• Worker.onerror() - 错误处理。

• Worker.terminate() - 结束Worker。

子进程属性方法：

Worker() 构造函数，可以接受两个参数，第一个是脚本的地址，第二个是参数是配置对象，该对象指定Worker的名称。如：

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。