网站怎么做反爬虫,wordpress 有赞,wordpress首页轮换图片入口,东莞专业做外贸网站的公司#x1f9d1;‍#x1f393; 个人主页#xff1a;《爱蹦跶的大A阿》 #x1f525;当前正在更新专栏#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你…‍ 个人主页《爱蹦跶的大A阿》 当前正在更新专栏《VUE》 、《JavaScript保姆级教程》、《krpano》 ​  ​ ✨ 前言 Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你可以提升web应用性能。 通过本文你将学习: Web Worker的工作原理不同类型worker的区别worker的创建和通信用法worker间的数据传递方法worker的调试技巧worker可以提升应用性能的场景弥补worker在老浏览器不兼容的方法 准备让Web Worker成为你的网页优化利器了吗?让我们开始吧! ​ 第一节:Web Worker简介 Web Worker可以将JS代码运行在后台线程,实现多线程: 不阻塞主UI线程,提升互动性与主线程同时运行,实现并行通过消息传递与主线程通信 DEDICATED WORKER:专属于一个页面 SHARED WORKER:可被多个页面共享 第二节:创建Worker 创建一个Dedicated Worker的基本步骤是: 主线程中用new Worker()实例化一个Worker对象,并传入脚本的路径在指定的js脚本中使用self对象对worker进行编程self对象表示worker的全局作用域,可以添加事件监听器常见的事件有onmessage、onerror等 一个典型的示例: // 主线程 const worker new Worker(work.js);worker.postMessage(start);// work.js self.addEventListener(message, e {console.log(worker recv:, e.data);self.postMessage(hello from worker); }); Worker线程中不能直接访问DOM,但可以通过postMessage()与主线程通信。 创建一个Shared Worker步骤类似,只是用SharedWorker实例,并可以指定worker的名称。 Shared Worker可以被多个窗口访问,从而共享同一个逻辑。 Dedicated Worker专属于一个页面文档。根据实际需求选择合适的Worker类型。 创建shared worker: // 主线程 const worker new SharedWorker(work.js);// work.js self.addEventListener(connect, (e) {// 收到连接 }); 第三节:worker间通信 主线程 - worker: worker.postMessage(hello); worker - 主线程: self.postMessage(hi from worker); 主线程到worker的通信 主线程使用worker对象的postMessage()方法向worker发送消息: // 主线程 worker.postMessage(start); postMessage()可以发送各种数据类型,包括原始类型、对象、数组等。 worker到主线程的通信 worker中使用self.postMessage()发送: // worker内 self.postMessage(message from worker); self代表worker的全局作用域。 接收消息 主线程通过worker.onmessage监听消息: // 主线程 worker.onmessage function(e) {console.log(e.data); } worker中通过self.onmessage监听: // worker内 self.onmessage function(e) {console.log(e.data); } e.data是消息内容。 传递数据注意事项 对象会串行化,记得调用JSON.parse()传递函数需要把函数字符串化 这些是worker间通信的主要方式,可以传递不同类型的数据,充分利用多线程带来的好处。 第五节:Worker中的异步请求 Worker线程可以发出AJAX请求,使用与主线程相同的XMLHttpRequest对象: // Worker内 const xhr new XMLHttpRequest(); xhr.open(GET, /data); xhr.onload () {self.postMessage(xhr.response); } xhr.send(); 这样可以在Worker中完成异步数据加载,不影响主UI线程。 第六节:调试Worker 主线程可以通过inspect()调试运行中的Worker: const worker new Worker(); worker.inspect(); 这会打开DevTools来调试worker线程。 也可以将console日志发送到主线程: // Worker内 self.postMessage(console.log.apply(console, arguments)); 第七节:使用场景 Worker常用于: 超大数据排序、搜索、处理数据转换与编译,如Json、Excel高延迟任务或高计算工作,如机器学习 第八节:兼容性和代替方案 低版本浏览器可能不支持Worker,可以使用polyfill或只在新浏览器使用。 也可以使用setTimeout模拟后台线程。 ✨ 结语      在这篇文章中,我们全面介绍了Web Worker的用法 - 它可以将JavaScript代码运行在后台线程,实现多线程计算。 首先,我们看到Web Worker的优点,它不会阻塞主UI线程,可以实现并行执行任务。然后,我们介绍了Dedicated Worker和Shared Worker的区别,以及创建和终止Worker的方法。 接下来,我们重点讲解了Worker之间的消息通信机制,这是利用多线程的关键。我们也讨论了Worker中发起异步请求和调试技巧。 最后,给出了Web Worker的实际应用场景,以及需要注意的兼容性问题。 我尽量用通俗的语言和示例给出了全面的讲解,希望这篇文章可以帮助大家正确使用Web Worker来优化web应用性能。如果还有任何问题,欢迎在评论交流! ​