webWorker 异步加载

一个异步的脚本，不会阻塞浏览器渲染，运行在另一个全局上下文中，不能使用window特点：.仅仅能被首次生成它的脚本使用，只能服务于新建它的页面，不同页面之间不能共享同一个 Web Worker。.当页面关闭时，该页面新建的 Web Worker 也会随之关闭，不会常驻在浏览器中.必须与主线程的脚本文件同源.不能直接操作DOM节点.不能使用window对象的默认方法和属性(如alert、confirm等).传输数据并不是被共享而是被复制。.在同源的父页面中，workers可以依次生成新的workers.线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络.可以使用大量window对象之下的东西，包括WebSockets，IndexedDB以及FireFox OS专用的Data Store API等数据存储机制基本使用:if (window.Worker) {const worker=new Worker(url,options)}url:表示worker将执行的脚本的URL、路径、类似blob这样的url，它必须遵守同源策略。options:type：该值可以是 classic 或 module. 如果未指定，将使用默认值 classic.credentials：用以指定 worker 凭证，可以是 omit, same-origin，或 include。如果未指定，或者 type 是 classic，将使用默认值 omit (不要求凭证)name：在 DedicatedWorkerGlobalScope 的情况下，用来表示 worker 的 scope 的一个 DOMString 值，主要用于调试目的事件监听:self:表示在worker内部使用的内置全局变量(1)worker.onmessage、self.onmessagevar myWorker = new Worker('worker.js');first.onchange = function() {myWorker.postMessage([first.value,second.value]);console.log('Message posted to worker');}myWorker.onmessage = function(e) {result.textContent = e.data;console.log('Message received from worker');}//worker.jsself.onmessage = function(e) {console.log('Message received from main script');var workerResult = 'Result: ' + (e.data[0] * e.data[1]);console.log('Posting message back to main script');self.postMessage(workerResult);}(2)错误监听worker.onmessageerror、self.onmessageerror 数据序列化、反序列化错误时触发worker.onerror、self.onerror  运行中错误(3)监听在线、短线情况（可能存在兼容性问题）self.onoffline=fnself.ononline=fn属性:self.name       获取worker名称，即options中传入的nameself.location 获取类似浏览器url内容的locationself.navigator 获取navigator对象方法:(1)发送消息worker.postMessage(data,[Transferable])、self.postMessage(data,[Transferable])第二个参数为Transferable对象数组，意味着对象在内存中的位置也会被转移，即零拷贝转移支持可转移的对象有：ArrayBuffer、MessagePort、ReadableStream、WritableStream、TransformStream、AudioData、ImageBitmap、VideoFrame、OffscreenCanvas多线程共享的内存：SharedArrayBuffer通过Atomics对象提供原子操作能力，解决多线程访问共享数据会出现数据竞争问题(2)终止workerworker.terminate();self.close();(3)向当前worker的作用域导入一或更多条脚本self.importScripts('foo.js', 'bar.js',...);也可用作JSONPfunction MakeServerRequest() {importScripts("http://SomeServer.com?jsonp=HandleRequest");} JSONP回调function HandleRequest(objJSON) {postMessage("Data returned from the server...FirstName: " + objJSON.FirstName + " LastName: " + objJSON.LastName);}

代码示例:

<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="iconfont/iconfont.css"><link rel="stylesheet" href="css/1.css" type="text/css"><script src='jq/jquery-3.4.1.js'></script><script src="js/bootstrap.min.js"></script><script src='js/swiper.jquery.min.js'></script><script src="js/swiper.animate1.0.2.min.js"></script><link rel="stylesheet" href="css/swiper.min.css"><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/animate.min.css"><style></style>
</head>
<body><button>开启webWorker</button><script>var num=1;var timer=null;timer=setInterval(function(){console.log(num++);},1000)document.querySelector('button').onclick=function(){var worker=new Worker('js/text1.js');worker.onmessage=function(eve){console.log(eve.data);};};</script></body></html>

异步js文件:

setTimeout(function(){console.log(22+'hh');//写了postMessage回调函数才会执行postMessage('黑皇');
},5000)

通过BlobURL实现：

var myTask = `onmessage = function (e) {var data = e.data;data.push('hello');console.log('worker:', data); // worker: [1, 2, 3, "hello"]postMessage(data);};
`;var blob = new Blob([myTask]);
var myWorker = new Worker(window.URL.createObjectURL(blob));myWorker.onmessage = function (e) {var data = e.data;console.log('page:', data); // page: [1, 2, 3, "hello"]console.log('arr:', arr); // arr: [1, 2, 3]
};var arr = [1,2,3];
myWorker.postMessage(arr);

通过DataURL实现：

// 由于Data URL的内容为必须压缩为一行，因此JavaScript无法利用换行符达到分号的效果。
const script = `addEventListener('message', event => {                                                                                                                                                                                    console.log(event.data);                                                                                                                                                                                                              postMessage('echo');
}`                                                                                                                                                                                                                                        const worker = new Worker(`data:,${script}`)
// 或 const worker = new Worker(`data:application/javascript,${script}`)
worker.onmessage = event => console.log(event.data)
worker.postMessage('main thread')

worker线程轮询

function createWorker(fn){const blob = new Blob([fn.toString()])const url = window.URL.createObjectURL(blob)const worker = new Worker(url)return worker
}const webWorker = createWorker(function(){let cache;function compare(new, old){ ... }setInterval(()=>{fetch('/api/xxx').then(res=>{let data = res.dataif(!compare(data, cache)){cache = dataself.postMessage(data)}})},1000)
})

webWorker 异步加载相关推荐

Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目,依次执行下面每行代码 ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/s ...
js如何将数据放在一个内置窗口里面_Java 爬虫遇上数据异步加载，试试这两种办法！...
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
iOS开发swift版异步加载网络图片(带缓存和缺省图片)
iOS开发之swift版异步加载网络图片与SDWebImage异步加载网络图片的功能相似,只是代码比较简单,功能没有SD的完善与强大,支持缺省添加图片,支持本地缓存. 异步加载图片的核心代码如下: ...
java加载图片到缓存_Android实现图片异步加载并缓存到本地
在android应用开发的时候,加载网络图片是一个非常重要的部分,很多图片不可能放在本地,所以就必须要从服务器或者网络读取图片. 软引用是一个现在非常流行的方法,用户体验比较好,不用每次都需要从网络下 ...
js回调与异步加载的用法
以前还是菜鸟的时候(虽然现在依然很菜 -_-|| )对异步加载与回调函数的技术无比向往,但也一直没有使用过,这次因为页面逻辑太过复杂,一堆请求逻辑,如果还是用顺序请求,页面的速度... 领导又要挠头了 ...
学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
java 爬虫异步_Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
jekyll静态博客提升访问速度：内嵌CSS，异步加载js，压缩HTML
在谷歌搜索的功能速度(实验性)中推荐使用工具PageSpeed Insights查看我的网页访问速度情况:PageSpeed Insights 分数很低,只有33分. 优化建议的第一条是移除阻塞渲染的 ...
webpack 异步加载配置文件_Webpack 是怎样运行的？
在平时开发中我们经常会用到Webpack这个时下最流行的前端打包工具.它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率. 我们知道一份Webpack配置文件主要包含入口(ent ...

webWorker 异步加载

webWorker 异步加载相关推荐

最新文章

热门文章