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); // 1
postMessage(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
- Angular中ngCookies模块介绍
- 如何让jboss eap 6.2+ 的多个war应用共享 jar 包?
- scala 学习笔记(07) 一等公民的函数
- 让BASH,VIM美美的Powerline
- 极品三数666.cn易主,价格让人大惊!
- ui-router中使用ocLazyLoad和resolve
- rpc框架之 avro 学习 2 - 高效的序列化
- rpc框架之HA/负载均衡构架设计
- 使用Docker-Docker for Web Developers(2)
- 打造高效前端工作环境-tmuxinator
- 在Linux Mint上安装node.js和npm
- JS魔法堂:再识Number type
- (cljs/run-at (JSVM. :browser) "搭建刚好可用的开发环境!")
- (cljs/run-at (->JSVM :browser) "语言基础")
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法