美文网首页
H5 Web Worker(Dedicate worker)

H5 Web Worker(Dedicate worker)

作者: codeice | 来源:发表于2016-07-08 14:17 被阅读124次

WebWorker类似于浏览器中的多线程操作。之前的JS中,无论你是使用setTimeout、setInterval 还是 使用了XMLHttpRequest,都是在一个线程里面。前两个使用消息队列,XMLHttpRequest则是浏览器会帮你进行闲时进行。归根结底,都是在一个线程里面跑。如果用户想进行一些阻塞操作,很可能会产生卡住页面的情况。

1.Web Worker是什么
Web Worker 是HTML5标准的一部分,这一规范定义了一套 API,它允许一段JavaScript程序运行在主线程之外的另外一个线程中。Web Worker 规范中定义了两类工作线程,分别是专用线程Dedicated Worker和共享线程 Shared Worker,其中,Dedicated Worker只能为一个页面所使用,而Shared Worker则可以被多个页面所共享。

main.js

var worker = new Worker('task.js');
console.log('main 1')
worker.postMessage("message from main.js");

//----接收task发出的信息
worker.addEventListener('message', function(event) {
    console.log('main 4')
    var data = event.data;
    console.log("I got the message from taks.js " + data);
    worker.terminate();

})
console.log('main 2')

worker.onerror = function(error) {
    console.log(error.filename, error.lineno, error.message);
}

task.js

console.log('task 3');
onmessage = function(event) {
    var data = event.data;
    console.log("got message from main.js,message=" + data);
    postMessage('Hi from task.js');
}
  1. worker线程的创建的是异步的

代码执行到”var worker = new Worker(task.js’)“时,在内核中构造WebCore::JSWorker对象(JSBbindings层)以及对应的WebCore::Worker对象(WebCore模块),根据初始化的url地址”task.js”发起异步加载的流程;主线程代码不会阻塞在这里等待worker线程去加载、执行指定的脚本文件,而是会立即向下继续执行后面代码。

  1. postMessage消息交互由内核调度

main.js中,在创建woker线程后,立即调用了postMessage方法传递了数据,在worker线程还没创建完成时,main.js中发出的消息,会先存储在一个临时消息队列中,当异步创建worker线程完成,临时消息队列中的消息数据复制到woker对应的WorkerRunLoop的消息队列中,worker线程开始处理消息。在经过一轮消息来回后,继续通信时, 这个时候因为worker线程已经创建,所以消息会直接添加到WorkerRunLoop的消息队列中;

5.API进阶
在worker线程中,可以获得下列对象

  1. navigator对象
  2. location对象,只读
  3. XMLHttpRequest对象
  4. setTimeout/setInterval方法
  5. Application Cache
  6. 通过importScripts()方法加载其他脚本
  7. 创建新的Web Worker
    worker线程不能获得下列对象
  8. DOM对象
  9. window对象
  10. document对象
  11. parent对象

相关文章

  • H5 Web Worker(Dedicate worker)

    WebWorker类似于浏览器中的多线程操作。之前的JS中,无论你是使用setTimeout、setInterva...

  • web worker 处理多文件并行上传

    一 web worker: 什么是web worker Web Worker为Web内容在后台线程中运行脚本提供...

  • Javascript:Web Worker基础

    参考资料Web Workersweb worker详解Blob对象 Web Worker分为专属Worker(De...

  • web worker

    web Worker web Worker 文件单独写在一个文件中,在main worker 中 执行的文件里使用...

  • Web Worker

    一、Web Worker 1. Web Worker是 运行在后台的javascript,也就是说worker其实...

  • 为你写的网页“提速”---Web Worker

    认识Web Worker Web Worker是 运行在后台的javascript,也就是说worker其实就是就...

  • Web Worker

    什么是Web Worker? Web Worker是 运行在后台的javascript,也就是说worker其实就...

  • service worker

    Service Worker是继web Worker后又一个新的线程,这个线程比web worker独立得更彻底,...

  • NFH.009 - Web Worker与Web Socket

    12.22学习经验分享# Bruce_Zhu于2016.12.23 一、Web Worker Web Worker...

  • 关于Web Worker

    Web Worker Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 ...

网友评论

      本文标题:H5 Web Worker(Dedicate worker)

      本文链接:https://www.haomeiwen.com/subject/skxrjttx.html