首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Web Worker

描述 worker是使用构造函数创建的一个对象来运行一个Js文件,这个Js文件中包含将在worker线程中运行的代码,worker运行的全局对象不是当前window,专用worker线程运行环境的全局对象为...只要运行在同源的父页面中,worker可以依次生成新的worker。...专用worker 专用worker仅能被生成它的脚本使用,通过构造函数生成worker,然后通过消息传递机制将数据传递到worker线程计算完毕后再将数据传回进行下一步操作,worker线程的关闭可以在主线程中关闭也可以在...// 需要开启一个server var worker = new Worker('worker.js'); // 实例化worker线程 worker.postMessage(1); // 传递消息...生成共享worker与生成专用worker非常相似,只是构造器的名字不同,他们之间一个很大的区别在于:共享worker必须通过一个确切的打开的端口对象供脚本与worker通信,在专用worker中这一部分是隐式进行的

83240

Web Worker 初探

不过因为worker一旦新建,就会一直运行,不会被主线程的活动打断,这样有利于随时响应主线程的通性,但是也会造成资源的浪费,所以不应过度使用,用完注意关闭。...或者说:如果worker无实例引用,该worker空闲后立即会被关闭;如果worker实列引用不为0,该worker空闲也不会被关闭。...它的一个作用就是指定 Worker 的名称,用来区分多个 Worker 线程。...表示是 Worker 的实例: worker.postMessage: 主线程往worker线程发消息,消息可以是任意类型数据,包括二进制数据 worker.terminate: 主线程关闭worker...线程 worker.onmessage: 指定worker线程发消息时的回调,也可以通过worker.addEventListener('message',cb)的方式 worker.onerror

1K40

浅尝 service worker

最早听说service worker的时候是团队的分享会上,之后就听说了饿了么pwa改造,技术学习的脚步始终不能停。 对于一个新技术,它能做什么?它能给我带来什么?这一直是我在学习之前会反问的问题。...自定义模板用于特定URL模式 性能增强,比如预取用户可能需要的资源,比如相册中的后面数张图片 第四点在 React的开发配置项里就有体现,利用官方的create-react-app就会有一个service worker...在 Firefox 的 private browsing mode 隐私模式下是无法使用 service worker 的,但是chrome 的隐私模式可以使用。...注意: localStorage 跟  service worker 的 cache 工作原理很类似,但是它是同步的,所以不允许在  service workers 内使用。...注意: IndexedDB 可以在  service worker 内做数据存储。

50810

service worker 使用

service worker 简介 service worker 的功能和特性可以总结为以下几点: service worker 是一个独立 worker 线程,独立于当前网页进程,有自己独立的 worker...(); }); service worker 生命周期 service worker 工作流程 service worker 基于注册、安装、激活等步骤在浏览器 js 主线程中独立分担缓存任务。...旧的 Service Worker 脚本不再控制着页面,之后会被停止。 激活成功后 service worker 可以控制页面了,刷新页面可以查看 service worker 的工作成果。...service worker 事件 install: service worker 安装成功后被触发的事件,在事件处理函数中可以添加需要缓存的文件。...示例 这个网站记录了很多 service worker demo。 参考文档 lavas Service Worker API-MDN 服务工作线程 Service Worker 更新机制

1.3K31

Service Worker的应用

Service Worker的应用 Service worker本质上充当Web应用程序、浏览器与网络(可用时)之间的代理服务器,这个API旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作...描述 Service Worker本质上也是浏览器缓存资源用的,只不过他不仅仅是Cache,也是通过worker的方式来进一步优化,其基于h5的web worker,所以不会阻碍当前js线程的执行,其最主要的工作原理.../tree/simple--service-worker,在这里就是用原生的Service Worker写一个简单示例,直接写原生的Service Worker比较繁琐和复杂,所以可以借助一些库例如Workbox...等,在使用Service Worker之前有一些注意事项: Service worker运行在worker上,也就表明其不能访问DOM。...脚本的工作,下面的代码都是写在service worker脚本里面的,登记后,就会触发install事件,service worker脚本需要监听这个事件。

49210

Web Worker 使用教程

Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。...二、基本用法 2.1 主线程 主线程采用new命令,调用Worker()构造函数,新建一个 Worker 线程。...var worker = new Worker('work.js'); Worker()构造函数的参数是一个脚本文件,该文件就是 Worker 线程所要执行的任务。...六、实例: Worker 新建 Worker Worker 线程内部还能再新建 Worker 线程。下面的例子是将一个计算密集的任务,分配到10个 Worker。 主线程代码如下。...} 上面代码中,Worker 线程内部新建了10个 Worker 线程,并且依次向这10个 Worker 发送消息,告知了计算的起点和终点。计算任务脚本的代码如下。

1.6K60
领券