2024年前端最新HTML5(四)——Web Workers(1)，web开发教学

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发

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

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

//主线程关闭

myWorker.terminate()

//子线程关闭

self.close() //方法一

this.close() //方法二

三、同一个网页的Web Worker

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

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

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】