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发送他的请求并解析来自服务端响应的整体耗时一样。还会导致不可预知和用户不能容忍的界面延迟。

Web Worker 多线程的更多相关文章

  1. 一个简单的HTML5 Web Worker 多线程与线程池应用

    笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...

  2. Web Worker javascript多线程编程(一)

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  3. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  4. web Worker使js实现‘多线程’?

    大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...

  5. javascript 多线程Web Worker不引用外部js文件的方法

    最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...

  6. 深入HTML5 Web Worker应用实践:多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  7. 深入理解javascript异步编程障眼法&amp;&amp;h5 web worker实现多线程

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

  8. 深入 HTML5 Web Worker 应用实践:多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

  9. 文档通信(跨域-不跨域)、时时通信(websocket)、离线存储(applicationCache)、开启多线程(web worker)

    一.文档间的通信 postMessage对象 //不跨域 1.iframe:obj.contentWindow [iframe中的window对象] iframe拿到父级页面的window: pare ...

随机推荐

  1. Restful Api 最佳实践

    Web APIs has become an very important topic in the last year. We at M-Way Solutions are working ever ...

  2. JSP通过IP获取用户(客户端)的地理位置信息

    <%!//获取客户端的IP public String getRemoteIP(HttpServletRequest request) { if (request.getHeader(" ...

  3. 位置式PID与增量式PID算法

    位置式PID与增量式PID算法  PID控制是一个二阶线性控制器     定义:通过调整比例.积分和微分三项参数,使得大多数的工业控制系统获得良好的闭环控制性能.     优点             ...

  4. CSS layout入门

    元素与盒 在HTML中常常使用的概念是元素,而在CSS中,布局的基本单位是盒,盒总是矩形的. 元素与盒并非一一对应的关系,一个元素可能生成多个盒,CSS规则中的伪元素也可能生成盒,display属性为 ...

  5. Dijkstra算法构造单源点最短路径

    迪杰斯特拉(Dijkstra)算法 是求从某个源点到其余各顶点的最短路径,即对已知图 G=(V,E),给定源顶点 s∈V,找出 s 到图中其它各顶点的最短路径. 我总结下核心算法,伪代码如下: Dij ...

  6. dev XtraMessageBox按钮显示中文

    dev的XtraMessageBox控件使用起来很美观,但默认显示确定的是英文,如下图: 通过下面代码可使“OK”显示为中文:首先创建一个继承自Localizer的类: using DevExpres ...

  7. 【带着canvas去流浪】(2)绘制折线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowo ...

  8. angularjs中的路由介绍详解 ui-route(转)

    http://www.cnblogs.com/littlemonk/p/5500801.html 这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui rou ...

  9. [转载]INNER JOIN连接两个表、三个表、五个表的SQL语句

    SQL INNER JOIN关键字表示在表中存在至少一个匹配时,INNER JOIN 关键字返回行. 1.连接两个数据表的用法: FROM Member INNER JOIN MemberSort O ...

  10. vue+SSM验证码实现

    源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master 1 ...