html5中的web worker用法

￡神魔★判官ぃ 2022-07-15 07:08 219阅读 0赞

html5 web worker相当于在主线程下有开了一个子线程，可以在后台运行子线程而不影响页面相应。

if(typeof(Worker)!=="undefined")

\{

if(typeof(w)=="undefined")

\{

var w=new Worker("demo\_test.js");

work.onmessage=function(event)d

\{

document.getElementById("hint").innerHTML=event.data;

\}

\}

\}

else

\{

document.getElementById("hint").innerHTML="web worker is not supported by this browser!";

\}

web worker的常用api

postMessage()用于主线程与子线程的相互通信。

主线程传递给子线程:w.postMessage();

子线程传递给主线程：postMessage();

onmessage():主线程与子线程用于监听消息；

主线程监听来之子线程的消息：w.onmessage=function(event)\{event.data\}

子线程监听来之主线程的消息:  onmessage=function(event)\{\}

onerror()用于监听错误

w.οnerrοr=function(e)

\{

e.message:错误消息

e.lineno：错误所在的行号

e.filename:错误的文件名

\}

一般来说Javascript和页面的UI会共用一个线程，所以当点击一个按钮开始运行Javascript后，在这段代码运行完毕之前，页面是无法响应用户操作的，换句话来说就是被“冻结”了。而这段代码可以交给Web Worker在后台运行，那么页面在Javascript运行期间依然可以响应用户操作。后台会启动一个worker线程来执行这段代码，用户可以创建多个worker线程。所以你可以在前台做一些小规模分布式计算之类的工作，不过Web Worker有以下一些使用限制：

*  Web Worker无法访问DOM节点；
 *  Web Worker无法访问全局变量或是全局函数；
 *  Web Worker无法调用alert()或者confirm之类的函数；
 *  Web Worker无法访问window、document之类的浏览器全局变量；

不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。

相关链接:

[浅谈web worker][web worker]

[关于Web Worker你必须知道的7件事][Web Worker_7]

[web worker]: http://www.cnblogs.com/giggle/p/5350288.html
[Web Worker_7]: http://blog.csdn.net/dojotoolkit/article/details/25030289

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5 worker不支持本地,HTML5 之 Web Worker

HTML5 Web Worker Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运

淩亂°似流年/ 2022年10月07日 11:59/ 0 赞/ 185 阅读

相关 HTML5 Web Workers

web worker 是运行在后台的javascript，不会影响页面的性能当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worke

秒速五厘米/ 2022年09月21日 01:48/ 0 赞/ 13 阅读

相关 HTML5 Web Storage用法

<!DOCTYPE html > <head> <title>演示HTML5 Web Storage的用法</title

桃扇骨/ 2022年08月13日 17:33/ 0 赞/ 216 阅读

相关 HTML5Web Workers

最近正在写一个数据量比较大的页面，正好偶然看到HTML5的Web Workers可以实现非阻塞处理数据，心中甚喜。终于网上查了一番发现确实是个好东西，然而

系统管理员/ 2022年07月26日 11:24/ 0 赞/ 158 阅读

相关 html5中的web worker用法

html5 web worker相当于在主线程下有开了一个子线程，可以在后台运行子线程而不影响页面相应。 if(typeof(Worker)!=="und

￡神魔★判官ぃ/ 2022年07月15日 07:08/ 0 赞/ 220 阅读

相关 html5中的web storage的用法

web storage中的localStorage用于在本地存储大量数据，且没有时间限制。sessionStorage是针对一个session的存储，关闭浏览器时，数据即删除。

分手后的思念是犯贱/ 2022年07月13日 05:11/ 0 赞/ 186 阅读

相关 html5中的web worker的用法

[Web Worker javascript多线程编程（一）][Web Worker javascript] [开始使用Web Workers][Web Wor

男娘i/ 2022年06月18日 07:26/ 0 赞/ 155 阅读

相关 HTML5中的异步操作Web Worker的用法

1. 如何使用Worker 在index.html的<script></script>中添加如下的脚本： var w=new Worker('work.js');/

待我称王封你为后i/ 2022年06月10日 12:16/ 0 赞/ 303 阅读

相关 HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面

谁践踏了优雅/ 2022年05月19日 08:06/ 0 赞/ 162 阅读

相关 html5 Web Workers

虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行，单实际上JavaScript使单线程的，一次只能做一

快来打我*/ 2022年02月02日 14:59/ 0 赞/ 196 阅读