js线程模型


客户端javascript是单线程,浏览器无法同时运行两个事件处理程序

设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做出响应。这也是为什么Ajax的API都是异步的,以及为什么客户端Javascript不能使用一个简单的异步load()或者require()函数来加载javascript库

如果应用程序不得不执行太多的计算而导致明显的延迟,应该允许文档在执行这个计算之前完全载入,并且确保告诉用户正在进行计算并且浏览器没有挂起。如果可能应该将任务分散为离散的子任务,可以使用setTimeout()和setInterval()方法在后台运行子任务,同时更新一个进度指示器向用户显示反馈

Web worker简介


HTML5定义了一种作为后台线程的WebWorker。 web worker是一个用来执行计算密集任务而不冻结用户界面的后台线程。

Web worker无法访问window对象和document对象,和主线程之间的通信也只能通过异步消息传递机制来实现。

Web worker 本身不是轻量级的线程,因而常见一些worker去处理次要的操作是不划算的

浏览器支持情况:

包含两部分:

  1. Worker对象:暴露给创建该线程的线程

  2.  WorkerGlobalScope:用来表示新创建的worker的全局对象

Web Worker基本使用


创建新的Worker:

var worker= new Worker("/assets/demo.js");

传递参数:

worker.postMessage("file.text");

接收消息:

worker.onmessage = function(e){
var message = e.data;
......
}

Worker当然也支持addEventListener()方法和removeEventListener()方法,如果需要管理多个事件时可以使用哒

异常处理:

worker.onerror = function(e){
console.log("Error at " + e.filename + ":" +e.lineno + e.message );
}

结束Worker

worker.terminate();

载入类和工具函数:

importScripts("utils/base64.js","utils/Map.js"....);

注意:importScripts是同步的方法,一旦importScripts方法返回就可以开始使用载入的脚本,不需要回调函数

Worker作用域


当创建一个新的Worker时该代码会运行在一个全新的Javascript运行环境中(WorkerGlobalScope),完全与创建Worker的脚本隔离

WorkerGlobalScope是Worker的全局对象,因而它包含所有核心Javascript全局对象拥有的属性如JSON等,window的一些属性如self等,也拥有类似XMLHttpRequest()函数

下面简单概括下worker所支持的属性和方法:

self

setTimeout、clearTimeout、setInterval、clearInterval

location

navigator

onerror

XMLHttpRequest

addEventListener、removeEventListener

简单例子


eg1:

html:

<div id="div">
<p>
计数:
<output id="result"></output>
</p>
<button onclick="startWorker()">开始 Worker</button>
<button onclick="stopWorker()">停止 Worker</button> <br />
<br />
<button onclick="mainWork()"> click me </button>
<br />
<br />
</div>

