Web Workers API接口
通过使用Web Workers，Web应用程序可以在独立于主线程的后台线程中，运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务，从而允许主线程（通常是UI线程）不会因此被阻塞/放慢。
- 主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息, 并且通过 onmessage 这个 event handler来接收信息（传递的信息包含在 Message 这个事件的data属性内) 。数据的交互方式为传递副本，而不是直接共享数据。
- 在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性。
- worker 可以另外生成新的 worker，这些 worker 与它们父页面的宿主相同。 此外，worker 可以通过 XMLHttpRequest 来访问网络，只不过 XMLHttpRequest 的 responseXML 和 channel 这两个属性的值将总是 null 。
AbstractWorker
定义适用于所有类型 worker 属性和方法的抽象接口，包括基础的 Worker，ServiceWorker 以及 SharedWorker。
- events : [ one rror ]
SharedWorker
SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。
-
properties : [ port ]
- port (只读): 返回一个 MessagePort 对象，该对象可以用来进行通信和对共享 worker 进行控制。
-
events : [ one rror ]
SharedWorkerGlobalScope
通过访问self关键字。JavaScript Reference中列出了一些其他的全局函数，名称空间对象和构造函数，这些函数通常不与worker全局范围相关联，但可以在其上使用。
继承自WorkerGlobalScope
- properties: [ name | applicationCache | self | console | location | navigator | performance ]
- events: [ onconnect ]
- methods: [ close | dump | importScripts | atob | btoa | setInterval | clearInterval | setTimeout |clearTimeout]
Worker
Worker 接口是 Web Workers API 的一部分，指的是一种可由脚本创建的后台任务
- events : [ one rror | onmessage | onmessageerror]
- methods : [ postMessage | terminate ]
new Worker(url)
var myWorker = new Worker("worker.js");
// add error event
myWorker.onerror = function() {
console.log('error with your worker!');
}
// add onmessage event
myWorker.onmessage = function(e) {
console.log('Message received from worker');
}
// myworker will send msg when first change
first.onchange = function(){
myWorker.postMessage([first.value]);
console.log('Message posted once to worker');
//立即终止 Worker 的行为
myWorker.terminate();
}
WorkerGlobalScope
-
properties : [ caches | navigator | self | location | performance ]<=只读
- caches : 返回CacheStorage与当前上下文关联的 对象。
- navigator : 返回WorkerNavigator与工作程序相关联的属性。
- self : 指向 WorkerGlobalScope 自身。
- location : 返回WorkerLocation与工作程序相关联的属性。
- performance : 返回Performance要在工作程序上使用的对象。
-
events : [ one rror | onoffline | ononline | onlanguagechange | onclose ]
-
methods : [ close | importScripts | dump | setTimeout | clearTimeout | setInterval | clearInterval | fetch ]
- close : 丢弃在WorkerGlobalScope事件循环中排队的所有任务。
- importScripts : 将一个或多个脚本同步导入到工作者的作用域中。
- dump : 允许您将消息写到stdout-即在您的终端中。
close() importScripts('index1.js','index2.js') dump('msg')- atob : 允许您将消息写到stdout-即在您的终端中。
- btoa : 从String对象中创建一个base-64编码的ASCII字符串，其中字符串中的每个字符都被视为一个二进制数据字节。
let encodedData = window.btoa("Hello, world"); // 编码 let decodedData = window.atob(encodedData); // 解码- setTimeout : 设置一个计时器，一旦计时器到期，该计时器将执行功能或指定的代码段。
- clearTimeout : 取消了先前通过调用setTimeout()建立的定时器。
setTimeout(callback,delay[,...args]) clearTimeout(timeoutID) var timeoutID = window.setTimeout(myCallback, 500, 'arg 1', 'arg 2'); // after 500ms print once a & b function myCallback(a, b){ console.log(a); console.log(b); } clearTimeout(timeoutID)- setInterval : 提供的方法重复调用函数或执行代码段，每次调用之间有固定的时间延迟。它返回一个唯一标识该间隔的间隔ID(intervalID)
- clearInterval : 取消了以前通过调用来建立的定时重复动作 setInterval()。
setInterval(callback,delay[,...args]) clearInterval(intervalID) var intervalID = window.setInterval(myCallback, 500, 'arg 1', 'arg 2'); // every 500ms print a & b function myCallback(a, b){ console.log(a); console.log(b); } clearInterval(intervalID)- createImageBitmap : 从给定的源创建位图，可以选择裁剪为仅包含该源的一部分。
createImageBitmap( <img> , x , y , w , h [, options] ) options: { imageOrientation: [ 'none' | 'flipY'(垂直翻转图像) ], premultiplyAlpha: [ 'none' | 'premultiply' | 'default' ]是否应将位图的颜色通道乘以Alpha通道, colorSpaceConversion: [ 'none' | 'default' ]是否应使用色彩空间转换对图像进行解码, resizeWidth: <bigint> 输出宽度, resizeHeight: <bigint> 输出高度, resizeQuality: [ 'pixelated' | 'low'(默认) | 'medium' | 'high' ]用于调整输入大小以匹配输出尺寸的算法, } var canvas = document.getElementById('myCanvas'),ctx = canvas.getContext('2d'),image = new Image(); // Load the sprite sheet from an image file image.src = 'sprites.png'; // Wait for the sprite sheet to load image.onload = function() { Promise.all([ // Cut out two sprites from the sprite sheet createImageBitmap(image, 0, 0, 32, 32), createImageBitmap(image, 32, 0, 32, 32) ]).then(function(sprites) { // Draw each sprite onto the canvas ctx.drawImage(sprites[0], 0, 0); ctx.drawImage(sprites[1], 32, 32); }); }- fetch : 用于发起电子杂志资源的请求。返回一个Promise。
https://www.w3cschool.cn/fetch_api/fetch_api-hokx2khz.html
fetch(resource[,init]) resource: [ <url> | <request> ] init: { methods:[ 'get' | 'post' ], headers: <map>, body: <Blob>..., mode: [ 'cors'(允许跨源请求) | 'no-cors'(防止跨域泄漏数据而导致的安全和隐私问题) | 'same-origin' | 'navigate'(支持导航的模式) ],模式, credentials: [ 'omit'(忽略所有请求的凭据操作) | 'same-origin'(允许同源请求) | 'include']控制浏览器对凭据（cookie，HTTP身份验证条目和TLS客户端证书）进行的操作, cache: [ 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache' | 'only-if-cached' ]缓存模式, redirect: [ 'follow' | 'error' | 'manual']如何处理redirect回应, referrer: [ 'client' | 'no-referrer' | <URL> ]指定请求的引用者, referrerPolicy: [ 'no-referrer' | 'no-referrer-when-downgrade' | 'same-origin' | 'origin' | 'strict-origin' | 'origin-when-cross-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' ]用于请求的引用者策略, integrity: 请求的子资源完整性值, keepalive: 请求的子资源完整性值, singal: <AbortSignal> } const myImage = document.querySelector('img'); const myInit = { method: 'GET', headers: { 'Accept': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myRequest = new Request('flowers.jpg'); fetch(myRequest,myInit) .then(function(response) { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.blob(); }).then(function(response) { let objectURL = URL.createObjectURL(response); myImage.src = objectURL; });
WorkerNavigator
允许从一个访问接口Worker。每个工作人员都会初始化一个这样的对象，并且可以通过WorkerGlobalScope.navigator调用获得的属性使用该对象self.navigator。
- properties: [
connection（有关设备网络连接的信息。）|locks（请求新Lock对象和查询现有Lock对象）|permissions（用于的API查询和更新许可状态）|serial（启用串行端口控制的入口）|storage（管理持久性权限和估计可用存储的接口）|hardwareConcurrency（可用逻辑处理器核心的数量。）|language（浏览器语言版本）|languages（用户已知的语言。）|onLine（浏览器是否在线）|userAgent（浏览器的用户代理字符串）]
WorkerLocation
定义由执行的脚本的绝对位置Worker
- properties: [ href | protocol(执行的脚本的URL的协议方案) | host | hostname | origin(URL的起源) | port | pathname | search(?后面的字符串) | hash(#后面的字符串) ]
- methods: [ toString(返回url) ]
DedicatedWorkerGlobalScope
DedicatedWorkerGlobalScope 对象（也就是 Worker 全局作用域）可以通过 self 关键字来访问。继承自WorkerGlobalScope
- properties: [ name(创建 Worker 时，可以选择为其设置一个名称) | self (本身的引用| console | location | navigator | performance ]
- events: [ onmessage | onmessageerror ]
- methods: [ atob | btoa | setInterval | clearInterval | setTimeout | clearTimeout]
ChromeWorker
开发特权代码，并且想创建一个可以使用js-ctypes来执行对本机代码的调用的工作程序插件必须使用绝对URL来加载其工作程序，并且这些URL必须使用chrome://或resource://协议（file://不接受）。希望使用file://URL的插件必须首先使用以下代码注册资源替换路径：
var fileuri = Services.io.newFileURI(file);
Services.io.getProtocolHandler('resource')
.QueryInterface(Ci.nsIResProtocolHandler)
.setSubstitution('my-cool-addon', fileuri);
var worker = new Worker('resource://my-cool-addon/worker.js');
ServiceWorker
ServiceWorker API 的 ServiceWorker接口 提供一个对一个服务工作者的引用。
-
properties： [ scriptURL(ServiceWorker序列化脚本URL) | state ]
- state: [ installing | installed | activating | activated | redundant ]
-
events: [ onstatechange(state改变时) ]
-
methods: [ terminate ]
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js', { scope: './'})
.then(function (registration) {
var serviceWorker,arr = [{obj:registration.installing,name:'installing'},{obj:registration.waiting,name:'waiting'},{obj:registration.active,name:'active'},]
for(let item of arr){
if(item.obj){
serviceWorker = item.obj
document.querySelector('#kind').textContent = item.name
}
}
if (serviceWorker) {
serviceWorker.addEventListener('statechange', function (e) {
logState(e.target.state);
});
}
}).catch (function (error) {
// Something went wrong during registration. The service-worker.js file
// might be unavailable or contain a syntax error.
});
} else {
// The current browser doesn't support service workers.
}