福建省建设干部培训中心网站首页网页后端开发需要学什么

当前位置： 首页 > news >正文

福建省建设干部培训中心网站首页,网页后端开发需要学什么,wordpress 侧边栏修改,快速搭建网站工具目录一、Web Worker1 Web Worker 是什么2 Web Worker 使用3 简单示例二、SharedWorker2.1 SharedWorker 是什么2.2 SharedWorker 的使用方式2.3 多页面数据共享的例子一、Web Worker 1 Web Worker 是什么 Web Worker是 HTML5 标准的一部分#xff0c;这一规范定义了一套 API… 目录一、Web Worker1 Web Worker 是什么2 Web Worker 使用3 简单示例二、SharedWorker2.1 SharedWorker 是什么2.2 SharedWorker 的使用方式2.3 多页面数据共享的例子一、Web Worker 1 Web Worker 是什么 Web Worker是 HTML5 标准的一部分这一规范定义了一套 API。 Web Worker 允许我们在js主线程之外运行一个独立的线程Worker也就是运行在后台的一个独立的js脚本。因为Worker线程是独立的线程与js主线程能够同时允许互不阻塞。 所以如果有大量运算任务时可以把任务交给Worker线程去处理当Worker线程计算完成再把结果返回给js主线程。这样js主线程只用专注处理业务逻辑不用耗费过多时间去处理大量复杂计算从而减少了阻塞时间也提高了运行效率页面流畅度和用户体验自然而然也提高了。能解决的问题是 1 解决页面卡死问题 2 发挥多核CPU的优势提高JS性能2 Web Worker 使用 2.1 创建 worker 创建 worker 只需要通过 new 调用 Worker() 构造函数即可它接收两个参数 const worker new Worker(path, options);参数说明path有效的js脚本的地址必须遵守同源策略。无效的js地址或者违反同源策略会抛出SECURITY_ERR 类型错误options.type可选用以指定 worker 类型。该值可以是 classic 或 module。 如未指定将使用默认值 classicoptions.credentials可选用以指定 worker 凭证。该值可以是 omit, same-origin或 include。如果未指定或者 type 是 classic将使用默认值 omit (不要求凭证)options.name可选在 DedicatedWorkerGlobalScope 的情况下用来表示 worker 的 scope 的一个 DOMString 值主要用于调试目的。 2.2 主线程与 worker 线程数据传递 发送消息postMessage()。postMessage() 方法接收的参数可以是字符串、对象、数组等接受消息监听 message 事件2.3 监听错误 web worker 提供两个事件监听错误error 和 messageerror。 这两个事件的区别是: 事件描述error当worker内部出现错误时触发messageerror当 message 事件接收到无法被反序列化的参数时触发 2.4 关闭 worker 线程 worker 线程的关闭在主线程和 worker 线程都能进行操作但对 worker 线程的影响略有不同。 // main.js主线程 const myWorker new Worker(/worker.js); // 创建worker myWorker.terminate(); // 关闭worker// worker.jsworker线程 self.close(); // 直接执行close方法就ok了无论是在主线程关闭 worker还是在 worker 线程内部关闭 workerworker 线程当前的 Event Loop 中的任务会继续执行。至于 worker 线程下一个 Event Loop 中的任务则会被直接忽略不会继续执行。 区别是在主线程手动关闭 worker主线程与 worker 线程之间的连接都会被立刻停止即使 worker 线程当前的 Event Loop 中仍有待执行的任务继续调用 postMessage() 方法但主线程不会再接收到消息。 在 worker 线程内部关闭 worker不会直接断开与主线程的连接而是等 worker 线程当前的 Event Loop 所有任务执行完再关闭。也就是说在当前 Event Loop 中继续调用 postMessage() 方法主线程还是能通过监听message事件收到消息的。 详情例子可以阅读原文XXXX 2.5 Worker 线程引用其他js文件 总有一些场景需要放到 worker 进程去处理的任务很复杂需要大量的处理逻辑我们当然不想把所有代码都塞到 worker.js 里那样就太糟糕了。不出意料web worker 为我们提供了解决方案我们可以在 worker 线程中利用 importScripts() 方法加载我们需要的js文件而且通过此方法加载的js文件不受同源策略约束 // utils.js const add (a, b) a b; // worker.jsworker线程 // 使用方法importScripts(path1, path2, …); importScripts(./utils.js); // 加载需要的js文件console.log(add(1, 2)); // log 32.6 ESModule 模式 还有一些场景当你开启一个新项目正高兴的用 importScripts() 导入js文件时发现 importScripts() 方法执行失败。仔细一看原来是新项目的 js 文件都用的是 ESModule 模式。难道要把引用到的文件都改一遍吗当然不用还记得上文提到初始化 worker 时的第二个可选参数吗我们可以直接使用 module 模式初始化 worker 线程 // main.js主线程 const worker new Worker(/worker.js, {type: module // 指定 worker.js 的类型 });// utils.js export default add (a, b) a b;// worker.jsworker线程 import add from ./utils.js; // 导入外部jsself.addEventListener(message, e { postMessage(e.data); });add(1, 2); // log 3export default self; // 只需把顶级对象self暴露出去即可2.7 主线程和 worker 线程可传递哪些类型数据 很多场景在调用某些方法时我们将一些自定义方法当作参数传入。但是当你使用 postMessage() 方法时这么做将会导致 DATA_CLONE_ERR 错误。 // main.js主线程 const myWorker new Worker(/worker.js); // 创建workerconst fun () {};myWorker.postMessage(fun); // ErrorFailed to execute postMessage on Worker: (){} could not be cloned.那么使用 postMessage() 方法传递消息可以传递哪些数据 postMessage() 传递的数据可以是由结构化克隆算法处理的任何值或 JavaScript 对象包括循环引用。 结构化克隆算法不能处理的数据 Error 以及 Function 对象DOM 节点对象的某些特定参数不会被保留 RegExp 对象的 lastIndex 字段不会被保留属性描述符setters 以及 getters以及其他类似元数据的功能同样不会被复制。例如如果一个对象用属性描述符标记为 read-only它将会被复制为 read-write原形链上的属性也不会被追踪以及复制。
结构化克隆算法支持的数据类型 类型说明所有的原始类型symbols 除外Boolean 对象String 对象DateRegExplastIndex 字段不会被保留。BlobFileFileListArrayBufferArrayBufferView这基本上意味着所有的 类型化数组 如 Int32Array 等。ImageDataArrayObject仅包括普通对象如对象字面量MapSet 3 简单示例 主线程文件 webworker.html !DOCTYPE html htmlheadmeta charsetutf-8 /titleWeb Workers/title/headbodybutton onclickstartWorker()开启 worker 线程/buttonbutton onclickstopWorker()关闭 worker 线程/buttonscriptvar myWorker;function startWorker() {// 1 创建 workermyWorker new Worker(./workers.js);// 2 向 worker 线程发送消息myWorker.postMessage(主线程向 worker 线程发送消息);// 3 接受 worker 线程发送的消息myWorker.addEventListener(message, (e) {console.log(主线程收到的 worker 线程发来的数据:, e.data);});// 这种写法也可以 接收消息// myWorker.onmessage e {// console.log(e.data);// };// 4 监听错误myWorker.addEventListener(error, (err) {console.log(err.message); // 当worker内部出现错误时触发});myWorker.addEventListener(messageerror, (err) {console.log(err.message); // 当 message 事件接收到无法被反序列化的参数时触发});}// 5 在主线程中关闭 worker 线程function stopWorker() {myWorker.terminate();console.log(关闭 worker 线程);myWorker undefined;}/script/body /htmlworker 线程文件 worker.js (function () {// 接受与发送消息self.addEventListener(message, e { // 接收到消息console.log(worker 线程收到的消息, e.data);self.postMessage(向主线程发送消息); // 向主线程发送消息});// 监听错误self.addEventListener(error, err {console.log(err.message);});self.addEventListener(messageerror, err {console.log(err.message);});// 关闭 worker 线程// self.close(); // 直接执行close方法就ok了} )()二、SharedWorker 2.1 SharedWorker 是什么 SharedWorker 是一种特殊类型的 Worker可以被多个浏览上下文访问比如多个 windowsiframes 和 workers但这些浏览上下文必须同源。它们实现于一个不同于普通 worker 的接口具有不同的全局作用域SharedWorkerGlobalScope 但是继承自WorkerGlobalScope 2.2 SharedWorker 的使用方式 SharedWorker 线程的创建和使用跟 worker 类似事件和方法也基本一样。 不同点在于主线程与 SharedWorker 线程是通过MessagePort建立起链接数据通讯方法都挂载在SharedWorker.port上。 值得注意的是如果你采用 addEventListener 来接收 message 事件那么在主线程初始化SharedWorker() 后还要调用 SharedWorker.port.start() 方法来手动开启端口。 // main.js主线程 const myWorker new SharedWorker(./sharedWorker.js);myWorker.port.start(); // 开启端口myWorker.port.addEventListener(message, msg {console.log(msg.data); }) 但是如果采用 onmessage 方法则默认开启端口不需要再手动调用SharedWorker.port.start()方法 // main.js主线程 const myWorker new SharedWorker(./sharedWorker.js);myWorker.port.onmessage msg {console.log(msg.data); }; 以上两种方式效果是一样的具体信息请参考MessagePort。 由于 SharedWorker 是被多个页面共同使用那么除了与各个页面之间的数据通讯是独立的同一个SharedWorker 线程上下文中的其他资源都是共享的。基于这一点很容易实现不同页面之间的数据通讯。 2.3 多页面数据共享的例子 一个利用SharedWorker实现多页面数据共享的例子 index 页面的 add 按钮每点击一次向 sharedWorker 发送一次 add 数据页面 count 增加1 // index.html!DOCTYPE html html langzh-CNheadmeta charsetutf-8titleindex page/title/headbodypindex page: /pcount: span idcontainer0/spanbutton idaddadd/buttonbr// 利用iframe加载iframe src./iframe.html/iframe/bodyscript typetext/javascriptif (!!window.SharedWorker) {const container document.getElementById(container);const add document.getElementById(add);const myWorker new SharedWorker(./sharedWorker.js);myWorker.port.start();myWorker.port.addEventListener(message, msg {container.innerText msg.data;});add.addEventListener(click, () {myWorker.port.postMessage(add);});}/script /html iframe 页面的 reduce 按钮每点击一次向 sharedWorker 发送一次 reduce 数据页面count 减少1 // iframe.html!DOCTYPE html html langzh-CNheadmeta charsetutf-8titleiframe page/title/headbodypiframe page: /pcount: span idcontainer0/spanbutton idreducereduce/button/bodyscript typetext/javascriptif (!!window.SharedWorker) {const container document.getElementById(container);const reduce document.getElementById(reduce);const myWorker new SharedWorker(./sharedWorker.js);myWorker.port.start();myWorker.port.addEventListener(message, msg {container.innerText msg.data;})reduce.addEventListener(click, () {myWorker.port.postMessage(reduce);});}/script /html sharedWorker 在接收到数据后根据数据类型处理 num 计数然后返回给每个已连接的主线程。 // sharedWorker.jslet num 0; const workerList [];self.addEventListener(connect, e {const port e.ports[0];port.addEventListener(message, e {num e.data add ? 1 : -1;workerList.forEach(port { // 遍历所有已连接的part发送消息port.postMessage(num);})});port.start();workerList.push(port); // 存储已连接的partport.postMessage(num); // 初始化 }); 结果可以发现index 页面和 iframe 页面的 count 始终保持一致实现了多个页面数据同步。