HTML5编程之旅 第5站Web Workers
HTML5 Web Workers能够使得你的Web应用程序具有后台处理能力，可以支持多线程，且能够充分利用多核CPU带来的优点。以免JavaScript循环持续运行后弹出的警告窗口。css
尽管Web Workers功能强大，可是也存在一些缺点，好比不能直接访问Web页面和DOM API、消耗CPU周期且致使系统反应速度变慢。html
若是须要Web应用执行一些后台数据处理，但又不影响Web页面自己的交互时，就能够使用Web Workers，同时须要添加一个监听器以监听它发出的消息。git
1、HTML5 Web Workers API概述canvas
一、浏览器支持检查浏览器
typeof(Worker) !== "undefined"
二、建立HTML5 Web Workers
多线程
Web Workers初始化时会接受一个JavaScript文件的URL地址（URL能够是绝对或者相对路径，但必须同源），其中包含了供Worker执行的代码。这段代码会设置事件监听器，并与生成Worker的容器进行通讯。并发
worker = new Worker("echoWorker.js");
三、多个JavaScript文件的加载与执行
app
因为Web Workers没有访问document对象的权限，所以不能使用常规导入JavaScript的方式，须要另外一种方法来导入JavaScript，即importScripts：函数
importScripts("helper.js","example.js","blur.js");
多个脚本的导入会按照导入顺序执行。
post
四、与HTML5 Web Workers通讯
Web Workers一旦生成，就能够使用postMessage API传送和接收数据。
为了能与Web Workers成功通讯，除了在主页（调用Web Workers的页面）中添加代码外，Worker JavaScript文件中也要添加相应代码。
2、Web Workers示例应用
一、创建主页与Web Workers之间的通讯
首先要添加对postMessage函数的调用，以下所示：
worker.postMessage("发送示例消息");
相应消息发送给Web Workers后，还须要添加监听器，用以监听Web Workers发来的消息
worker.addEventListener("message",messageHandler,true);
function messageHandler(e){
//处理worker发来的消息
}
在Web Workers JavaScript文件中，也须要添加上述相似的代码：必须添加事件监听器来监听发来的消息和错误消息，而且经过用postMessage函数实现与页面之间的通讯。
二、处理错误
监听到错误事件发生后，要将出错信息反馈给用户：
function errorHandler(e){
console.log(e.message,e);
}
三、终止Web Workers
worker.terminate();
终止以后的Web Workers不能被从新启动，但能够使用一样的URL建立一个新的Worker。
四、示例代码整合
本示例实现 一个带有图像模糊过滤器的Web页面，其中过滤动做将由多个Web Worker并发执行。
（1）编写blur.js辅助脚本
function inRange(i, width, height) {
return ((i>=0) && (i < width*height*4));
}
function averageNeighbors(imageData, width, height, i) {
var v = imageData[i];
// cardinal directions
var north = inRange(i-width*4, width, height) ? imageData[i-width*4] : v;
var south = inRange(i+width*4, width, height) ? imageData[i+width*4] : v;
var west = inRange(i-4, width, height) ? imageData[i-4] : v;
var east = inRange(i+4, width, height) ? imageData[i+4] : v;
// diagonal neighbors
var ne = inRange(i-width*4+4, width, height) ? imageData[i-width*4+4] : v;
var nw = inRange(i-width*4-4, width, height) ? imageData[i-width*4-4] : v;
var se = inRange(i+width*4+4, width, height) ? imageData[i+width*4+4] : v;
var sw = inRange(i+width*4-4, width, height) ? imageData[i+width*4-4] : v;
// average
var newVal = Math.floor((north + south + east + west + se + sw + ne + nw + v)/9);
if (isNaN(newVal)) {
sendStatus("bad value " + i + " for height " + height);
throw new Error("NaN");
}
return newVal;
}
function boxBlur(imageData, width, height) {
var data = [];
var val = 0;
for (var i=0; i<width*height*4; i++) {
val = averageNeighbors(imageData, width, height, i);
data[i] = val;
}
return data;
}
（2）编写blur.html页面
<!DOCTYPE html> <title>HTML5 Web Workers</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href = "styles.css"> <h1>HTML5 Web Workers</h1> <p id="status">你的浏览器不支持HTML5 Web Workers.</p> <button id="startBlurButton" disabled>模糊</button> <button id="stopButton" disabled>中止Workers</button> <button onclick="document.location = document.location;">从新加载</button> <label for="workerCount">Workers数量</label> <select id="workerCount"> <option>1</option> <option selected>2</option> <option>4</option> <option>8</option> <option>16</option> </select> <div id="imageContainer"></div> <div id="logOutput"></div>
（3）编写blurWorker.js
importScripts("blur.js");
function sendStatus(statusText){
postMessage({"type" : "status",
"statusText" : statusText});
}
function messageHandler(e){
var messageType = e.data.type;
switch(messageType){
case ("blur"):
sendStatus("Worker开始模糊的数据范围: " +
e.data.startX + "-" + (e.data.startX+e.data.width));
var imageData = e.data.imageData;
imageData = boxBlur(imageData, e.data.width, e.data.height, e.data.startX);
postMessage({"type" : "处理",
"imageData" : imageData,
"width" : e.data.width,
"height" : e.data.height,
"startX" : e.data.startX
});
sendStatus("在数据范围: " +
e.data.startX + "-" + (e.data.width+e.data.startX) + "完成数据模糊");
break;
default:
sendStatus("Worker得到消息：" + e.data);
}
}
addEventListener("message", messageHandler, true);
（4）与Web Workers进行通讯
function sendBlurTask(worker, i, chunkWidth) {
var chunkHeight = image.height;
var chunkStartX = i * chunkWidth;
var chunkStartY = 0;
var data = ctx.getImageData(chunkStartX, chunkStartY,
chunkWidth, chunkHeight).data;
worker.postMessage({'type' : 'blur',
'imageData' : data,
'width' : chunkWidth,
'height' : chunkHeight,
'startX' : chunkStartX});
}
（5）示例代码
<!DOCTYPE html>
<title>HTML5 Web Workers</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href = "styles.css">
<h1>HTML5 Web Workers</h1>
<p id="status">你的浏览器不支持HTML5 Web Workers.</p>
<button id="startBlurButton" disabled>模糊</button>
<button id="stopButton" disabled>中止Workers</button>
<button onclick="document.location = document.location;">从新加载</button>
<label for="workerCount">Workers数量</label>
<select id="workerCount">
<option>1</option>
<option selected>2</option>
<option>4</option>
<option>8</option>
<option>16</option>
</select>
<div id="imageContainer"></div>
<div id="logOutput"></div>
<script>
var imageURL = "example2.png";
var image;
var ctx;
var workers = [];
window.addEventListener("load", loadDemo, true);
function loadDemo(){
log("加载图像数据");
if(typeof(Worker) !== "undefined"){
document.getElementById("status").innerHTML = "你的浏览器支持HTML5 Web Workers";
document.getElementById("stopButton").onclick = stopBlur;
document.getElementById("startBlurButton").onclick = startBlur;
loadImageData(imageURL);
document.getElementById("startBlurButton").disabled = true;
document.getElementById("stopButton").disabled = true;
}
}
function log(s){
var logOutput = document.getElementById("logOutput");
logOutput.innerHTML = s + "<br>" + logOutput.innerHTML;
}
function loadImageData(url){
var canvas = document.createElement('canvas');
ctx = canvas.getContext('2d');
image = new Image();
image.src = url;
document.getElementById("imageContainer").appendChild(canvas);
image.onload = function(){
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
window.imgdata = ctx.getImageData(0, 0, image.width, image.height);
n = ctx.createImageData(image.width, image.height);
setRunningState(false);
log("图像加载：" + image.width + "x" + image.height + "pixels");
}
}
function setRunningState(p){
document.getElementById("startBlurButton").disabled = p;
document.getElementById("stopButton").disabled = !p;
}
function stopBlur(){
for(var i=0; i<workers.length; i++){
workers[i].terminate();
}
setRunningState(false);
}
function startBlur(){
var workerCount = parseInt(document.getElementById("workerCount").value);
var width = image.width/workerCount;
for(var i=0; i<workerCount; i++){
var worker = initWorker("blurWorker.js");
worker.index = i;
worker.width = width;
workers[i] = worker;
sendBlurTask(worker, i, width);
}
setRunningState(true);
}
function initWorker(src){
var worker = new Worker(src);
worker.addEventListener("message",messageHandler, true);
worker.addEventListener("error",errorHandler, true);
return worker;
}
function messageHandler(e) {
var messageType = e.data.type;
switch (messageType) {
case ("status"):
log(e.data.statusText);
break;
case ("progress"):
var imageData = ctx.createImageData(e.data.width, e.data.height);
for (var i = 0; i<imageData.data.length; i++) {
var val = e.data.imageData[i];
if (val === null || val > 255 || val < 0) {
log("illegal value: " + val + " at " + i);
return;
}
imageData.data[i] = val;
}
ctx.putImageData(imageData, e.data.startX, 0);
// blur the same tile again
sendBlurTask(e.target, e.target.index, e.target.width);
break;
default:
break;
}
}
function errorHandler(e) {
log("error: " + e.message);
}
function sendBlurTask(worker, i, chunkWidth) {
var chunkHeight = image.height;
var chunkStartX = i * chunkWidth;
var chunkStartY = 0;
var data = ctx.getImageData(chunkStartX, chunkStartY,
chunkWidth, chunkHeight).data;
worker.postMessage({'type' : 'blur',
'imageData' : data,
'width' : chunkWidth,
'height' : chunkHeight,
'startX' : chunkStartX});
}
</script>
源码请到http://git.oschina.net/niweiwei/HTML5/tree/master/workers查看
相关文章
- 1. HTML5编程之旅 第6站Web Storage
- 2. HTML5编程之旅 第4站 Forms
- 3. HTML5编程之旅 第3站 WebSockets
- 4. HTML5编程之旅 第2站 Communication
- 5. HTML5编程之旅 第1站 Geolocation
- 6. HTML5 Web Workers
- 7. html5 Web Workers
- 8. HTML 5 Web Workers
- 9. HTML5中的Web Workers
- 10. 初探 HTML5 Web Workers
- 更多相关文章...
- • Rust 并发编程 - RUST 教程
- • 第一个MyBatis程序 - MyBatis教程
- • JDK13 GA发布：5大特性解读
- • Github 简明教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
