shuai1234

浏览: 971604 次
性别:
来自: 山西

最近访客更多访客>>

tangang

shnsvyu

zhoukunhy

__点__

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 使用Web Worker处理线程

博客分类：

web前台

基础知识

Web Worker是在HTML5中新增的，用来在Web应用程序中实现后台处理的一项技术。使用这个API，用户可以很容易地创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间的处理交给后台去执行，对用户在前台页面中执行的操作就完全没有影响了。

创建后台线程的步骤很简单。只要在Worker类的构造器中将需要在后台线程中执行的脚本文件的URL作为参数，然后创建Worker对象就可以了，例如：

Js代码  
var worker = new Worker("worker.js");  

注意：在后台线程中是不能访问页面或窗口对象的。如果在后台线程的脚本文件中使用到window对象或document对象，则会引起错误的发生。

另外，可以通过发送和接收消息来与后台线程互相传递数据。通过对Worker对象的message事件句柄的获取可以在后台线程之中接收消息，使用方法如下：

Js代码  
worker.addEventListener("message", function(event) {  
    // 处理接收的消息。  
}, false);  

使用Worker对象的postMessage()方法来对后台线程发送消息，发送的消息是文本数据，但也可以是任何JavaScript对象（需要通过JSON对象的stringify()方法将其转换成文本数据）。

Js代码  
worker.postMessage(message);  

另外，同样可以通过获取Worker对象的message事件句柄及Worker对象的postMessage()方法在后台线程内部进行消息的接收和发送。

与线程进行数据的交互

使用后台线程时不能访问页面或窗口对象，但是并不代表后台线程不能与页面之间进行数据交互。示例中页面上随机生成一个整数数组，然后将该整数数组传入线程，挑选出数组中可以被3整除的数字，然后显示在页面的表格中，主页面代码如下：

Html代码  
<!DOCTYPE html>  
<html lang="zh-cn">  
    <head>  
        <meta charset="UTF-8"/>  
        <title>与线程进行数据交互</title>  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
        <script type="text/javascript">  
$(function() {  
    var intArray = new Array(100);  
    for(var index = 0; index < intArray.length; index++) {  
        intArray[index] = parseInt(Math.random() * 100);  
    }  
    var worker = new Worker("sumWorker.js");  
    worker.postMessage(JSON.stringify(intArray));  
    worker.addEventListener("message", function(event) {  
        if(event.data != "") {  
            var array = JSON.parse(event.data);  
            var row, col;  
            for(var index = 0; index < array.length; index++) {  
                row = parseInt(index / 10);  
                col = index % 10;  
                if(col == 0) {  
                    $("<tr>").appendTo("tbody");  
                }  
                $("<td>").text(array[row * 10 + col]).appendTo("tbody tr:last");  
            }  
        }  
    }, false);  
});  
        </script>  
    </head>  
    <body>  
        <table>  
            <caption>从随机生成的数字中抽取3的倍数并显示</caption>  
            <tbody></tbody>  
        </table>  
    </body>  
</html>  

示例中使用的线程脚本代码如下：

Js代码  
self.addEventListener("message", function(event) {  
    var data = JSON.parse(event.data);  
    var returnArray = new Array();  
    var temp;  
    for(var index = 0; index < data.length; index++) {  
        if((temp = data[index]) % 3 == 0) {  
            returnArray.push(temp);  
        }  
    }  
    self.postMessage(JSON.stringify(returnArray));  
}, false);  

线程嵌套

线程中可以嵌套子线程，这样我们可以把一个较大的后台线程切分成几个子线程，在每个子线程中各自完成相对独立的一部分工作。

单层嵌套

修改上例中的主页面script元素中的JavaScript代码如下：

Js代码  
$(function() {  
    var worker = new Worker("randomWorker.js");  
    worker.postMessage("");  
    worker.addEventListener("message", function(event) {  
        if(event.data != "") {  
            var array = JSON.parse(event.data);  
            var row, col;  
            for(var index = 0; index < array.length; index++) {  
                row = parseInt(index / 10);  
                col = index % 10;  
                if(col == 0) {  
                    $("<tr>").appendTo("tbody");  
                }  
                $("<td>").text(array[row * 10 + col]).appendTo("tbody tr:last");  
            }  
        }  
    }, false);  
});  

