Web Worker 多线程

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

原文地址:https://www.cnblogs.com/yaosusu/p/11272023.html

时间: 2024-11-04 22:03:14

Web Worker 多线程的相关文章

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

深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能,而且还增加了对本地数据库等 Web 应用功能的支持.其中,最重要的一个便是对多线程的支持.在 HTML5 中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启

Web Worker——js的多线程,实现统计博客园总阅读量

前言 众所周知,js是单线程的,从上往下,从左往右依次执行,当我们有耗时的任务需要处理时,便会阻塞线程造成页面卡顿等问题.web worker的目的,就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程.在主线程运行的同时,子线程在后台运行,两者互不干扰.等到子线程完成计算任务,再把结果返回给主线程.因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作.更多worker的介绍请戳:JavaScript标准参考教程 本文通过web worker 统计博客

html5之Web Worker -- js多线程编程

什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript和UI页面会共用一个线程,在HTML页面中执行js脚本时,页面的状态是不可响应的,直到脚本已完成.而这段代码可以交给Web Worker在后台运行,那么页面在Javascript运行期间依然可以响应用户操作.后台会启动一个worker线程来执行这段代码,用户可以创建多个worker线程. 有两种 W

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5新增的一些属性和功能之八——web Worker

Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把js文件放在body结束之前,或者优化算法复杂度.但是根本上解决还是线程的问题.在HTML5中新增了web Workers的方法,用来解决JavaScript多线程的问题.把一些耗时的程序放在单独的js中,和浏览器的UI渲染线程同步执行. 如何用: 1.首先把需要单独执行的js代码单独放在一个js文

web socket and web worker 基础原理及使用

个人认为HTML5最吸引人的两大功能, web socket 和 worker为构建高效能的web应用提供了新的参考方案. 大体来说,web socket提供更高效的传输协议,web worker提供多线程提高web应用计算效率.最近项目有用到,对应两个问题的解决,目前运行效果来看还是很不错. 这里主要是总结这两个技术的基础原理,和常用API.备忘,也列举关键掌握点,入门和基础使用足以. Web Socket websocket是一种协议,本质上和http,tcp一样.协议是用来说明数据是如何传

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

离线应用和web worker

只当自己笔记一样,把自己看的资料整理一下而已,勿喷! 搭建离线应用可以适用于一些小的应用场景.感觉目前用的也不是很多,分为以下几步: ①找到服务器的配置文件,设置头信息 : AddType text/cache-manifest .manifest ② html标签加 : manifest=“xxxxx.manifest”,例如: <html manifest="cache.manifest"> ③写manifest文件 : 离线的清单列表 先写 : CACHE MANIF

Html5之web workers多线程

Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(test.js) var fibonacci =function(n) { return n <2? n : arguments.callee(n -1) + arguments.callee(n -2); }; onmessage =function(event) { var n = parseIn