网站维护 设计,阿里巴巴国际站的前台网址是,网站的版面设计,网站上的截图怎么做Web Worker 是一种在浏览器环境中运行的脚本它在主线程之外运行#xff0c;可以在后台执行计算密集型或需要长时间运行的任务#xff0c;而不会阻塞主线程的执行。Web Worker 通过在独立的线程中执行#xff0c;可以提高页面的性能和响应性。 实现流程#xff1a; 主线程可以在后台执行计算密集型或需要长时间运行的任务而不会阻塞主线程的执行。Web Worker 通过在独立的线程中执行可以提高页面的性能和响应性。 实现流程 主线程
// 创建一个新的 Worker 对象
const worker new Worker(worker.js);// 监听来自 Worker 的消息
worker.onmessage function(event) {console.log(接收到来自 Worker 的消息, event.data);
};// 向 Worker 发送消息
worker.postMessage(Hello, Worker!);worker线程
// 监听来自主线程的消息
self.onmessage function(event) {console.log(接收到来自主线程的消息, event.data);// 在后台执行一些任务const result doSomeTask();// 向主线程发送消息self.postMessage(result);
};function doSomeTask() {// 执行一些耗时的任务return 任务完成;
}示例 创建html文件 WebWorker/Web Worker.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./app.js/script
/head
bodybutton idsumBtn求和计算/buttonbutton idbgBtn切换背景/button
/body
/html 创建JS文件WebWorker/app.js
document.addEventListener(DOMContentLoaded,init);function init(){document.getElementById(sumBtn).addEventListener(click,() {let sum 0;for(let i 0 ;i 10000000000;i){sum i;}alert(Sum is sum);})document.getElementById(bgBtn).addEventListener(click,() {if(document.body.style.backgroundColor red) {document.body.style.backgroundColor white;}else{document.body.style.backgroundColor red}})
}
执行结果当没有点击求和计算的时候点击切换背景可以快速的去实现 当点击求和计算了点击切换背景没有办法进行操作 因为我们的求和计算是一个海量的计算操作是一个密集型的一个计算操作它产生了一个代码的阻塞当没有计算完结果并且输出内容的时候我们的切换背景是无法操作的 使用web worker进行一个性能优化
在JS文件WebWorker/app.js
//全局变量的声明
let worker;document.addEventListener(DOMContentLoaded,init);function init(){//参数目录是一个文件路径worker new Worker(web-worker.js)document.getElementById(sumBtn).addEventListener(click,() {//利用worker通过postMessage去传递相应的一个参数 例如do //主线程像worker进行一个通信worker.postMessage({do:Sum});// let sum 0;// for(let i 0 ;i 10000000000;i){// sum i;// }// alert(Sum is sum);})worker.onmessage (ev) {let data ev.data;console.log(data,data);alert(The sum is:data)}document.getElementById(bgBtn).addEventListener(click,() {if(document.body.style.backgroundColor red) {document.body.style.backgroundColor white;}else{document.body.style.backgroundColor red}})
} 创建JS文件WebWorker/web-worker.js
// console.log(self) //会打印出DedicatedWorkerGlobalScope 可以根据属性进行一些操作
self.addEventListener(message,(ev) {// console.log(ev)let data ev.data.do;console.log(data)switch(data){case Sum:let sum 0;console.log(sum,sum)for(let i 0 ;i 10000000000;i){sum i;}self.postMessage(sum);console.log(sum); //通过打印判断是否通信成功break;default:console.log(Unknown command);self.postMessage(close web worker)self.close()}
})
DedicatedWorkerGlobalScope 是 Web Workers 中的一个特定的全局作用域。在 Web Workers 中有两种主要类型的全局作用过: WorkerGlobalScope 和 DedicatedWorkerGlobalScope
WorkerGlobalScope: 表示任何类型的 Web Worker (包括 Dedicated Workers 和 Shared Workers) 的全局作用域.DedicatedWorkerGlobalScope: 表示 Dedicated Worker (专用的 Web Worker) 的全局作用域。
