自JavaScript 诞生以来,还没有办法在浏览器 UI线程之外运行代码。网页工人线程API 改变了这种状
况,它引入一个接口,使代码运行而不占用浏览器UI线程的时间。作为最初的HTML 5 的一部分,网页
工人线程API 已经分离出去成为独立的规范(http://www.w3.org/TR/workers/ )。
网页工人线程对网页应用来说是一个潜在的巨大性能提升,因为新的工人线程在自己的线程中运行
JavaScript。这意味着,工人线程中的代码运行不仅不会影响浏览器 UI,而且也不会影响其它工人线程中
运行的代码。
由于网页工人线程不绑定 UI线程,这也意味着它们将不能访问许多浏览器资源。工人线程的运行环境由下列部分组成:
一个浏览器对象,只包含四个属性:appName, appVersion, userAgent, 和platform
一个location 对象(和window里的一样,只是所有属性都是只读的)
一个self 对象指向全局工人线程对象
一个importScripts()方法,使工人线程可以加载外部JavaScript 文件
所有ECMAScript对象,诸如 Object,Array,Data ,等等
XMLHttpRequest 构造器
setTimeout() 和setInterval() 方法
close() 方法可立即停止工人线程
因为网页工人线程有不同的全局运行环境,你不能在 JavaScript 代码中创建。事实上,你需要创建一个
完全独立的JavaScript 文件,包含那些在工人线程中运行的代码。要创建网页工人线程,你必须传入这个
JavaScript 文件的 URL :
var worker = new Worker("code.js");
此代码一旦执行,将为指定文件创建一个新线程和一个新的工人线程运行环境。此文件被异步下载,直
到下载并运行完之后才启动工人线程。
工人线程和网页代码通过postMessage和onmessage事件接口进行交互。例如:
var worker = new Worker("code.js"); worker.onmessage = function(event){ alert(event.data); }; worker.postMessage("Nicholas");
//inside code.js self.onmessage = function(event){ self.postMessage("Hello, " + event.data + "!"); };
当工人线程通过 importScripts()方法加载外部 JavaScript 文件,它接收一个或多个 URL 参数,指出要加
的JavaScript 文件网址。工人线程以阻塞方式调用 importScripts(),直到所有文件加载完成并执行之后,
本才继续运行。由于工人线程在UI线程之外运行,这种阻塞不会影响UI响应。例如:
//inside code.js importScripts("file1.js", "file2.js"); self.onmessage = function(event){ self.postMessage("Hello, " + event.data + "!"); };
网页工人线程适合于那些纯数据的,或者与浏览器 UI没关系的长运行脚本。例如:
解析一个大字符串
编/解码一个大字符串
复杂数字运算
给一个大数组排序
......
任何超过 100 毫秒的处理,都应当考虑工人线程方案是不是比基于定时器的方案更合适。当然,还要基
于浏览器是否支持工人线程。
相关推荐
Workers 多线程学习DEMO,也可以直接使用。
与 web workers 集成的更好方式,使用JavaScript Proxies与Web worker进行通信,类似于与普通对象交互
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644
vue-worker以一种简单的方式使用webworkers的Vue插件
用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644
WebWorkers,一个新的JavaScript编程模型,可以提高您web应用程序的交互性。有了它您就可以以一种多线程方法运行JavaScript,而且可以在后台运行脚本而不依赖任何用户界面脚本。本文介绍了WebWorkers,并引导您了解...
Html5+WebWorkers定时通讯心跳处理
node-webworker, NodeJS的WebWorkers实现 node-webworkers 是网络工作者API的一个实现,用于 node.js 。请参见这里的设计文档 。示例主源var sys = require('sys');var Worker = require('web
发送异步请求在 NodeJS 中使用和发送多个异步请求注意:此模块适用于应用程序,而不是 Web 浏览器。安装npm install axios axios-parallel --save 用法 const axiosParallel = require ( 'axios-parallel' ) ;// ...
WEB开发 之 HTML 5 Web Workers.docx
Web Workers 是在HTML5中新增的,用来在web应用程序中实现后台处理的一种技术 在HTML4中,js创建的程序都是单线程的,如果花费时间比较长的话web界面就会长时间没有响应,最恶劣的情况还会跳出一个脚本提示框: 提示...
Using Web workers to implement multi-threaded programming with javascript.
安装如果您没有 : npm i @ng-web-apis/common现在安装软件包: npm i @ng-web-apis/workers使用方法创建一个worker并在AsyncPipe的模板中使用它: import { WebWorker } from '@ng-web-apis/workers' ;function ...
html5中Webworkers的工作原理
JavaScript开发在JestJSDOM中使用WebWorkers
html5 web workers的作用及使用场景.docx
07_Web Workers_测试.html
08_Web Workers_应用.html
我们都知道,浏览器执行js代码是单线程的,当页面脚步执行时,页面是没办法响应别的的,直到脚步的结束,而这里介绍的WebWorkers就可以改变这一切。 WebWorkers是运行在后台的js代码,独立于其他脚本,不会影响页面...