HTML5 Worker之多线程学习笔记

最新推荐文章于 2022-10-01 21:48:36 发布

原创最新推荐文章于 2022-10-01 21:48:36 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 worker

javascript 专栏收录该内容

6 篇文章

订阅专栏

Web Worker是html5中比较吸引人的一个特性,看了官方文档(MDN),得以下的学习笔记,实属班门弄斧,请高手拍砖赐教

一 .Web Worker特点:

与C程序在WIN32下通过的CreateThread或者利用pthread库中的pthread_create创建的线程是一致的,都是一个
系统级的线程
只能在后台运行,不能操作DOM
子线程可以访问navigator对象的userAgent, platform, appVersion及appName属性
通过postMessage是完整的消息克隆,不是简单的地址引用.即消息体本身有两份完整的拷贝.
子线程可以通过全局函数调用 importScripts( )将其他脚本导入到当前执行环境,如 importScripts("foo.js", "bar.js");

二. Web Worker简单示例:

主页代码 :　main.js

 var worker = new Worker("thread.js");
 worker.addEventListener("message", function(event) {
         console.log( "call back from the thread");
         console.log( "thread message is:" + event.data );
 });
 worker.postMessage();

线程js代码 thread.js

self.onmessage = function( event )
{
         self.postMessage( " I am from thread !");
}

//注意: addEventListener与onmessage的区别与js中其他 onclick和addEventListener("click"....的区别是一致的

三. 创建Web Worker的注意事项及特例

线程指定的js文件可能会受同源策略限制,不同的浏览器的实现有不同(Firefox 10+ 允许跨域).
由于传递的数据是独立的拷贝,所以如果主进程和线程之间的函数调用的话,可能会失败.
消息传递内部实现为:先将消息序列化,再传递,接收端得到消息后则反之,先返序列化,然后再取数据,不过这些都是自动完成的.
Chrome 17以后对传递的消息有了一种新的机制,一次性引用传递.实现机理将主进程或线程中创建的对象通过地址传递出去,但同时本身的消息内容会被立即销毁.
子线程还可以再创建子子线程(Chrome目前不支持--Webkit内核的目前都不支持,Firefox支持但子子线程必须与子线程同源)

四. 子线程的销毁

1. 通过父进程/线程可以调用 worker.terminate()来强制结束一个子线程
worker.terminate();

2. 子线程结束自己
nsIWorkerScope.close();

五. 小结

首先 html5中的worker确实带来的很多惊喜,通过合理的使用worker可以给用户带来一个可用的ui界面,让用记有更好的用户体验
其次 web worker目前的支持也有一些不统一,在处理过程中会有一些麻烦

问题:

如果通过子线程去跨域取数据, Jsonp是否行得通,是否有更好的办法来解决这个问题了呢? (下回解决)

转载请保留以下内容：
author:mooring
sites: http://mooring.iteye.com
date:2012/02/23