其他分享
首页 > 其他分享> > JS学习-Web Workers API接口

JS学习-Web Workers API接口

作者:互联网

Web Workers API接口

通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。

AbstractWorker

定义适用于所有类型 worker 属性和方法的抽象接口,包括基础的 Worker,ServiceWorker 以及 SharedWorker。

  1. events : [ one rror ]

SharedWorker

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

  1. properties : [ port ]

    • port (只读): 返回一个 MessagePort 对象,该对象可以用来进行通信和对共享 worker 进行控制。
  2. events : [ one rror ]

SharedWorkerGlobalScope

通过访问self关键字。JavaScript Reference中列出了一些其他的全局函数,名称空间对象和构造函数,这些函数通常不与worker全局范围相关联,但可以在其上使用。
继承自WorkerGlobalScope

  1. properties: [ name | applicationCache | self | console | location | navigator | performance ]
  2. events: [ onconnect ]
  3. methods: [ close | dump | importScripts | atob | btoa | setInterval | clearInterval | setTimeout |clearTimeout]

Worker

Worker 接口是 Web Workers API 的一部分,指的是一种可由脚本创建的后台任务

  1. events : [ one rror | onmessage | onmessageerror]
  2. 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

  1. properties : [ caches | navigator | self | location | performance ]<=只读

    • caches : 返回CacheStorage与当前上下文关联的 对象。
    • navigator : 返回WorkerNavigator与工作程序相关联的属性。
    • self : 指向 WorkerGlobalScope 自身。
    • location : 返回WorkerLocation与工作程序相关联的属性。
    • performance : 返回Performance要在工作程序上使用的对象。
  2. events : [ one rror | onoffline | ononline | onlanguagechange | onclose ]

  3. 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(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

  1. properties: [ connection(有关设备网络连接的信息。) | locks(请求新Lock对象和查询现有Lock对象) | permissions(用于的API查询和更新许可状态) | serial(启用串行端口控制的入口) | storage(管理持久性权限和估计可用存储的接口) | hardwareConcurrency(可用逻辑处理器核心的数量。) | language(浏览器语言版本) | languages(用户已知的语言。) | onLine(浏览器是否在线) | userAgent(浏览器的用户代理字符串) ]
WorkerLocation

定义由执行的脚本的绝对位置Worker

  1. properties: [ href | protocol(执行的脚本的URL的协议方案) | host | hostname | origin(URL的起源) | port | pathname | search(?后面的字符串) | hash(#后面的字符串) ]
  2. methods: [ toString(返回url) ]
DedicatedWorkerGlobalScope

DedicatedWorkerGlobalScope 对象(也就是 Worker 全局作用域)可以通过 self 关键字来访问。继承自WorkerGlobalScope

  1. properties: [ name(创建 Worker 时,可以选择为其设置一个名称) | self (本身的引用| console | location | navigator | performance ]
  2. events: [ onmessage | onmessageerror ]
  3. 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接口 提供一个对一个服务工作者的引用。

  1. properties: [ scriptURL(ServiceWorker序列化脚本URL) | state ]

    • state: [ installing | installed | activating | activated | redundant ]
  2. events: [ onstatechange(state改变时) ]

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