首页 前端知识 2024年前端最全HTML5(四)——Web Workers(2),2024年最新靠着这份190页的面试资料

2024年前端最全HTML5(四)——Web Workers(2),2024年最新靠着这份190页的面试资料

2024-05-25 09:05:45 前端知识 前端哥 143 908 我要收藏
后话

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

对于面试,说几句个人观点。

面试,说到底是一种考试。正如我们一直批判应试教育脱离教育的本质,为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的,几千年来一直如此。除非你有实力向公司证明你足够优秀,否则,还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段,个人的收获是很大的,我也认为这是一种不错的学习方式。首先,面试问题大部分基础而且深入,这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义,但它的意义就在每天的谈话间。

所谓面试造火箭,工作拧螺丝。面试往往有更高的要求,也迫使我们更专心更深入地去学习一些知识,也何尝不是一种好事。

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

最后

编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。

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

名不虚传!字节技术官甩出的"保姆级"数据结构与算法笔记太香了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9425.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!