`
mooring
  • 浏览: 95333 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

HTML5 Worker之多线程学习笔记

阅读更多

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的注意事项及特例

 

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

 

分享到:
评论

相关推荐

    vue3中使用Web Worker多线程(JS原味版)

    用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644

    vue3中使用Web Worker多线程(TS风味版)

    用于《vue3中使用Web Worker多线程》这篇文章的项目Demo下载 文章地址:https://blog.csdn.net/weixin_42063951/article/details/125300644

    深入HTML5WebWorker应用实践:多线程编程

    至2008年W3C制定出第一个HTML5草案开始,HTML5承载了越来越多崭新的特性和功能。它不但强化了Web系统或网页的表现性能,而且...本文深入HTML5多线程规范,讲述多线程实现原理、方法,同时以实例的形式讲解HTML5中多线程

    HTML5 Web Workers Demo多线程示例

    Workers 多线程学习DEMO,也可以直接使用。

    flash builder4.7中worker类,多线程的使用

    flash builder在版本4.7中正式提供多线程的类,worker,此例子很不错。

    HTML5之多线程(Web Worker)

    主要介绍了HTML5之多线程(Web Worker)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    线程示例WorkerThread_demo

    线程示例WorkerThread_demo,线程示例WorkerThread_demo, 线程示例WorkerThread_demo,

    html5 worker

    代码是一个html5的小例子,主要是能通过此代码清晰的知道html5在worker上是怎么调用的,注意此功能ie不支持

    HTML5新特性 多线程(Worker SharedWorker)

    谢天谢地,HTML5为我们提供了实现多线程的机制,这么好的东西,想必你早就再用了,不过没关系啊,咱们一块儿复习一下咯! 一、Worker类  1、方法介绍  (1)构造函数 new Worker(arg) :参数表示你的线程要执行的...

    HTML5 WebWorker

    NULL 博文链接:https://blueion.iteye.com/blog/1226652

    C#backgroundworker多线程实用例子

    C#backgroundworker多线程实用例子

    JavaScript中的Web worker多线程API研究

    HTML5支持了Web Worker这样的API,允许网页在安全的情况下执行多线程代码。不过Web Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的“多...

    基于多线程大数框架decimaljs和webworker圆周率计算

    圆周率计算,多线程,基于大数框架decimal.js和webworker 圆周率计算-可设置圆周率位数-可选择线程个数-多线程大数框架webworker输出useragent大数框架

    flash builder4.7多线程类worker的使用视频2

    多线程类worker的使用,接上一个资源,这是第2部分...

    多线程编程中应该注意的问题

    多线程编程中要注意协调好各个线程的优先级。一般来说,控制线程的优先级要高于Worker线程。这样做,可以保证Client(最终用户或者其他模块)尽快得到响应。当控制线程是与最终用户交互的界面线程时更应如此,如果...

    HTML5WebWorker深入浅出教程

    至2008年W3C制定出第一个HTML5草案开始,HTML5 ...在HTML5中提出了工作线程(Web Worker)的概念,并且规范出WebWorker的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想的内存消耗。Web

    web worker线程

    为什么使用Worker线程? 1、不会阻塞主应用程序,但是fork进程一次只能处理一项任务。如果您有两个任务,一个将花费10秒,另一个将花费1秒,按照顺序执行,不理想的是必须等待10秒才能执行第二个任务。 2、如果一个...

Global site tag (gtag.js) - Google Analytics