文档章节

HTML5 Web Workers

nao
 nao
发布于 2015/12/10 18:52
字数 1209
阅读 97
收藏 6

Web workers 是什么

    Web workers 是HTML5标准的一部分, 这一规范定义了一套API,它允许一段JavaScript程序运行在主线程以外的另外一个线程中。Web Workers 规范中定义了两类工作线程,分别是专用线程Dediacted worker 和共享线程 Shared Worker, 其中, Dedicated Woker 只能为一个页面所使用,而Shared Worker 则可以被多个页面所共享,本文示例为专用线程Dedicated Worker.


一个小例子

下载地址:https://github.com/mdn/simple-web-worker

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Web Workers basic example</title>

    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Web<br>Workers<br>basic<br>example</h1>

    <div class="controls" tabindex="0">

    <form>
      <div>
        <label for="number1">Multiply number 1: </label>    
        <input type="text" id="number1" value="0">
      </div>
      <div>
        <label for="number2">Multiply number 2: </label>   
        <input type="text" id="number2" value="0">
      </div>
    </form>

    <p class="result">Result: 0</p>

    </div>
  </body>
  <script src="main.js"></script>
</html>

main.js

var first = document.querySelector('#number1');
var second = document.querySelector('#number2');

var result = document.querySelector('.result');

if (window.Worker) { // Check if Browser supports the Worker api.
    // Requries script name as input
    var myWorker = new Worker("worker.js");

// onkeyup could be used instead of onchange if you wanted to update the answer every time
// an entered value is changed, and you don't want to have to unfocus the field to update its .value

    first.onchange = function() {
      myWorker.postMessage([first.value,second.value]); // Sending message as an array to the worker
      console.log('Message posted to worker');
    };

    second.onchange = function() {
      myWorker.postMessage([first.value,second.value]);
      console.log('Message posted to worker');
    };

    myWorker.onmessage = function(e) {
        result.textContent = e.data;
        console.log('Message received from worker');
    };
}

worker.js

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

简单小结:

    Web主线程:

    1.通过 var worker = new worker(url)加载一个js文件来创建一个worker, 同时返回一个worker实例。

    2. 通过 worker.postMessage(data) 方法来向worker发送数据。

    3. 绑定 worker.onmessage方法来接收worker发送过来的数据。

    4. 可以使用 worker.terminate()来终止一个worker的执行。

    worker新线程:

    1. 绑定onmessage方法来接收主线程发送过来的数据。

    2.通过postMessage(data)方法来向主线程发送数据。

    3.可以使用self.close()来终止一个worker的执行。


API 进阶

    关于 web workers, 最重要的是要知道它执行的javascript代码完全在另一个作用域中,与当前网页中的代码不共享作用域。在web workers中,同样有一个全局对象(woker对象本身,this和self 引用的都是worker对象本身)和其他对象以及方法。

Web worker中的代码不能访问Dom.

在worker线程中,可以获得下列对象

    1 .navigator对象

    2. location对象,只读

    3. XMLhtttpRequest独享

    4. setTimeout/setInterval方法

    5. Application Cache

    6. 通过importScripts()方法加载其他脚本

    7. 创建新的Web Worker

worker线程不能获得下列对象:

    1. DOM对象

    2. window对象

    3. document对象

    4. parent对象

上述的规范,限制了在worker线程中获得主线程页面相关对象的能力,所以在worker线程中,不能进行dom元素的更新。


 Web workers带来了什么

    1. Web workers 带来后台计算能力

    Web workers 自身是由webkit多线程实现,但他并没有为javascript语言带来多线程编程特性,我们现在仍然不能在javascript代码中创建并管理一个线程,或者主动控制线程间的同步与锁等特性。

    Web workers典型应用场景

    既然Web workers 为浏览器端javascript带来了后台计算能力,我们可以利用这一能力,将更新数据和对象状态的耗时部分交由Web workers执行,提升页面性能。

    部分典型的应用场景如下:

    1. 使用专用线程进行数学运算

    Web workers 最简单的应用就是用来做后台计算,而这种计算并不会中断前台用户的操作。

    2. 图像处理

    通过使用<canvas>或者<video>元素中获取的数据,可以把图像分割成几个不同的区域并且把它们推送给并行的不同workers来做计算。

    3. 大量数据的检索

    但需要在调用ajax后处理大量的数据,如果处理这些数据所需的时间长短非常重要,可以在Web workers中来做这些,避免冻结UI线程。

    4. 背景数据分析

    由于在使用 Web Workers的时候,我们有更多潜在的CPU可用时间,我们现在可以考虑一下javascript中的新应用场景。

    例如, 我们可以想象在不影响UI体验的情况下实时处理用户输入。利用这样一种可能,我们可以想象一个像word一样的应用:当用户打字时,后台在词典中进行查找,帮助用户自动纠错等等。 


参考文章:

https://developer.mozilla.org/en-US/docs/Web/API/Worker

http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/index.html

http://www.tools138.com/create/article/20151111/020119942.html




© 著作权归作者所有

共有 人打赏支持
nao

nao

粉丝 28
博文 153
码字总数 108102
作品 0
徐汇
HTML5编程之旅 第5站Web Workers

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

倪伟伟
2014/02/28
0
0
实现多个标签页之间通信的几种方法(sharedworker)

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

ITgecko
04/11
0
0
HTML5 学习之三 web worker,server-send,表单属性

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

Drealin
2012/09/10
0
13
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
Html5学习系列

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

writeademo
2016/08/14
36
0

没有更多内容

加载失败,请刷新页面

加载更多

腾讯投资最高1.75亿美元正式进军菲律宾移动支付市场

菲律宾长途电话公司(PLDT)公司今日宣布,中国互联网巨头腾讯和私募股权公司KKR将获得该公司旗下金融科技公司Voyager Innovations的少数股权。 PLDT在一份声明中称:“腾讯和KKR最多将分别收...

linuxCool
21分钟前
2
0
正则介绍及grep/egrep用法

10月16日任务 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 扩展 把一个目录下,过滤所有*.php文档中含有eval的行 grep -r --include="*.php" 'eval' /data 正则介绍 正则就是一串有规律的字符...

hhpuppy
32分钟前
1
0
J2Cache 中使用 Lettuce 替代 Jedis 管理 Redis 连接

一直以来 J2Cache 都是使用 Jedis 连接 Redis 服务的。Jedis 是一个很老牌的 Redis 的 Java 开发包,使用很稳定,作者维护很勤勉,社区上能搜到的文章也非常非常多。算是使用范围最广的 Redi...

红薯
今天
12
0
一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部