Web Worker处在一个自包含的执行环境中,无法访问Window对象和Document对象,和主线程之间的通信也只能通过异步消息传递机制来实现。
Web Worker提供了一种使用异步API的方式,允许书写需要长时间运行的函数而不会带来循环事件和导致浏览器崩溃的问题。
Worker对象
要创建一个新的worker,只需使用Worker()构造函数,并将指定在Worker中运行的JavaScript脚本的URL传递给该构造函数即可:
var loader = new Worker('utils/loader.js');
如果URL是相对路径,则以包含调用Worker()构造函数脚本的文档的URL为参照;如果URL是绝对路径,则必须和包含该脚本的文档是同源的(同样的协议、主机名和端口)。
一旦获取到Worker对象后,就可以通过postMessage()方法来传递参数了。
可以通过监听worker对象上的message事件来接收来自worker的消息:
worker.onmessage = function(e){ var message = e.data; console.log(message); }
当worker抛出了异常,并且它自己没有对其进行捕获和处理,则可以作为监听的一个error事件来传递该异常:
worker.onerror = function(e) { console.log("Error at " + e.filename + ": " + e.lineno + ": " + e.message); }
和所有的事件目标一样,worker对象也定义了标准的addEventListener()方法和removeEventListener()方法,如果要管理多个事件处理程序,则可以使用这些方法来代替onmessage和onerror。
worker对象还有另一个方法:terminate()。该方法强制一个worker线程结束运行。
在worker代码中可以使用importScripts()方法加载需要的其他代码。
importScripts()方法接受一个或多个URL参数,每个URL都需指向一个JavaScript代码文件。
相关推荐
NULL 博文链接:https://blueion.iteye.com/blog/1226652
使用HTML5 Web Worker提高Web的应用性能研究.pdf
HTML5 js后台实现多线程 克服js单线程导致页面卡死情况
主要介绍了针对HTML5的Web Worker使用攻略,特别是结合worker拿手的JS使用起来十分有效,需要的朋友可以参考下
至2008年W3C制定出第一个HTML5草案开始,HTML5 承载了越来越多崭新的特性和功能。...Worker)的概念,并且规范出WebWorker的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想的内存消耗。Web
画布WebWorker 可以在WebWorkers中使用的纯JavaScript Canvas实现 当必须执行长脚本而主程序必须保持运行(不能被阻止)时,WebWorkers非常有用。 当必须生成复杂的图像(例如,游戏的纹理较大)时,该生成可能会...
在HTML5中提出了工作线程(WebWorker)的概念,并且规范出WebWorker的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想的内存消耗。WebWorker允许开发人员编写能够长时间运行而不被用户所中断的后台...
Web Worker是HTML5提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker...
网络工作者图加载使用Web Worker加载图像这有什么意义呢?浏览器不是已经在单独的线程中对图像进行解码了吗?浏览器分别对图像进行解码,是的,但是不会分别加载图像。在下载图像时,它们阻塞了UI线程并阻止了其他...
但是很多童鞋还停留在语义化的阶段,忽视了 HTML5 的强劲之处。 这节我们来探讨一下多线程 Web-Worker。 一、明确 JavaScript 是单线程 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。 ...
Html5+WebWorkers定时通讯心跳处理
html5中Webworkers的工作原理
将 HTML5 与节点流 API 结合使用 var workerstream = require('workerstream') var worker = workerstream('my-worker.js') worker是一个流,并说出流事件: data 、 error和end 。 这意味着您可以将工作器输出通过...
html5 web workers的作用及使用场景.docx
Quickbase Web Workers Quickbase的javascript SDK很方便,但是可以在主UI线程上运行。 这会使您可能创建的任何代码页陷入困境,尤其是在涉及大数据时。...| - webworker.js | - yourCustomCodePage.js
Javascript执行机制 在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:...Javascript中的多线程 – WebWorker HTML5 中的 Web Worker 可以分为两种不同