js脚本:

    var w;

        function startWorker() {
if (typeof (Worker) !== "undefined") {
if (typeof (w) == "undefined") {
w = new Worker("demo.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
} function stopWorker() {
w.terminate();
} function addE(){
var p = document.createElement('p');
p.innerHTML="WISH YOU HAPPY~";
div.appendChild(p);
}

demo.js:

/**
* Web Worker Demo----count
*
*/
var i=0; function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
} timedCount();

结果:

点击开始Worker后,计数在后台进行,可以点击click me,相互不影响


eg2:

如上面所说,我们应该尽量使用WebWorker处理计算量大的,主要的工作,否则因为WebWorker本身不是轻量级的线程,因而有点得不偿失

本例使用WebWoker处理图片,将图片模糊,顺便学习下canvas,如下:

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<img src="../images/demo.png" onclick="smear(this)"/>
<img src="../images/1.png" onclick="smear(this)"/>
<img src="../images/2.png" onclick="smear(this)"/>
<script>
function smear(img){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height; var context = canvas.getContext("2d");
context.drawImage(img,0,0);
var pixels = context.getImageData(0,0,img.width,img.height); var worker = new Worker("SmearWorker.js");
worker.postMessage(pixels); worker.onmessage = function(e){
var smeared_pixels = e.data;
context.putImageData(smeared_pixels,0,0);
img.src = canvas.toDataURL();
worker.terminate();
canvas.width = canvas.height = 0;
}
}
</script> </body>
</html>

SmearWorker.js:

/**
* SmearWorker---smear the picture
*/ function smear(pixels){
var data = pixels.data,
width = pixels.width,
height = pixels.height; var n = 10,
m = n-1,
i,
col; for(var row=0; row<height; row++){
i = row*width*4 + 4;
for(col =1;col<width; col++,i+=4){
data[i] = (data[i] +data[i-4]*m/n);
data[i+1] = (data[i+1] +data[i-3]*m/n);
data[i+2] = (data[i+2] +data[i-2]*m/n);
data[i+3] = (data[i+3] +data[i-1]*m/n); }
}
return pixels;
} onmessage = function(e){
postMessage(smear(e.data));
};

结果如下:

图片点击前:

点击第一张和第三张图片:

其他


我们在js中使用XMLHttpRequest时经常会设置为异步方式,因而在主浏览器线程张使用同步很不好,我们可以在worker中使用同步的XMLHttpRequest

JS线程模型&Web Worker的更多相关文章

  1. js 性能优化 - web worker

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能. 您可以继续做任何愿意做的事 ...

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

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

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

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

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

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

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

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

  6. 关于Web Worker你必须知道的7件事

    介绍 通过使用Web Worker, 我们可以在浏览器后台运行Javascript, 而不占用浏览器自身线程.Web Worker可以提高应用的总体性能,并且提升用户体验.如果你想在自己的Web应用中 ...

  7. html5之web worker

    Web Worker   在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...

  8. 【转】Web Worker javascript多线程编程(一)

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  9. web worker技术-js新线程

    web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. (转载)org.springframework.web.context.ContextLoaderListener

    http://www.yihaomen.com/article/java/471.htm 刚才手贱乱点了下,然后好像jar包不见了还是什么的,出现了这个错误,按照帖子说的,手动添加maven进去就好了

  2. 在XML里的XSD和DTD以及standalone的使用

    有关XML结构中的XSD和DTD以及standalone的使用 XmlDeclaration declare= document.CreateXmlDeclaration("1.0" ...

  3. 一次oracle大量数据删除经历

    oracle有个数据表现在已经有2500万条数据了,软件用到这个表的数据时就变的特别慢,所以准备把一个月以前的数据全部清除. 我的步骤是(下边操作都是在plsql中运行的) 1.首先 将这个月的数据导 ...

  4. 谈一谈最近学了一段时间的node.js

    官方说明 1.NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”. 2.node是一个基于Chrome V8引擎进行代码解释的.轻量.可伸缩的具有事件驱动和非阻塞I/O机制的js运 ...

  5. selenium3+python3.6爬页面源码的代码

    from selenium import webdriver import unittest,time class my_test(unittest.TestCase): def setUp(self ...

  6. Lazarus分体式改成一体式窗口

    安装包 anchordocking和Sparta_DockedFormEditor 然后点选保存并重新编译IDE即可

  7. asp.net core 使用identityServer4的密码模式来进行身份认证(2) 认证授权原理

    前言:本文将会结合asp.net core 认证源码来分析起认证的原理与流程.asp.net core版本2.2 对于大部分使用asp.net core开发的人来说. 下面这几行代码应该很熟悉了. s ...

  8. python-工厂方法模式

    源码地址:https://github.com/weilanhanf/PythonDesignPatterns 简单工厂模式的不足: 在简单工厂模式中,只提供了一个工厂类,该工厂类处于对产品类进行实例 ...

  9. Ansible之tags介绍

    本节内容: tags介绍 一.tags介绍 我们每次改完配置文件,比如上一篇博客中的的apache.yml,没必要把整个playbook都运行一遍,只需要运行改变了的task.我们可以给task一个标 ...

  10. ECshop语言包lang的加载原理

    当前使用的ecshop的版本:2.7.3,ecshop 2.7.3版本的网店系统的语言包的位置是ecshop文件下 languages/xxx/   其中的xxx表示各种语言的文件夹,里面存放指定语言 ...