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发送他的请求并解析来自服务端响应的整体耗时一样。还会导致不可预知和用户不能容忍的界面延迟。
Web Worker 多线程的更多相关文章
- 使用Actor模型管理Web Worker多线程
前端固有的编程思维是单线程,比如JavaScript语言的单线程.浏览器JS线程与UI线程互斥等等,Web Woker是HTML5新增的能力,为前端带来多线程能力.这篇文章简单记录一下搜狗地图WebG ...
- 一个简单的HTML5 Web Worker 多线程与线程池应用
笔者最近对项目进行优化,顺带就改了些东西,先把请求方式优化了,使用到了web worker.发现目前还没有太多对web worker实际使用进行介绍使用的文章,大多是一些API类的讲解,除了涉及到一些 ...
- Web Worker javascript多线程编程(一)
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
- Web Worker javascript多线程编程(二)
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- web Worker使js实现‘多线程’?
大家都知道js是单线程的,在上一段js执行结束之前,后面的js绝对不会执行,那么为什么标题说js实现‘多线程’,虽然说加了引号,可是标题也不能乱写不是,可恶的标题党? 姑且抛开标题不说,先说我们经常会 ...
- javascript 多线程Web Worker不引用外部js文件的方法
最近在Android开发中 Webview通过调用JavascriptInterface的方式与App交互 在交互的过程中,有些App上的操作时间会比较长,Web中调用的话会造成程序假死的情况 于是想 ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
- 深入理解javascript异步编程障眼法&&h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- 深入 HTML5 Web Worker 应用实践:多线程编程
深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...
随机推荐
- Spring boot中Spring-Data-JPA操作MySQL数据库时遇到的错误(一)
执行遇到如下错误: 看错误时要注意两点: 1.控制台报错情况,一般情况下红色第一行很重要,举例:上图info之下,蓝底标出的部分. 2.这种一般是以堆栈形式描述的,也就是重点在栈底的最后的一个完整的句 ...
- Storm 学习之路(二)—— Storm核心概念详解
一.Storm核心概念 1.1 Topologies(拓扑) 一个完整的Storm流处理程序被称为Storm topology(拓扑).它是一个是由Spouts 和Bolts通过Stream连接起来的 ...
- 获取Spring中的Bean
1.Utils工具类 package com.xxx.common.helper; import org.springframework.beans.BeansException; import or ...
- 通过phpmyadmin设置数据库密码后若出现phpmyadmin拒绝访问的情况
方法一:可以修改config.inc.php配置文件中的$cfg['Servers'][$i]['password'] = '你的密码'; 方法二:将config.inc.php配置文件中的$cfg[ ...
- leetcode的Hot100系列--461. 汉明距离
求两个数的二进制位不同的位置,最先想到的就是异或操作, 异或:按位运算,相同为0,不同为1. 比如: a = 6 对应的二进制表示为: 0 0 1 1 1 b = 9 对应的二进制表示为: 0 1 ...
- HDU 6053:TrickGCD(莫比乌斯反演)
题目链接 题意 给出n个数,问在这n个数里面,有多少组bi(1<=bi<=ai)可以使得任意两个bi不互质. 思路 想法就是枚举2~min(ai),然后去对于每个ai都去除以这些质数,然后 ...
- 利用Jmeter模拟Github登录
最近学习了Jmeter的简单操作,很想找点东西来实战一下,因为我之前写过一篇通过Python模拟登录的文章,于是便想尝试下学习通过Jmeter来模拟登录. 本人环境:Jmeter5.1.1 关于Git ...
- 嵊州D2T2 八月惊魂 全排列 next_permutation()
嵊州D2T2 八月惊魂 这是一个远古时期的秘密,至今已无人关心. 这个世界的每个时代可以和一个 1 ∼ n 的排列一一对应. 时代越早,所对应的排列字典序就越小. 我们知道,公爵已经是 m 个时代前的 ...
- 華氏溫度轉化為攝氏溫度的簡單JavaScript代碼
今天,跟著W3School學到了"JavaScript函數",代碼都挺簡單的,在運算符調用函數的地方寫了一個小程序.原碼程序是這樣的: <!DOCTYPE html> ...
- Java项目案例之--封装的实例
Java项目案例之---封装的实例 有一个专业类,有一个专业对象,专业名称:计算机科学与技术,专业编号:J001,专业年限:4,对年限添加约束,如果输入小于0,则默认为0,否则显示输入的值 有一个学生 ...