通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。
Web Workers API - Web API 接口参考 | MDN
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API
通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。
Web Workers 概念与用法
使用构造函数(例如,Worker())创建一个 worker 对象, 构造函数接受一个 JavaScript文件URL — 这个文件包含了将在 worker 线程中运行的代码。worker 将运行在与当前 window不同的另一个全局上下文中,这个上下文由一个对象表示,标准情况下为DedicatedWorkerGlobalScope (标准 workers 由单个脚本使用; 共享workers使用SharedWorkerGlobalScope)。
你可以在worker 线程中运行任意的代码,但注意存在一些例外:直接在 worker 线程中操纵 DOM 元素;或使用window 对象中的某些方法和属性。大部分 window 对象的方法和属性是可以使用的,包括 WebSockets,以及诸如 IndexedDB 和 FireFox OS 中独有的 Data Store API 这一类数据存储机制。更多信息请参见: Functions and classes available to workers 。
主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息, 并且通过 onmessage 这个 event handler来接收信息(传递的信息包含在 Message 这个事件的data属性内) 。数据的交互方式为传递副本,而不是直接共享数据。
worker 可以另外生成新的 worker,这些 worker 与它们父页面的宿主相同。 此外,worker 可以通过 XMLHttpRequest 来访问网络,只不过 XMLHttpRequest 的 responseXML 和 channel 这两个属性的值将总是 null 。
除了专用 worker 之外,还有一些其他种类的 worker :
- Shared Workers 可被不同的窗体的多个脚本运行,例如IFrames等,只要这些workers处于同一主域。共享worker 比专用 worker 稍微复杂一点 — 脚本必须通过活动端口进行通讯。详情请见
SharedWorker。 - Service Workers 一般作为web应用程序、浏览器和网络(如果可用)之间的代理服务。他们旨在(除开其他方面)创建有效的离线体验,拦截网络请求,以及根据网络是否可用采取合适的行动,更新驻留在服务器上的资源。他们还将允许访问推送通知和后台同步API。
- Chrome Workers 是一种仅适用于firefox的worker。如果您正在开发附加组件,希望在扩展程序中使用worker且可以访问 js-ctypes,那么可以使用Chrome Workers。详情请见
ChromeWorker - 音频Workers可以在网络worker上下文中直接完成脚本化音频处理.
注意: 根据网络worker规范, worker错误事件不应该冒泡(参见bug 1188141)。该规范已在Firefox 42中实现。
Web Worker 接口
AbstractWorker- 抽象属性和方法是所有类型的worker中常用的(例如
Worker或SharedWorker) Worker- 表示正在运行的worker线程,允许你将信息传递到正在运行的worker程序代码。
SharedWorker- 表示一种可以同时被多个浏览器环境访问的特殊类型的worker。这些浏览器环境可以是多个window, iframes 或者甚至是多个worker.
WorkerGlobalScope- 表示任意worker的通用作用域(对于正常的网页类容来说与
Window有相同的作用)。不同类型的worker都有从接口继承作用于对象,并且可以添加更多特定功能。 DedicatedWorkerGlobalScope- 表示一个专用worker的作用域, 继承自
WorkerGlobalScope,且可添加一些特有的功能。 SharedWorkerGlobalScope- 表示一个共享worker的作用域, 继承自
WorkerGlobalScope, 且可添加一些特有的功能。 WorkerNavigator- 表示用户代理(客户端)的身份和状态。
示例
我们创建了几个简单的demos以演示基本用法:
你可以在使用web workers中找到有关这些demos是如何工作的更多信息。
规范
| 规范 | 状态 | 评论 |
|---|---|---|
| HTML Living Standard | Living Standard | No change from Unknown. |
通过使用Web Workers,Web应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是UI线程)不会因此被阻塞/放慢。的更多相关文章
- HTML5 Web Workers来加速您的移动Web应用
一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...
- JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景
摘要: 理解Web Workers. 原文:JavaScript是如何工作的:Web Workers的构建块 + 5个使用他们的场景 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这 ...
- Webpack 下使用 web workers 及 基本原理 和 应用场景
_ 阅读目录 一:web workers的基本原理 二:web Workers 的基本用法 三:在webpack中配置 Web Workers 四:Web Worker的应用场景 回到顶部 一:web ...
- 简单了解Web Workers API
1. 为什么使用Web Workers API 通过使用该API,web应用程序可以独立于主线程,运行一个单独的线程来处理脚本. 可以在独立的线程中解决耗时较长的任务,避免主线程阻塞. 2. 应用 1 ...
- [翻译]Review——How JavaScript works:The building blocks of Web Workers
原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...
- JavaScript 工作原理之七-Web Workers 分类及 5 个使用场景
Web Workers 分类及 5 个使用场景 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 这是 JavaScript 工作原理的第七章. 本系列 ...
- 在docker中运行ASP.NET Core Web API应用程序
本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过程中,也会对docker的使用进行一些简单的描述.对于.NET Cor ...
- HTML5: HTML5 Web Workers
ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...
- HTML5(八)Web Workers
HTML 5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不 ...
随机推荐
- Python3 字符串与hex之间的相互转换
在字符串转换上,python2和python3是不同的,在查看一些python2的脚本时候,总是遇到字符串与hex之间之间的转换出现问题,记录一下解决方法. 1. 在Python2.7.x上,hex字 ...
- Vue导出json数据到Excel表格
一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...
- 【原创】大叔问题定位分享(7)Spark任务中Job进度卡住不动
Spark2.1.1 最近运行spark任务时会发现任务经常运行很久,具体job如下: Job Id ▾ Description Submitted Duration Stages: Succeed ...
- springboot ****使用经验*******
目录 1. 返回时间格式化问题 2. springboot 中获取属性 3. SpringBoot中启动是忽略某项检测 4. 启动不开启安全校验 一返回时间格式化问题 在Spring Boot项目中 ...
- python回归分析五部曲
Python回归分析五部曲(一)—简单线性回归 https://blog.csdn.net/jacky_zhuyuanlu/article/details/78878405?ref=myread Py ...
- 树·AVL树/平衡二叉树
1.AVL树 带有平衡条件的二叉查找树,所以它必须满足条件: 1 是一棵二叉查找树 2 满足平衡条件 1.1 平衡条件: 1)严格的平衡条件:每个节点都必须有相同高度的左子树和右子树(过于严格而不被使 ...
- vue-cli 3.0
安装 vue-cli 3.0 时报错 vue-cli3安装遇到的问题,卸载不掉旧版本,导致更新不了 vue-cli 2.9.6 版本卸载不了 作者:Runner_leaf链接:https://www. ...
- 原生javascript实现阻止浏览器默认行为与阻止事件冒泡
不同的浏览器之间存在兼容问题,在IE与标准浏览器之间存在很大的差异,所以在实现阻止浏览器默认行为和阻止事件冒泡就要考虑要它们之间的不同 /** * 取消冒泡 * @param {事件} e */ fu ...
- MIPS(极路由1s[mt7620a])平台OpenWrt路由器系统内的Go应用程序开发
起因,由于coolpy5核心转换到go语言开发,所以目前超人正在进行相关的技术攻关,在程序编写方面一切都相对顺利.由于coolpy5是一个真正的商业级性能的系统也考滤到coolpy之前的版本已经确定的 ...
- spark MLlib collaborativeFilltering学习
package ML.collaborativeFilltering; import org.apache.spark.SparkConf; import org.apache.spark.api.j ...