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. 使用Actor模型管理Web Worker多线程

    前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. asp.net core 自定义异常处理中间件

    asp.net core 自定义异常处理中间件 Intro 在 asp.net core 中全局异常处理,有时候可能不能满足我们的需要,可能就需要自己自定义一个中间件处理了,最近遇到一个问题,有一些异 ...

  2. Lombok简介及入门使用 (转载)

    Lombok简介及入门使用 lombok既是一个IDE插件,也是一个项目要依赖的jar包. Intellij idea开发的话需要安装Lombok plugin,同时设置 Setting -> ...

  3. 寻找图的强连通分量:tarjan算法简单理解

    1.简介tarjan是一种使用深度优先遍历(DFS)来寻找有向图强连通分量的一种算法. 2.知识准备栈.有向图.强连通分量.DFS. 3.快速理解tarjan算法的运行机制提到DFS,能想到的是通过栈 ...

  4. 模块化 require.js 入门教学(前端必看系列)

    在工作的时候总是会用到模块化开发,那接下来我就顺着这个问题来说一下什么是模块化 前端模块化 !!! JS 模块化提供给我们三种规范 分别就是 No.1 commonjs  这个其实也就代表了node. ...

  5. 分享SQL,查询用户最近一次购买时间间隔

    (1)先创建一张测试表: CREATE TABLE `用户购买订单` ( `购买时间` datetime(6) NULL DEFAULT NULL, `用户` varchar(20) CHARACTE ...

  6. ffmpeg+nginx将rtsp转为rtmp

    一.安装ffmpeg 1.http://ffmpeg.org/download.html下载地址,选择合适的操作系统版本下载,因为我的操作系统是centos7,所以下面的安装都是命令都是针对cento ...

  7. mysql 安装使用

    本节掌握内容: MySQL的介绍安装.启动 windows上制作服务 MySQL破解密码 MySQL中统一字符编码 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 O ...

  8. kindeditor在线文本编辑器过滤HTML的方法

    在使用kindeditor文本编辑器时遇到的问题,客户直接从Excel里粘贴文本内容到文本编辑器中(能不能再懒一些),然后不调整粘贴内容直接就保存(你敢不敢再懒一些)!对于这种很无语的行径,我只能对他 ...

  9. 爬虫之抓js教程

    在初学的爬虫过程中,很多人还不知道有些字段是如何生成的,怎样模拟生成这些字段来拼接头部.为了再次纪念[宏彦获水]成语初次面世,特地用[百度登陆]写下一篇登陆百度的教程,以供大家参考. 前面学习了如何在 ...

  10. c++学习书籍推荐《C++ GUI Qt 4编程(第2版)》下载

    下载地址:点我 百度云及其他网盘下载地址:点我 编辑推荐 <C++ GUI Qt 4编程(第2版)>讲授的大量Qt4编程原理和实践,都可以轻易将其应用于Qt4.4.Qt4.5及后续版本的Q ...