Web Worker
Web Worker
JavaScript
是单线程语言,如果在Js
主线程上进行比较耗时的操作,那么不仅异步的事件回调无法正常完成,浏览器的渲染线程也将被阻塞,无法正常渲染页面。Web Worker
能够把JavaScript
计算委托给后台线程,线程可以执行任务而不干扰用户界面。
描述
worker
是使用构造函数创建的一个对象来运行一个Js
文件,这个Js
文件中包含将在worker
线程中运行的代码,worker
运行的全局对象不是当前window
,专用worker
线程运行环境的全局对象为DedicatedWorkerGlobalScope
,共享worker
线程运行环境的全局对象为SharedWorkerGlobalScope
。
在worker
可以运行任意JavaScript
代码,但不能够直接操作DOM
节点,也不能使用window
对象的默认方法和属性,但是在window
对象下的很多方法包括WebSockets
,IndexedDB
等在worker
全局对象中都有实现。
worker
线程与主线程之间的通信是通过postMessage
发送消息以及onmessage
事件处理函数来接收消息,这个过程中数据并不是被共享而是被复制。
只要运行在同源的父页面中,worker
可以依次生成新的worker
。此外worker
还可以使用XMLHttpRequest
进行网络I/O
,但是XMLHttpRequest
的responseXML
和channel
属性总会返回null
。
专用worker
专用worker
仅能被生成它的脚本使用,通过构造函数生成worker
,然后通过消息传递机制将数据传递到worker
线程计算完毕后再将数据传回进行下一步操作,worker
线程的关闭可以在主线程中关闭也可以在worker
线程中关闭。
// 需要开启一个server
var worker = new Worker('worker.js'); // 实例化worker线程
worker.postMessage(1); // 传递消息
worker.onmessage = function(e){ // 接收消息事件console.log(e.data); // 2// worker.terminate(); // 关闭worker线程
}
// worker.js worker线程
onmessage = function(e) { // worker接收消息var v = e.data; console.log(v); // 1postMessage(v * 2); // 乘以2并传递消息 // 简单的计算// close(); // 关闭worker线程
}
共享worker
共享worker
可以同时被多个脚本使用,即使这些脚本正在被不同的window
、iframe
或者worker
访问,也就是说可以使用共享worker
进行多个浏览器窗口间通信,当然共享worker
的通信必须为同源,不能跨域通信。生成共享worker
与生成专用worker
非常相似,只是构造器的名字不同,他们之间一个很大的区别在于:共享worker
必须通过一个确切的打开的端口对象供脚本与worker
通信,在专用worker
中这一部分是隐式进行的。如果父级线程和worker
线程需要双向通信,那么它们都需要调用start()
方法,对于消息的传递依然使用postMessage
但是必须通过调用端口上的postMessage
方法来实现消息通信。
// 需要开启一个server
// 页面A 浏览器窗口间通信实例
var worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.postMessage(1);
// 页面B 浏览器窗口间通信实例
var worker = new SharedWorker('worker.js');
worker.port.start();
worker.port.onmessage = function(event){console.log(event.data);
};
// worker.js worker线程
var portArr = [];
onconnect = function(e) {var port = e.ports[0];if(portArr.indexOf(port) === -1) portArr.push(port);port.onmessage = function(e) {portArr.forEach( v => {v.postMessage(e.data);})}
}
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://developer.mozilla.org/zh-CN/docs/Web/API/Worker
https://developer.mozilla.org/zh-CN/docs/Web/API/SharedWorker
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
Web Worker相关推荐
- 深入理解javascript异步编程障眼法h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- 什么是Web Worker?
简单点说,Web Worker就是一个运行在后台的JavaScript线程,不会影响页面的响应. 我们知道,JavaScript是单线程的脚本语言,即同一时刻只能做一件事情,否则会带来极其复杂的同步问 ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
- web worker的介绍和使用
文章目录 简介 Web Workers的基本概念和使用 Web Workers的分类 worker和main thread之间的数据传输 简介 什么是web worker呢?从名字上就可以看出,web ...
- HTML5 Web Worker
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
- 如何debug web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
- 如何调试 web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- 如何查找历史线程阻塞原因_学习 Web Worker(js中的“多线程”)
昨天部门例会,讨论开发的系统遇到的问题,遇到一个医保上传比较耗时的问题,解决方案提到了Web Worker,学习一波. 首先简单介绍一下什么是web worker.我们都知道在浏览器中javascri ...
最新文章
- Java 的 JSP 已经被淘汰了吗?
- 【51NOD1287】加农炮
- 屏幕旋转的处理方法,实现视图位置的变化
- 百度ERNIE新突破,登顶中文医疗信息处理权威榜单CBLUE冠军
- OpenGL sparsetexture稀疏纹理的实例
- python参数化建模 书_Python 中如何实现参数化测试?
- 文本分类模型_多标签文本分类、情感倾向分析、文本实体抽取模型如何定制?...
- Python3 从零单排7_模块ossys
- leetcode-Combinations 复习复习排列组合
- Kafka Streams 剖析
- php中如果想要打印出来的结果换行怎么操作_现在,就要对文件的批操作,动刀子啦!!!...
- 递归装饰器正则运算模块
- [转]C#:手把手教你用C#打包应用程序(安装程序卸载程序)
- python re sub模块字符串提取非字母非数字_7.python之正则表达式re模块
- 可魔术变身笔记本的平板电脑,华为全功能MediaPad 10 FHD评测
- 移动端 Retina屏 各大主流网站1px的解决方案
- 旧瓶装新酒——memcache作为DRDOS反射放大器
- 爱普生发票打印机 每次连续打印发票,都跳页,中间一张空白
- 清华现超级“学霸” 15门课程100分4门99分(图)
- PEGASUS: Pre-training with Extracted Gap-sentences for Abstractive Summarization论文笔记