首页 > 其他分享> 文章详细

JS学习-Web Workers API接口

2022-08-15 12:03:39 阅读：223 来源： 互联网

标签：function Web console worker Workers Worker JS navigator origin

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 ]

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

标签：function,Web,console,worker,Workers,Worker,JS,navigator,origin
来源： https://www.cnblogs.com/-LemonWater-/p/16580293.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9