Web前端最新HTML5(四)——Web Workers，2024Web前端开发面试解答之设计模式篇

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

使用 Web Worker 注意点：

1. 同源限制：分配给 Worker 线程运行的脚本，必须与主线程的脚本文件同源，否则存在跨域问题。

2. DOM限制：Worker 线程所在的全局对象，与主线程不同，无法读取主线程的DOM对象，也无法使用 window、document、parent 这些对象。但是Worker线程可以使用navigation和location对象。

3. 数据通信：Worker 线程与主线程不在一个环境，不能直接通信，必须通过消息来完成数据通信。

4. 脚本限制：Worker 线程不能执行 window 的 alert、confirm 方法。但是可以通过ajax发送请求。

5. 文件限制：Worker线程无法读取本地文件，子线程加载的脚本必须来自网络。

二、使用语法

======

2.1 创建Worker线程：

创建worker之前，先检查浏览器是否支持它。使用 typeof 检查，代码如下：

if( typeof Worker !== undefined ){

console.log(“支持Worker线程”)

}else{

console.log(“不支持Worker”)

}

检查浏览器支持 worker 之后，主线程使用 new 命令，调用 worker() 构造函数，新建 Worker 线程。

var myWorker = new Worker(‘worker.js’)

构造函数的参数是一个脚本文件，该文件不能是本地文件，必须来自网络脚本，该文件就是Worker 线程要执行的任务。如果该文件加载失败，Worker 就会失败。

2.2 主线程与子线程数据通信：

主线程调用 postMessage() 方法，向 Worker 发消息。postMessage(参数) 方法中参数就是传给 Worker 的数据，这个数据可以是任意格式。

myWorker.postMessage(“你好”)

紧接着 Worker 线程，通过 onmessage 指定监听函数，接收消息。worker.js 代码如下：

this.onmessage = function(res){

console.log(“接收到消息”,res.data)

this.postMessage(“我收到消息了”)

}

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 比较耗费资源，不应该过度使用，使用完毕之后应该关闭。主线程和子线程都可以关闭。

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

法等等**

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

[外链图片转存中…(img-OIMOKhEc-1715904192448)]

前端视频资料：
[外链图片转存中…(img-MTBDDXmG-1715904192448)]