文档章节

html5 之 web worker

i
 iturtle
发布于 2014/11/07 10:02
字数 807
阅读 22
收藏 0

html5 之 web worker

当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。

可以通过一些事件来触发 web worker 在后台运行,然后将运行的结果能过postMessage(data),将data消息发回页面。完成有点类似于AJAX的异步处理流程

if(typeof(Worker)!=="undefined")//检查浏览器是否支持
  {
  if(typeof(w)=="undefined") 
  {
  w=new Worker("js/workers.js");
  w.postMessage(nums);//向后台发送数据
  }
  w.onmessage = function (event) {
     alert(event.data);
    };
  }

通过w.onmessage=function(event){} 来获取通信数据。

w.addEventListener('message', function(event){ 
    alert(event.data);
}

或者

w.onmessage = function (event) {
     alert(event.data);
    };

通过w.terminate();来终止web worker;

其它方法:

close:停止 Worker 的行为。

importScripts 

Workers 线程会动态加载外部脚本,调用该方法则会冻结 Worker 的线程,直到动态加载脚本完毕或脚本执行完毕(具体视浏览器而定),该方法可以方便开发者在 Web Workers 的脚本文件中载入其他脚本文件(例如 JavaScript 代码很长,需要分开几个文件编写时该方法便十分有用)。由于 Web Workers 是在独立线程中工作,它无法访问 document 对象,即无法访问外部资源,因此需要用该方法载入外部脚本。

另外关于 importScript 还有以下两点需要注意: 

importScripts 支持同时加载多个脚本,只需在每个参数中填写一个 JavaScript 文件,如:importScripts('a.js', 'b.js', 'c.js'); 

只要 HTTP 连接数足够,使用 importScripts 同时加载多个脚本时均为并行加载。但执行这些脚本是按照参数顺序进行的,如上面的例子,则按照 a.js , b.js , c.js 的顺序执行各脚本(即使 b.js 脚本比 a.js 脚本先加载完毕,也会等待 a.js 加载完毕并且执行 a.js 后才会执行 b.js )

onerror

worker.onerror = function(event){         
    event.message // 具体的错误信息
    event.lineno // 在 demo_workers.js 中导致错误发生的语句的所在行号 
    event.filename // 返回发生错误的文件的完整 URL
};


Subworker 

Worker 支持在一个 Worker 内部创建 Worker ,称为 Subworker 。这个 Worker 必须与父 Workers 同源,它的 URL 是根据父 Worker 的 URL 确定的,而不是依据它自己的页面 URL ,这样导致了以下两个需要注意的地方: 

Subworker 不能跨域 

内部 Worker 引用资源必须使用相对 URL(相对于创建父 Worker 的页面,即上例中的 index.html)。 

 Shared Worker 

开发者也可以创建一个被多个页面或连接使用的 Worker ,称为 Shared Worker(共享 Worker ),可以用于页面之间的共享通讯,它的工作方式与普通 Worker 稍有不同,目前主流浏览器对其支持都很不完善,因此这里不作详细介绍。

PS:

1、js/workers.js,是主在后台运行的代码,它有postMessage(data)

2、测试的js和html文件都需要发布到站点才可以正常访问,否则会提示这个错误:

Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///E:/work/study/webapp/workers.js' cannot be accessed from origin 'null'.

3、浏览器支持

Chrome 3+ , Firefox 3.5+ , Safari 4+ 和 Opera 10.6+ 


© 著作权归作者所有

i
粉丝 0
博文 54
码字总数 13891
作品 0
广州
私信 提问
HTML5编程之旅 第5站Web Workers

HTML5 Web Workers可以使得你的Web应用程序具备后台处理能力,能够支持多线程,且可以充分利用多核CPU带来的优势。以避免JavaScript循环持续运行后弹出的警告窗口。 尽管Web Workers功能强大...

倪伟伟
2014/02/28
615
0
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
04/26
17
0
实现多个标签页之间通信的几种方法(sharedworker)

示例地址 prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信。我目前想到的方法有三种:使用websocket协议、通过localstorage、以及使用html5浏览器的新特性SharedW...

ITgecko
2018/04/11
0
0
Html5学习系列

Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件...

writeademo
2016/08/14
48
0
HTML5 学习之三 web worker,server-send,表单属性

HTML5 Web Workers 一般情况下,当在HTML页面中执行脚本时,页面的状态是不可响应的,知道脚本已经完成。 Web worker是运行在后天的JavaScript,独立于其他脚本,不影响页面的性能,开放者可...

Drealin
2012/09/10
2.3K
13

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
20分钟前
6
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
52分钟前
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
53分钟前
10
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
57分钟前
8
0
深入了解Redis底层数据结构

说明 说到Redis的数据结构,我们大概会很快想到Redis的5种常见数据结构:字符串(String)、列表(List)、散列(Hash)、集合(Set)、有序集合(Sorted Set),以及他们的特点和运用场景。不过它们是...

TurboSanil
58分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部