JS学习-Web Workers API接口

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 : [ onerror ]

SharedWorker

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口、iframe 或其他 worker。

properties : [ port ]
- port (只读): 返回一个 MessagePort 对象，该对象可以用来进行通信和对共享 worker 进行控制。
events : [ onerror ]

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 : [ onerror | 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 : [ onerror | onoffline | ononline | onlanguagechange | onclose ]

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.
}

posted @ 2022-08-15 11:49 ~LemonWater 阅读(260) 评论(0) 编辑收藏举报

刷新页面返回顶部

~LemonWater