做网站上市的公司,win10优化大师官网,兴安盟新百度县seo快速排名,彩票网站搭建1.什么是Web Worker? Web Worker 是2008年h5提供的新功能#xff0c;每一个新功能都是为了解决原有技术的的痛点#xff0c;那么这个痛点是什么呢#xff1f;
1.1 JavaScript的单线程
JavaScript 为什么要设计成单线程#xff1f;
这与js的工作内容有关#xff1a;js只…1.什么是Web Worker? Web Worker 是2008年h5提供的新功能每一个新功能都是为了解决原有技术的的痛点那么这个痛点是什么呢
1.1 JavaScript的单线程
JavaScript 为什么要设计成单线程
这与js的工作内容有关js只是用来去做一些用户交互并呈现效果内容。如果js是多线程线程一将dom元素的背景色改成红色线程二将dom元素的背景色改为绿色那么到底上红色还是绿色呢 但是随着前端的高速发展前端承担着越来越多的功能有时需要执行一些复杂的计算任务但是JavaScript的单线程一旦执行某个耗时的任务后面的任务都会阻塞如果在前端能够做多线程的操作那不就解决这个问题啦于是于是Web Worker就应运而生了。
1.2 Web Worker的概念 Web Worker可以创建另外的线程去做一些操作比如执行一些耗时的操作这个操作不影响js主线程比如UI渲染的执行 。Web Worker为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦创建一个 worker 可以将消息发送到创建它的 JavaScript 代码通过将消息发布到该代码指定的事件处理程序反之亦然...... 使用 Web Workers - Web API 接口参考 | MDN 1.3 Web Worker的价值 Web Worker创建的一些辅助线程分别去帮主线程分担一些复杂的、耗时的js运算这样的话主线程后续的代码执行就不会阻塞当辅助线程计算出复杂耗时运算结果后再与主线程通信将计算出的结果告知主线程。
Web Worker新技术价值简而言之提升前端代码运算执行效率
1.4 Web Worker的限制
在Web Worker内 worker 运行在另一个全局上下文中, 有它自己的执行上下文不能使用 window 对象的默认方法和属性不能直接操作 DOM 节点。
1.5 Web Worker 和主线程之间的通信方式 workers 和主线程间的数据传递双方都使用 postMessage() 方法发送各自的消息使用 onmessage 事件处理函数来响应消息消息被包含在 message 事件的 data 属性中。这个过程中数据并不是被共享而是被复制。 2. Web Worker 原生用法
2.1 独享Worker 一个专用 worker 仅能被生成它的脚本所使用
2.1.1 创建一个专用worker
const myWorker new Worker(worker.js); 使用构造器创建worker对象参数是一个 JavaScript 文件——这个文件包含将在 worker 线程中运行的代码。
2.1.2 主线程与worker之间的通信
主线程向worker发送信息
myWorker.postMessage([first.value, second.value]);
主线程监听worker信息
myWorker.onmessage (e) {console.loge.data;
};
worker监听主线程信息/worker向主线程发送信息
onmessage function(e) {postMessage(e.data);
}
2.1.3 终止worker
myWorker.terminate(); worker 线程会被立即终止。
2.1.4 在worker中引入外部脚本 Worker 线程能够访问一个全局函数 importScripts() 来引入脚本该函数接受 0 个或者多个 URI 作为参数来引入资源
importScripts(); /* 什么都不引入 */
importScripts(foo.js); /* 只引入 foo.js */
importScripts(foo.js, bar.js); /* 引入两个脚本 */
importScripts(//example.com/hello.js); /* 你可以从其他来源导入脚本 */
2.2 独享worker应用案例 将你输入的 2 个数字作乘法。输入的数字会发送给一个专用 worker由专用 worker 作乘法后再返回给页面进行展示。
index.html
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width /titleWeb Workers basic example/title/headbodydiv classcontrols tabindex0formdivlabel fornumber1Multiply number 1: /labelinput typetext idnumber1 value0 //divdivlabel fornumber2Multiply number 2: /labelinput typetext idnumber2 value0 //div/formp classresultResult: 0/p/divscriptconst first document.querySelector(#number1);const second document.querySelector(#number2);const result document.querySelector(.result);if (window.Worker) {// 1.创建一个worker 指定一个js脚本的 URI 来执行 worker 线程const myWorker new Worker(worker.js);[first, second].forEach(input {input.onchange function() {// 2.主线程给worker发送数据参数是数组格式myWorker.postMessage([first.value, second.value]);console.log(Message posted to worker);}})// 3.主线程监听worker传递过来的信息// 数据本身在e.data中myWorker.onmessage function(e) {result.textContent e.data;console.log(Message received from worker);}} else {console.log(Your browser doesn\t support web workers.);}/script/body
/html
worker.js
// 1.监听主线程发过来的数据
onmessage function(e) {console.log(Worker: Message received from main script);const result e.data[0] * e.data[1];if (isNaN(result)) {
// 2.给主线程发送数据postMessage(Please write two numbers);} else {const workerResult Result: result;console.log(Worker: Posting message back to main script);postMessage(workerResult);}
} 备注 在主线程中使用时onmessage 和 postMessage() 必须挂在 worker 对象上而在 worker 中使用时不用这样做。原因是在 worker 内部worker 是有效的全局作用域相当于js环境中的window。 2.2 共享Worker
一个共享 worker 可以被多个脚本使用——即使这些脚本正在被不同的 window、iframe 或者 worker 访问。
示例 在这个示例中有 2 个 HTML 页面每个页面所包含一个 JavaScript 代码这两个脚本使用同一个 worker 来完成实际需要的运算。
页面1:
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width /titleShared Workers basic example/title/headbodyh1共享Worker示例-页面1/h1div classcontrols tabindex0formdivlabel fornumber1Multiply number 1: /labelinput typetext idnumber1 value0 //divdivlabel fornumber2Multiply number 2: /labelinput typetext idnumber2 value0 //div/formp classresult1Result: 0/ppa hrefindex2.html target_blankGo to 示例-页面2/a/p/divscriptconst first document.querySelector(#number1);const second document.querySelector(#number2);const result1 document.querySelector(.result1);if (!!window.SharedWorker) {// 1.创建一个共享workerconst myWorker new SharedWorker(worker.js); // 4.使用端口对象调用postMessage给worker发送信息first.onchange function () {myWorker.port.postMessage([first.value, second.value]);console.log(Message posted to worker);};second.onchange function () {myWorker.port.postMessage([first.value, second.value]);console.log(Message posted to worker);};// 2.通过port端口与worker通信// 3.通过onmessage显式的打开端口连接myWorker.port.onmessage function (e) {result1.textContent e.data;console.log(Message received from worker);console.log(e.lastEventId);};}/script/body
/html
页面2:创建worker和与worker的过程和页面1是一样的
!DOCTYPE html
html langenheadmeta charsetutf-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width /titleShared Workers basic example/title/headbodyh1共享Worker示例-页面2/h1div classcontrols tabindex0formdivlabel fornumber3Square number: /labelinput typetext idnumber3 value0 //div/formp classresult2Result: 0/p/divscriptconst squareNumber document.querySelector(#number3);const result2 document.querySelector(.result2);if (!!window.SharedWorker) {// 1.创建一个共享workerconst myWorker new SharedWorker(worker.js); // 4.使用端口对象调用postMessage给worker发送信息squareNumber.onchange function () {myWorker.port.postMessage([squareNumber.value, squareNumber.value]);console.log(Message posted to worker);};// 2.通过port端口与worker通信// 3.通过onmessage显式的打开端口连接myWorker.port.onmessage function (e) {result2.textContent e.data;console.log(Message received from worker);};}/script/body
/html
worker.js
// 在父级线程中设置 onmessage 事件处理函数后
// 会执行worker的onconnect时间
onconnect function (event) {// 1.使用事件的 ports 属性来获取端口并存储在变量中const port event.ports[0];// 2.为端口添加一个 onmessage 处理函数用来做运算并回传结果给主线程port.onmessage function (e) {const workerResult Result: ${e.data[0] * e.data[1]};port.postMessage(workerResult);};
};
3.在Vue项目中使用 Web Worker 在vue项目里面不能直接使用Web Worker要使用Web Worker有两种方式一种是使用worker-loader,一种是使用vue-worker下面对这两种方法详细介绍。
3.1 worder-loader
使用Webpack中的worker-loader插件去解析Web worker并且在vue.config.js中去做相应配置。
3.2 vue-worker 参考
使用 Web Workers - Web API 接口参考 | MDN
Web Worker 使用教程 - 阮一峰的网络日志
性能优化之使用vue-worker插件基于Web Worker开启多线程运算提高效率 - 掘金
Web Worker入门及在 Vue 中如何使用 - 掘金
https://www.npmjs.com/package/vue-worker?activeTabreadme