其中“randomWorker.js” 脚本文本代码如下：

Js代码  
self.addEventListener("message", function(event) {  
    var intArray = new Array(100);  
    for(var index = 0; index < intArray.length; index++) {  
        intArray[index] = parseInt(Math.random() * 100);  
    }  
    var worker = new Worker("sumWorker.js");  
    // 把随机数组传递给子线程进行挑选工作。  
    worker.postMessage(JSON.stringify(intArray));  
    worker.addEventListener("message", function(event1) {  
        self.postMessage(event1.data);  // 把挑选结果返回主页面。  
    }, false);  
}, false);  

注意：在线程，向子线程提交消息时使用子线程对象的postMessage()方法，而向本线程的创建源发送消息时使用self.postMessage()方法。在本线程中创建的挑选线程“sumWorker.js”脚本代码如下：

Js代码  
self.addEventListener("message", function(event) {  
    var data = JSON.parse(event.data);  
    var returnArray = new Array();  
    var temp;  
    for(var index = 0; index < data.length; index++) {  
        if((temp = data[index]) % 3 == 0) {  
            returnArray.push(temp);  
        }  
    }  
    self.postMessage(JSON.stringify(returnArray));  
        self.close();  // 关闭子线程。  
}, false);  

注意：在子线程中向发送源发送回消息后，如果该子线程不再使用，则可以使用self.close()方法关闭该子线程。

多层嵌套

要实现子线程与子线程之间的数据交互，其基本步骤如下：

先创建发送数据的子线程。
执行子线程中的任务，然后把要传递的数据发送给主线程。
在主线程接收到子线程传回来的消息时，创建接收数据的子线程，然后再把发送数据的子线程中返回的消息传递给接收数据的子线程。
执行接收数据子线程中的代码。

线程中可用的变量、函数与类

self：用来表示本线程范围内的作用域。
postMessage(msg)：向创建线程的源窗口发送消息。
onmessage：获取接收消息的事件句柄。
importScripts(urls)：导入其它JavaScript脚本文件。参数为该脚本文件的URL地址，可以导入多个脚本文件，导入的脚本文件必须与使用该线程文件的页面在同一个域中，并在同一个端口中。
navigator对象：与window.navigator对象类似，具有appName、platform、userAgent、appVersion等属性。
sessionStorage、localStorage：可以在线程中使用Web Storage。
XMLHttpRequest：可以在线程中处理Ajax请求。
Web Workers：可以在线程中嵌套线程。
setTimeout()、setInterval()：可以在线程中实现定时处理。
close()：结束本线程。
eval()、isNaN()、escape()等：可以使用所有JavaScript核心函数。
object：可以创建和使用本地对象。
WebSockets：可以使用WebSockets API来向服务器发送和接收信息。

分享到：

Java实现SOAP协议之 HelloWorld | cookie 和session 的区别详解

2016-06-22 11:04
浏览 341
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 使用Web Worker处理线程

基础知识

与线程进行数据的交互

线程嵌套

单层嵌套

多层嵌套

线程中可用的变量、函数与类

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 使用Web Worker处理线程

基础知识

与线程进行数据的交互

线程嵌套

单层嵌套

多层嵌套

线程中可用的变量、函数与类

评论

发表评论

相关推荐

html5 css input 如何去掉点击后出现的边框

HTML5的数据缓存

手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明

10 个支持列表无限滚动的 jQuery 插件

url 特殊字符 传递参数解决方法

css3动画简介以及动画库animate.css的使用

DOM Node对象参考手册

IE和火狐的css兼容性问题

CSS对浏览器的兼容性问题

iframe 自适应高度,无限级父框架,多层框架自适应

DIV+CSS解决IE6，IE7，IE8，FF兼容问题

20个学习CSS的绝佳网站——让你从入门到精通

Photoshop设计博客界面和PSD格式的切片

日历代码

HTML中少为人知的个性化标记

防IE主页被修改

web加速

frameset frame iframe

HTML字符实体（Character Entities），转义字符串（Escape Sequence）

HTML颜色代码表

最近访客更多访客>>

url 特殊字符传递参数解决方法