Web Worker 多线程

Posted 2022-05-29 yaosusu

 　　Web Worker线程处理

1  浏览器把所有事件都通过操作系统安排到事件队列中（例如：你去一个·窗口买菜，需要排队）；浏览器使用单线程处理队列中的事件和执行用户代码（也就是单线程；web workers除外）。

　　因此，浏览器每次只能处理这些任务中的一个，并且任意一个任务都能阻止其他任务的执行。

2   怎样判断代码“足够快”？0.1秒的用户体验为:用户可以随意操作，无需等待；0.2~1.0秒的延迟会被用户注意到；如果超过1秒，那么用户会觉得不流畅；超过10秒，用户会非常沮丧。

　　手动代码检测：

<div onclick="jsTest">...</div>

function jsTest()
  var start  = new Date().getMilliseconds();
//这里是一个开销很大的代码
var time = stop - start;
alert("jsTest() executes in " + time + " milliseconds");        

　　fireBug的性能分析器

可以在测量的代码中加入特定代码来收集性能统计信息，或者在特定时间中实时检验具体执行的代码来监视运行时间。后者分析的代买性能失真少，但获取到的数据质量会第一点。你可以通过（点击“发送”按钮）

然后再星星firebug性能分析器查看耗时。

3 线程处理

使用多线程把开销大的代码从与用户交互的线程中剥离开来。多线程的基本问题是不同的线程可以访问并修改相同的地址。（我们需要的是一种像多线程那样能多任务执行却没有线程之间互相侵入危险的方法）

4 Web Workers

让我们来看一下如何利用Web Workers API 对值进行解封装。如下展示了如何创建并启动Worker:

//创建并开始执行worker
var worker = new Worker("js/decrypt.js");

//注册事件处理程序，当worker给主线程发送信息时执行
worker.onmessage = function(e)
  alert("The decrypted value is" + e.data);


//发送信息给worker，这里指待解密的值
worker.postMessage(getValueToDecrypt());

//下面为js/decrypt.js中的内容：
//注册用来接收来自主线程信息的处理程序
onmessage = function(e)
  //获取传过来的数据
  var valueToDecrypt = e.data;
  //TODO:这里实现解密功能
  //把值返回给主线程
  this.postMessage(decryptedValue);

　　在页面上任何开销很大的（例如，长时间运行）javascript操作都应委托给Worker；可以是运行速度更快。

5  如果你所使用的浏览器不支持Web Worker API ,那么可以用Gears Worker API ;代码如下：

//创建worker Pool,它会产生Worker
var workerPool = google.gears.factory.create(‘beta.workpool‘);

//注册事件处理程序，他接收来自Worker的信息
workerPool.onmessage = function(ignorel, ignorel2, e)
  alert("The decrypted value is" + e.body);


//创建Worker
var workerId = workerPool.createWorkerFromUrl("js/decrypt.js");

//发送信息到这个Worker
workerPool.sendMessage(getValueToDecrpt(). workerId);

//下面是js/decrypt.js的Gears版本：

var workerPool = google.gears.workerPool;
workerPool.onmessage = function(ignorel, ignorel2, e)
  //获得传递过来的数据
  var getValueToDecrpt = e.body;
  //TODO:这里实现封装功能

  //把值返回给主线程
  workerPool.sendMessage(decryptedValue, e.sender);

　　6. 定时器

var funState = ;
function expensiveOperation()
  var startTime = new Date().getMilliseconds();
  while ((new Date().getMilliseconds() - startTime) < 80)
    //TODO:它用如下方法执行开销很大的运算：
    //它在迭代的语块中执行80毫秒内完成的工作，
    //然后修改本函数外部"function"中的状态。
  
  if(!funState.isFinished)
    //退出10秒后再执行expensiveOperation;
    //用较大的值进行试验，以在Ui响应和性能上取得合适的平衡
    setTimeout(expensiveOperation(),10);
  

　　XHRHttpRequest: XHR 有同步与异步的执行模式。在异步模式中，XHR实质上就是一个拥有专用API的Web Worker。

　　XHR在在同步模式中，会导致用户界面的持续延迟时间与XHR发送他的请求并解析来自服务端响应的整体耗时一样。还会导致不可预知和用户不能容忍的界面延迟。